Vue3.0相对 Vue2.0的主要语法改变

Vue3.0的时代已经到来，为了紧追时代的步伐，学习 Vue3.0是势在必行的，在学习过程中，发现 Vue3.0相对于 Vue2.0，在语法上的改动并不是很大，为了巩固学习和便于日后复习，我特意总结一下 Vue3.0相对 Vue2.0的主要语法改变。

1、ref 属性的定义

ref 是用于获取组件对象或者元素对象，在 Vue2.0中传入的是一个字符串，然而，在 Vue3.0中可以定义一个函数，函数的参数是接收到组件对象或者是元素对象，所以在使用过程中，可以自定义变量在函数中接收ref 的对象。如下例，用一个数组接收对应该的 ref 对象。

2、定义异步组件

在 Vue2.0中，我们通常需要在路由配置时使用异步组件，实现代码分割，例如：

const  page = () => import('@/pages/page/index')

在 Vue3.0需要使用defineAsyncComponent 助手方法来定义异步组件，所以上面的使用要改为

import { defineAsyncComponent } from 'vue'

const  page = defineAsyncComponent(() => import('@/pages/page/index'))

如果是带选项的创建，如：

里的 component 属性需要改为 loader。

3、自定义指令的钩子改动

• bind → beforeMount
• inserted → mounted
• beforeUpdate：新的！这是在元素本身更新之前调用的，很像组件生命周期钩子。
• update → 移除！有太多的相似之处要更新，所以这是多余的，请改用 updated。
• componentUpdated → updated
• beforeUnmount：新的！与组件生命周期钩子类似，它将在卸载元素之前调用。
• unbind -> unmounted

4、data属性强制为函数

在 Vue2.0中属性是可以定义是一个对象的，在 Vue3.0中 data 只能定义为函数。

5、去除 Vue 实例的事件相关的 API

在项目实践中，我们通常会使用到一个 Vue 实例作为event bus来实现跨组件之间的通信，然而，在 Vue3.0中是不能使用这种方法，因为Vue 实例不再拥有$on，$off 和 $once 方法。如果需要使用事件机制来实现通信，只好自己封装或者是使用第三方外库。

6、去除了过滤器（filters）

Vue3.0不能定义过滤器属性，filters 将使用 computed 或者方法来代替，在模板语句中不再有{{ count | costumCount }}这种写法。

7、全局 API 的使用

在 Vue3.0中创建一个 Vue 组件实现要使用createApp，如：

import { createApp } from 'vue'

const app = createApp({})

调用全局的方式也相应改为 app 来调用：

 

8、render 函数的改动

render 函数在 Vue2.0会接收到一个渲染的函数的参数，但在 Vue3.0中，不再接收到这个参数，改为从 vue 库中引入：

9、过渡动画的类名改变

原来的 v-enter 改为 v-enter-from，原来的 v-leave 改为 v-leave-from

10、v-model 的改变

在 Vue2.0中一个组件只能定义一个 v-model，其实参数要实现 v-model 的效果则需要使用 value.async 和 $emit("update:value") 。在 Vue 3.0中将支持多个 v-model，多个 v-model 用 v-model:value 来区分，在子组件改变v-model 传过来的值一样是使用$emit("update:value")。