Vue2.0 与 Vue3.0周期对比，以及主要区别

什么是生命周期

vue 组件从 创建 到 销毁 的整个过程（不同阶段执行不同的函数钩子）就是 生命周期。

Vue2的生命周期：

1. beforeCreate(创建前)
2. created(创建后)
3. beforeMount(挂载前)
4. mounted(挂载后)
5. beforeUpdate(更新前)
6. updated(更新后)
7. beforeDestroy(销毁前)
8. destroyed(销毁后)
9. activated(被 keep-alive 缓存的组件激活时调用)
10. deactivated(被 keep-alive 缓存的组件激活时调用)
11. errorCaptured(注册一个钩子，在捕获后代组件传递的错误时调用)

Vue2.0主要周期事件

阶段	之前	之后	执行时间
创建	beforeCreate	created	组件创建时执行
挂载	beforeMount	mounted	DOM挂载时执行
更新	beforeUpdate	updated	响应数据修改时执行
销毁	beforeDestroy	destroyed	组件销毁执行

Vue3的生命周期：

1. setup(替代 beforecreate和created)
2. onBeforeMount(挂载前)
3. onMounted(挂载后)
4. onBeforeUpdate(更新前)
5. onUpdated(更新后)
6. onBeforeUnmounted(销毁前)
7. onUnmounted(销毁后)
8. onActived(被 keep-alive 缓存的组件激活时调用)
9. onDeactived(被 keep-alive 缓存的组件激活时调用)
10. onErrorCaptured(注册一个钩子，在捕获后代组件传递的错误时调用)

Vue3.0主要周期事件

阶段	之前	之后	执行时间
创建	setup	setup	组件创建时执行
挂载	onBeforeMount	onMounted	DOM挂载时执行
更新	onBeforeUpdate	onUpdated	响应数据修改时执行
销毁	onBeforeUnmounted	onUnmounted	组件销毁执行

V2和V3的周期对比图

1.对于生命周期来说，整体上变化不大，只是大部分生命周期钩子名称上 + “on”，功能上是类似的。

2.不过有一点需要注意，Vue3 在组合式API（Composition API，下面展开）中使用生命周期钩子时需要先引入，而 Vue2 在选项API（Options API）中可以直接调用生命周期钩子，如下所示。

//Vue3
<script setup>
    import { onMounted } from 'vue'; // 使用前需引入生命周期钩子
    onMounted(()=>{
        // ...
    });
    // 注：可将不同逻辑代码拆分多个onMounted，按照顺序执行
</script>

//Vue2
<script>
    export default{
        mounted(){
            // ...
        }
        // 直接调用生命周期钩子
    }
</script>

区别补充

1. 根节点

Vue2.0 只可以存在一个根节点

Vue3.0 可以支持多个根节点 -虚拟DOM

// vue2.0
<template>
    <div>
        <header></header>
        <main></main>
        <footer></footer>
    </div>
</template>

// vue3.0
<template>
    <header></header>
    <main></main>
    <footer></footer>
</template>

2. 响应式原理

Vue2.0 原理基础是 Object.defineProperty，局限性最大的原因是它只能针对单例属性做监听。

Vue3.0 原理基础是 Proxy，监听是针对于一个对象，那么对这个对象的所有操作会进入监听操作，这就完全可以代理所有属性。

3. 选项API Options API 与 组合API Composition API

Vue2.0 选项 API 需要导出大型对象

Vue3.0 组合 API 允许我们创建组件

// vue2.0 选项API
<template>
    <div>选项API{{ count }}</div>
</template>

<script>
    export default {
        data(){
            return {
                count:0
            }
        }
    }
</script>

// vue3.0 组合API
<template>
    <div>组合API{{ count }}</div>
</template>

<script setup>
    import { ref } from 'vue'
    let count=ref(0);
</script>

4. v-for与v-if的优先级

Vue2.0 v-for的优先级比v-if更高

Vue3.0 v-if的优先级比v-for更高

5. 声明响应式变量

Vue2.0 需要在data中声明

Vue3.0 使用ref，reactive声明

6. Diff算法

Vue2.0 双端Diff算法

Vue3.0 最长递增子序列

7. Typescript支持

Vue2.0 需要额外配置

Vue3.0 原生支持

8.移除内容

Vue3.0 移除v-on.native修饰符；移除过滤器filter。

9.插槽不同

Vue2.0 使用slot

Vue3.0 使用v-slot的形式

10.组件引入

Vue2.0 引入后需要注册component

Vue3.0 引入后可以直接使用

11.组件传值

Vue2.0 props 和 $emit

Vue3.0 defineProps 和 defineEmits

后期会再有更新补充！