vue2 VS vue3
对比 | vue2 | vue3 |
配置脚手架 | cmd命令行 | 可视化方式创建脚⼿架 |
组件通信 | props、$emit、provide、$arrts、EventBus等 | props、$emit、provide、inject、arrts等 |
数据监听 | watch,computed | watch,watchEffect,computed |
双向绑定 | Object.defineProperty | ProxyAPI |
⽣命周期 | 四个阶段 | |
api | 选项式Options API | 组合式Composition API |
双向数据绑定原理
vue2 的双向数据绑定是通过ES5的⼀个API,
Object.defineProperty()对数据进⾏劫持,结合发布订阅模式的⽅式来实现的,
也就是说数据和视图同步,数据发生变化,视图跟着变化,视图变化,数据也随之发生改变;
其核心是 Object.defineProperty()方法,给Vue中的数据绑定get和set方法,当获取数据的时候,调用get方法,修改data中的数据的时候调用set方法,通过watcher监听器去更新视图,完成数据的双向绑定。
vue3 中使⽤了ES6的ProxyAPI对数据代理,通过 reactive() 函数给每⼀个对象都包⼀层 Proxy,通过 Proxy 监听属性的变化,从⽽实现对数据的监控。
相对于Object.definePropery()有以几个优点:1.Proxy直接代理整个对象而非对象属性,这样只需要做一层代理就可以监听同级结构下的所有属性变化, 包括新增属性和删除属性。 2.Proxy可以监听数组的变化。
生命周期对比
vue2生命周期 | vue3生命周期 | 描述 |
beforeCreate() | 已去掉setup代替 | 创建阶段 |
Created() | 已去掉setup代替 | |
beforeMount() | onBeforeMount | 挂载阶段 |
mounted() | onMounted | |
beforeUpdate | onBeforeUpdate | 更新阶段 |
updated | onUpdated | |
beforeDestroy | onBeforeUnmount | 销毁阶段 |
destroved | onUnmounted |
建立数据发生了变化
vue2把数据放在data中,vue3把数据放在setup中。
是否支持碎片化
vue2.0只允许有一个根标签,vue3.0支持碎片化,可以拥有多个根节点。
Vue2
<template><div><header></header><main></main><footer></footer></div>
</template>
Vue3
<template><header></header><main></main><footer></footer>
</template>
组件通信
- props通信
- vu3 父传子
- vue2父传子
1.定义数据 data(){return{goodsList:[{id:1,name:'方便面',price:2.5,info:'好吃不贵'},{id:2,name:'火腿肠',price:2,info:'价钱合理'},{id:3,name:'鹌鹑蛋',price:4.5,info:'物美价廉'},]}},2.放到模板的子组件中 <MyTest :item="goodsList[1]"></MyTest>3.子组件props接收export default {//接收数据props:['item']}
- vue3子传父