vue2和vue3的区别详解

vue2 VS vue3

双向数据绑定原理

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把数据放在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子传父​