[vue]Vue3.x bate 初体验

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

说完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上有些许差异，在写法上也有略微不同，空了再摆

哇，超级干货，等待更新

先看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 的函数式组件的签名保持一致。