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子传父​