网站诊断分析案例,wordpress 酷炫分页,网站建设 问卷调查,秦皇岛乾兴建设招聘vue2 VS vue3 对比vue2vue3配置脚手架cmd命令行可视化方式创建脚⼿架组件通信props、$emit、provide、$arrts、EventBus等props、$emit、provide、inject、arrts等数据监听watch,computedwatch,watchEffect,computed双向绑定Object.definePropertyProxyAPI⽣命周期四个阶段befo…vue2 VS vue3 对比vue2vue3配置脚手架cmd命令行可视化方式创建脚⼿架组件通信props、$emit、provide、$arrts、EventBus等props、$emit、provide、inject、arrts等数据监听watch,computedwatch,watchEffect,computed双向绑定Object.definePropertyProxyAPI⽣命周期四个阶段beforeCreate 和created—setupapi选项式Options API组合式Composition API
双向数据绑定原理
vue2 的双向数据绑定是通过ES5的⼀个APIObject.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()onMountedbeforeUpdateonBeforeUpdate更新阶段updated onUpdatedbeforeDestroyonBeforeUnmount 销毁阶段 destrovedonUnmounted
建立数据发生了变化 vue2把数据放在data中vue3把数据放在setup中。
是否支持碎片化 vue2.0只允许有一个根标签vue3.0支持碎片化可以拥有多个根节点。 Vue2
templatedivheader/headermain/mainfooter/footer/div
/templateVue3
templateheader/headermain/mainfooter/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 :itemgoodsList[1]/MyTest3.子组件props接收export default {//接收数据props:[item]} vue3子传父
