Vue3.0相对 Vue2.0的主要语法改变
Vue3.0的时代已经到来,为了紧追时代的步伐,学习 Vue3.0是势在必行的,在学习过程中,发现 Vue3.0相对于 Vue2.0,在语法上的改动并不是很大,为了巩固学习和便于日后复习,我特意总结一下Vue3.0相对 Vue2.0的主要语法改变。1、ref 属性的定义ref 是用于获取组件对象或者元素对象,在 Vue2.0中传入的是一个字符串,然而,在 Vue3.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")。
更多推荐
所有评论(0)