shuwenkai
侠客
侠客
  • 最后登录2020-09-27
  • 发帖数12
  • 社区居民
阅读:346回复:3

[vue]Vue3.x bate 初体验

楼主#
更多 发布于:2020-08-17 21:12
vue3.0从去年提出,到今年4月更新bate版本也有不短的时间,虽说距离正式公司项目实装还有些许时日,


但是学习的脚步永远不能停歇呀


今天就先从建立一个3.0bate项目开始吧
首先建立3.0项目有两种情况。
  1.脚手架直接搭建3.0项目
  2.已有2.0项目升级
先说第一种脚手架搭建:


首先我们需要检查自己的vue/cli脚手架版本,网上有帖子说3.x的脚手架就已经支持创建,但是经过我实际测试之后发现3.x的脚手架版本是不行的,需要vue/cli 4.x版本才可以


图片:Vue-v.png

图片:create.png




创建项目跟创建2.x项目还是一样,选择自己需要的东西

图片:packagejson.png

图片:选择版本.png



注意这里选择3.x的vue版本


然后一路回车选择等待创建好就行,因为我是选择了ts。所以创建出来的项目略微有差异


图片:目录.png

shuwenkai
侠客
侠客
  • 最后登录2020-09-27
  • 发帖数12
  • 社区居民
沙发#
发布于:2020-08-19 16:26
说完3.x项目的创建,再来说如果现有项目需要升级至3.x怎么弄呢?


因为官方一开始也是给出了说法3.x是兼容2.x的,所以2.x升级应该是没问题的,但是目前我没发现什么好的办法将代码整体升级成3.x写法,但是,2.x项目中是完全可以使用3.x的写法的


方法也简单,只需要我们下载composition-api包就可以了

npm install @vue/composition-api

图片:下载.png




下载完成需要在 main.js中引入,类似于引入其他第三方插件一样



import CompositionAPI from '@vue/composition-api'

Vue.use(CompositionAPI)



做好准备工作我们就可以在2.x的老项目中使用3.x的新写法了


值得注意的是,2.x的写法虽然与3.x一样,但是有些地方还是有一些小的差异哦


首先我们将setup的两个参数打印出来

setup(props,context){
    const fun=()=>{
      console.log(props,context);
    }
    return {
      name:'hello world!',
      fun
    }
  }




<h1 @click="fun">pw_ name </h1>



2.x打印结果

图片:打印.png









这是3.x的context打印出来的结果

图片:3.x打印.png




可以看到,如果在2.x项目中使用compositionapi时,打印出来的两个参数跟使用脚手架搭建的3.x项目还是有些许差异,在第二个context参数下面,2.x打印出来是比脚手架搭建的3.x多几个参数的,root,refs等等,这也是为了2.x项目路由以及第三方的组件引入有关系,
我们在2.x项目使用路由都是this.$router,this.$route等等,因为是直接在mainjs引入在Vue原型上面的
但是3.x的路由已经分离出来,减少了对this的操作,3.x的路由以及第三方插件的引入方式在前面说过,不再赘述


两种方法不仅在context上有些许差异,在写法上也有略微不同,空了再摆
doubleyong
管理员
管理员
  • 最后登录2020-10-29
  • 发帖数914
  • 最爱沙发
  • 喜欢达人
  • 原创写手
  • 社区居民
  • 忠实会员
板凳#
发布于:2020-08-18 21:38
哇,超级干货,等待更新
知识需要管理,知识需要分享
shuwenkai
侠客
侠客
  • 最后登录2020-09-27
  • 发帖数12
  • 社区居民
地板#
发布于:2020-08-17 21:27
先看home.vue

图片:home.png




主要的变化,写法都糅杂进入了setup函数


这是官方Composition API的写法。2.x使用的是options Api写法


我们在setup里面定义变量,函数都需要通过return 暴露出去。参考2.x的data


我在这里引入了一个我自己写的start组件

图片:start.png





可以看到,setup函数接受两个参数,
该函数接收 props 作为其第一个参数
第二个参数提供了一个上下文对象,从原来 2.x 中 this 选择性地暴露了一些 property。
值得注意的是,在setup函数中使用this是undefined,而不是2.x的vue实例
那么问题来了
我如果需要使用emit,router这些以前在this上面的属性需要怎么弄呢?

为了实现更好的组件化, 减轻对this的操作,所以现在使用emit方法直接是
使用setup的第二个参数
图中context为第二个参数,
这样写类似于以前的this.$emit(),参数还是(event,args)接受参数,第一个参数为事件名称,后续为事件参数
context.slots,context.attrs不细说,参考2.x API
context.emit('event',state)


如果要使用路由,需要先npm下载router模块,之后在main.js引入,因为我是在创建项目就选择了router,不细说


使用路由需要使用import引入,然后在setup定义,定义之后使用方法跟2.x的使用方法一直,毕竟vue-router是独立于vue之外的模块
import { useRoute, useRouter } from "vue-router";


setup(){





const route = useRoute();const router = useRouter();
const fun=()=>{
router.push('/home')
}

虽然麻烦了一些,但是使用官方给出的说法是
出于一些原因将 props 作为第一个参数,而不是包含在上下文中:

  • 组件使用 props 的场景更多,有时候甚至只使用 props

  • 将 props 独立出来作为第一个参数,可以让 TypeScript 对 props 单独做类型推导,不会和上下文中的其他属性相混淆。这也使得 setup 、 render 和其他使用了 TSX 的函数式组件的签名保持一致。
游客


返回顶部

公众号

公众号