Vue2.0与Vue3.0的区别

本文介绍: setup（组件创建之前） -&g t; setup（组件创建完成） -> onBe f o reMount（组件挂载之前） -> o nMounted（组件挂载完成） -> o nBef o reUp date（数据更新，虚拟DOM打补丁之前） -> o nUp date d（数据更新，虚拟DOM渲染完成） -> o nBeforeUnmount（组件销毁之前）-> onUnmounted（组件销毁后）只会比较 patchFlag s发生变化的vnode，进行更新视图，对于没有变化的元素做静态标记，在渲染的时候直接复用。

一、Vue2和Vue3的数据 双向 绑定 原理发生了改变

Vue2的双向数据绑定是利用ES5的一个API，Object.definePrope rt()对数据进行劫持结合发布订阅模式的方式来实现的。通过Object.definePrope rt y来劫持数据的setter，getter，在数据变动时发布消息给订阅者，订阅者收到消息后进行相应的处理。

（1）将Vue中的data里的所有属性通过实现Observer（监听器）来完成数据劫持，如果有变动，就通知订阅者
（2）Watc he r 订阅者，可以收到属性的变化通知并执行相应的函数，从而更新视图
（3）Com pile解析器，可以扫描和解析每个节点的相关指令，并根据初始化模板数据以及初始化相应的订阅器
（4）Dep消息订阅器，主要负责收集订阅者，然后在属性变化的时候通知对应的订阅者

在这里插入图片描述

Vue3中使用了es6的Pro xyAPI对数据代理，通过 reactive()函数给每一个对象都包一层Pro xy，通过Pro xy监听属性的变化，从而实现对数据的监控。其他过程与2.0相同。

proxy相较于object.de finePrope rty的优势
1.直接监听对象而非属性
2.直接监听数组的变化
3.拦截方式较多（有13种方式）
4.Pro xy返回一个新对象，可以只操作新对象达到目的，而Object.de finePrope rty只能遍历对象属性直接修改（需要用深拷贝进行修改）
5.Pro xy作为新标准将收到浏览器厂商重点持续的性能优化
注：Vue2.0不使用 proxy的原因，其实最主要还是兼容性问题。proxy不能用polyfill来兼容（polyfill主要抚平不同浏览器直接对js 实现的差异）

二、创建Vue2和Vue3项目的文件变化

1.main.js中的变化

vue2.0
import Vue from 'vue';
const vue = new Vue({
    render: (h:any) => h(App)
}).$mount('#app');
export default vue;

vue3.0
import { createApp } from 'vue';
import App from './App.vue';
import router from './router/index';
const app = createApp(App).use(router);

Vue2.0是直接创建一个Vue实例，Vue3.0中是按需导出一个createAPP

2.Vue3中的组件文件不再强制要求必须有根元素也就是说在Vue2.0中必须要有一个根元素，在Vue3中没这个要求

//vue2.0
<template>
    <div>
        <h1></h1>
    </div>
</template>

//vue3.0
<template>
  <img alt="Vue logo" src="./assets/logo.png">
  <HelloWorld msg="Welcome to Your Vue.js App"/>
</template>

三、Composition API

Vue2使用的是选项类型API（Option s API），Vue3使用的是合成型API（Composition API）
选项型api在代码里分割了不同的属性：data，computed，methods等；
合成型api能让我们使用方法来分割，相比于旧的API使用属性来分组，这样代码会更加简便和整洁
VUE2.0是将mounted、data、computed、watch之类的方法作为VUE对象的属性进行导出。VUE3.0新增了一个名为 setup的入口函数，value, computed, watch, onMounted等方法都需要从外部 import。

四、建立数据data

Vue2是把数据放入 data中
Vue3就需要使用一个新的setup()方法，此方法在组件初始化构造的时候触发。使用以下三个步骤来建立反应性数据：
1.从Vue引入 reactive；
2.使用reactive()方法来声明数据为响应性数据；
3.使用setup()方法来返回我们得响应性数据，从而template可以获取这些响应性数据。

五、生命周期

2.0周期名称
 beforeCreate（组件创建之前） -> created（组件创建完成） -> beforeMount（组件挂载之前） -> mounted（组件挂在完成）-> beforeUpdate（数据更新，虚拟DOM打补丁之前） -> updated（数据更新，虚拟DOM渲染完成） -> beforeDestroy（组件销毁之前）-> dest royed（组件销毁后）
3.0周期名称
setup（组件创建之前） -> setup（组件创建完成） -> onBeforeMount（组件挂载之前） -> onMounted（组件挂载完成） -> onBeforeUpdate（数据更新，虚拟DOM打补丁之前） -> onUpdated（数据更新，虚拟DOM渲染完成） -> onBeforeUnmount（组件销毁之前）-> onUnmounted（组件销毁后）

六、组件通信

1、获取 props
vue2：console.log(‘props’,th i s.XXX)
vue3：set up(props,context){console.log(‘props’,props)}

七、Vue2和Vue3的diff 算法

Vue2 diff 算法就是进行虚拟节点对比，并返回一个patch对象，用来存储两个节点不同的地方，最后用patch 记录的消息去局部更新DOM。
Vue2 diff 算法会比较每一个v node，而对于一些不参与更新的元素，进行比较是有点消耗性能的

Vue3 diff 算法在初始化的时候会给每个虚拟节点添加一个patchFlag s，pat chFlag s 就是优化的标识。
只会比较pat chFlags发生变化的v node，进行更新视图，对于没有变化的元素做静态标记，在渲染的时候直接复用

八、模板 指令

v–model
Vue3新增：现在可以在同一个组件上使用多个 v–model 绑定；
Vue3新增：现在可以自定义 v–model 修饰符。

v-for v–if优先级
Vue2中v-for 优先级更高这样会带来性能的浪费(每次都要先渲染才会进行条件判断)
Vue3中v–if优先级更高

v-bind

Vue2
//模板
<div id="red" v-bind="{id: 'blue'}"></div>
//结果
<div id="red"></div>

Vue3
//模板
<div id="red" v-bind="{id: 'blue'}"></div>
//结果
<div id="blue"></div>

//模板
<div v-bind="{id: 'blue'}" id="red"></div>
//结果
<div id="red"></div>