区别:
1.vue2文件中只能有一个根标签,vue3中支持多个根标签
vue2: | vue3: |
<template> </template> |
<div></div> </template> |
注意:
- vue2中
必须要有根标签
- vue3中
可以没有根标签
,会默认将多个根标签包裹在一个fragement虚拟标签中,有利于减少内存。
2.定义数据变量和方法不同
Vue2是把数据放到了data 中,在 Vue2中 定义数据变量是data(){},创建的方法要在methods:{}
Vue3 就需要使用一个新的setup()方法,此方法在组件初始化构造的时候触发。使用以下三个步骤来建立反应性数据:
1)从vue 引入 reactive;
2)使用 reactive ()方法来声明数据为响应性数据;
3) 使用setup()方法来返回我们的响应性数据,从而template 可以获取这些响应性数据。
3.双向数据绑定原理不同
Vue2 的双向数据绑定是利用ES5的一个APIObject.definePropert() 对数据进行劫持,结合发布订阅模式的方式来实现的。
Vue3 中使用ES6的Proxy API对数据代理。
注意:
Vue3 使用数据代理的优势有以下几点:
1)definePropert 只能监听某个属性,不能对整个对象进行监听
2)可以省去for in,闭包等内容来提升效率(直接绑定整个对象即可)
3)可以监听数组,不用再单独的对数组做特异性操作,Vue3可以检测到数组内部数据的变化
4.生命周期函数钩子不同
vue2 | vue3 |
beforeCreate 组件创建之前 created 组件创建之后 beforeMount 组件挂载到页面之前执行 mounted 组件挂载到页面之后执行 beforeUpdate 组件更新之前 updated 组件更新之后 | setup 开始创建组件 onBeforeMount 组件挂载到页面之前执行 onMounted 组件挂载到页面之后执行 onBeforeUpdate 组件更新之前 onUpdated 组件更新之后 |
5.指令和插槽的使用不同
vue2 | vue3 |
不建议将v-for和v-if写在一起使用 允许直接使用slot | 将v-if当作v-for大的一个判断语句,不会相互冲突 移除keyCode作为v-on的修饰符,不支持config.keyCodes 移除v-on.native修饰符 移除过滤器filter 不允许直接使用slot,正确格式为 v-slot |
6.main.js文件不同
vue2 | vue3 |
使用prototype(原型)的形式进行操作,引入的是构造函数 | 需要使用结构的形式进行操作,引入的是工厂函数;vue3中app组件中可以没用根标签 |
7.父子之间传参不同
vue2 | vue3 |
父传子: 子组件通过prop接收 子传父: 子组件中通过$emit向父组件触发一个监听方法,传递一个参数 | 使用setup()中的第二个参数content对象中有emit,只需要在setup()接收第二个参数中使用分解对象法取出emit就可以在setup方法中随意使用了。 |
8.API类型不同
vue2 | vue3 |
选项型api (在代码中分割不同属性:data,computed,methods等) | 组合型api (使用方法进行分隔,显得更加简便整洁) |