vue3.x新特性

参考文章

1. https://zhuanlan.zhihu.com/p/85343099 2. https://juejin.im/post/5d977f47e51d4578453274b3 3. https://zhuanlan.zhihu.com/p/68477600

API文档

https://composition-api.vuejs.org/zh/api.html

总结

1、全面使用Typescript 2、响应式底层从 Object.defineProperty 变成 Proxy

Object.defineProperty =>https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty Proxy => https://es6.ruanyifeng.com/#docs/proxy

3、hooks =>参照react16.8新特性

项目创建及分析

项目创建

无论是创建2.x的项目还是3.0的项目，都是通过@vue/cli脚手架来创建

vue2.x项目转换成3.x的方式

1, 方式1 =>https://github.com/vuejs/composition-api 通过安装包 @vue/composition-api，然后在main.js中导入，最后使用Vue.use(xxx)，就可以使用Vue3.x的语法 适合还需要使用到基于Vue2.x的第三方插件，比如ElementUI 2, 方式2 => https://github.com/vuejs/vue-next vue add vue-next 完完全全使用vue3.x的生态（vue、vue-router、vuex都是最新版的），可能会找不到合适的基于Vue3.x的插件，比如ElementUI

vue2.x & vue3.0语法差异分析

template 和 style 几乎无差别

script

1, data

vue2.x data() { return {} } 实现响应式 定义在data中 使用Vue.set实现响应式 vue3.x import { reactive } from 'vue' setup (props) { const state = reactive({ title: 'Hello Vue3.0' }) return state } 实现响应式 从vue包中导入 toRefs 函数，并且在导出state的时候，进行包裹 setup (props) { const state = reactive({ title: 'Hello Vue3.0' }) return { ...toRefs(state), xxx } }

2, methods

vue2.x methods: { 方法 } vue3.x 写在setup函数中，在 state 中定义好方法，并且一定要在return中返回 记得要把返回的state数据，通过toRefs变成响应式的数据，否则不会起作用 return { ...toRefs(state), play }

3, computed

vue2.x computed: {计算属性函数} vue3.x 方式1 写在setup函数中 const getDoubleNum = computed(() => state.num * 2) 方式2 写在state中 const state = reactive({ myName: computed(() => 'my name is HuangWei --- vue3.x') }) 两种方式都需要从vue包中导入 computed 函数，如果是写在setup函数中，要记得最后return的时候，返回计算属性函数

4, 生命周期函数

vue2.x => created、mounted、beforeDestory、Destoryed … 和 data同级

vue3.x => 写在setup函数中，onCreated、onMounted、onBeforeUnmount、onUnmounted …

5, 组件传值

vue2.x 父传子 props 子传父 this.$emit 兄弟组件传值 公共bus

vue3.x 父传子 父组件 provide => provide(‘名字’,值) 子组件 inject => inject(‘名字’)

路由

vue2.x 导入vue、vue-router，然后Vue.use(VueRouter)，通过 new VueRouter() 创建路由对象，里面通过routes设置路由规则，并且最终导出

vue3.x

从vue包中，按需导入 createRouter 函数，通过 createRouter创建路由对象，里面通过routes设置路由规则，并且最终导出编程式导航 & 路由参数获取 编程式导航=> 从 vue-router 包中导入 useRouter 函数，然后在setup函数中使用useRouter函数创建出router对象，然后就可以调用对应的push等方法实现编程式导航了 路由参数获取 => 从 vue-router 包中导入 useRoute 函数，然后在setup函数中使用 useRoute 函数创建出route对象，然后通过route.params.xxx、route.query.xxx 就可以获取到路由参数了

vuex

vue2.x

导入vue、vuex，然后Vue.use(Vuex)，通过new Vuex.Store() 创建store对象，里面写好state、getter、mutation、action、module，并且最终导出store。

vue3.x

从vuex包中，按需导入 createStore 函数，通过 createStore() 创建store对象，里面写好state、getter、mutation、action、module，并且最终导出store。组件中使用store的时候，需要从 vuex 包中导入 useStore 函数，然后在setup函数中使用useStore函数创建出store对象，然后就可以使用了。

其他

setup函数在Vue3.0是一个非常重要的函数，它的执行时机是在 beforeCreate之后 和 created之前 ，很多代码都必须写在这个函数中，并且如果要在组件的template中使用，那么就必须在setup中return出去 setup中的两个参数说明 props 用于接收父组件传递过来的值，注意：必须先在setup外面props中定义好，才能通过props.xxx拿到父组件传递过来的值 context 上下文对象，这个上下文对象中包含了一些有用的属性，这些属性在 vue 2.x 中需要通过 this 才能访问到，在 vue 3.x 中，它们的访问方式如下： setup(props, context) { context.attrs context.slots context.parent context.root context.emit context.refs } 其中root相当于Vue2.x中的this 项目中vue2.x的语法和3.x的语法可以共存vue3.x之后，之前直接写在export default 里面的内容，现在大部分都要写在setup函数中，并且模型值、事件处理、计算属性函数要返回很多用到的内容比如：reactive、toRefs、computed、onMounted 都需要从vue包中导入

摘自 => https://www.bilibili.com/video/BV1ui4y137WP?p=1 段老师的xmind