Vue2和Vue3的主要区别

一、Vue响应式的底层实现不同

Vue2底层是通过es5的Object.defineProperty，使用Object.defineProperty()进行数据劫持，结合订阅发布的方式实现，有一定的局限性。

缺点：对数组更新的时候无法实现响应式，它内部有一个this.$set去实现

如果响应式定义的数据层级比较深（对象里面有对象，对象里面还有对象）它内部是 通过递归的形式去实现的

Vue3底层是通过es6的Porxy， 使用Proxy代理，使用ref或者reactive将数据转化为响应式数据，能够更好地支持动态添加属性和删除属性。

它解决了Vue2底层实现的缺点，对数组、层级比较深的对象处理都很优秀

缺点：浏览器兼容不是很好

二、生命周期有一定的区别

对于生命周期来说，Vue3整体上变化不大，只是大部分生命周期钩子名称上 + “on”，功能上是类似的。不过有一点需要注意，Vue3 在组合式API（Composition API）中使用生命周期钩子时需要先引入，而 Vue2 在选项API（Options API）中可以直接调用生命周期钩子。

Vue2------------------------------Vue3

初始化阶段：

beforeCreate ------------------ setup() 

created -------------------------- setup()

beforeMount -------------------- onBeforeMount

mounted -------------------------- onMounted 

更新阶段：

beforeUpdate ------------------ onBeforeUpdate 

updated ------------------------- onUpdated 

activated ---------------------- onActivated 

deactivated ------------------- onDeactivated

销毁阶段：

beforeDestroy ---------------- onBeforeUnmount 

destroyed ---------------------- onUnmounted 

三、支持碎片化，可以有多个根节点

Vue2 只支持一个根节点 ，在模板中如果使用多个根节点时会报错，

Vue3 支持多个根节点，也就是 fragment。即以下多根节点的写法是被允许的。

如下所示。

Vue3可以成功运行

Vue2报错 

四，模板指令

在vue2或者vue3 中v-if和v-for可以同时存在，但是

在vue2中，v-for 优先级高于 v-if;

在vue3 中，v-if 优先级高于v-for;

五、语法API不同

Vue2：选项式API，面向对象编程

Vue3：选项式API/组合式API，面向函数编程；没有this，处处皆函数

1、Options API

Options API是Vue2中的默认编写方式，通过一个包含各种选项的对象来描述组件。这些选项包括data、methods、computed、watch、生命周期钩子等属性与方法，共同处理页面逻辑。Options API的优点是简单易懂，适合小型组件的编写。

如下：

export default {

data() {

return {}

},

methods:{}，

computed:{},

watch:{},

}

可以看到Options代码编写方式，如果是组件状态，则写在data属性上，如果是方法，则写在methods属性上...

用组件的选项 (data、computed、methods、watch) 组织逻辑在大多数情况下都有效

。但是，当组件变得复杂，导致对应属性的列表也会增长，这可能会导致组件难以阅读和理解，同时也不方便后期的维护和修改。

2、Composition API

Composition API是Vue3中引入的新特性，通过一组函数来描述组件。这些函数包括setup、reactive、computed、watch等。Composition API的优点是更灵活、更可复用，适合大型组件的编写。数据和方法都定义在setup中。组件根据逻辑功能来组织的，一个功能所定义的所有API 会放在一起（实现更加的高内聚，低耦合）

Composition API中即使项目很大，功能很多，我们都能快速的定位到这个功能所用到的所有 API

如下：

export default{

//关于msg实现及功能代码部分

setup(){

const msg = ref("hihihi")

const add = () =>{

msg.value = "xixixi"

}

//关于food的实现及功能代码部分

const food = ref("食物")

const chang = () =>{

food.value = "coffee"

}


//一定要记得return出去才可以用

return{

msg,add,food,chang,

}

}}

其中在Vue3中经常使用的是setup语法糖。

如下：

<script setup>

    import {ref , reactive} from 'vue'//安需引入

    //关于food部分的实现及功能代码部分
    const food = ref("食物")
    //ref可以用简单数据类型也可以用复杂数据类型（引用数据类型（数组或者对象））
    const chang = () =>{
        food.value = "coffee"
    }

    //关于msg的实现及功能代码部分
    const msg = reactive({name:"mcx",xh:"hohih"})
    //reactive只能用复杂数据类型（引用数据类型（数组或者对象））
    const add = () =>{
        msg.name = "xxx"
        msg.xh = "hhh"
    }

</script>

3、对比

vue3在兼顾vue2的options API的同时还推出了composition API，大大增加了代码的逻辑组织和代码复用能力

Composition API在逻辑组织方面的优势

相同功能的代码编写在一块，而不像options API那样，各个功能的代码混成一块

4、注意，Options API和Composition API并不是互斥的，可以在同一个组件中同时使用。但是，建议在大型组件中使用Composition API，以提高代码的可维护性和可读性。

如下：

/*

在Vue当中,可以同时使用选项式和组合式

但是我们只会选择其中一种

*/

const {ref} = Vue;

const app = Vue.createApp({

//组合式

setup(){

//定义一个变量

const msg = ref("你好!世界")

return{

msg

}},


//选项式

data(){

return{

msg:'hello world'

}}

})

4、小结

• 在逻辑组织和逻辑复用方面，Composition API是优于Options API

• 因为Composition API几乎是函数，会有更好的类型推断。

• Composition API中见不到this的使用，减少了this指向不明的情况

• 如果是小型组件，可以继续使用Options API，也是十分友好的