Vue2和Vue3的区别

Yxmeimei

已于 2024-09-05 20:41:13 修改

阅读量948

点赞数 19

文章标签： vue.js javascript 前端

于 2024-07-24 12:00:50 首次发布

本文链接：https://blog.csdn.net/qq_63543660/article/details/140658394

版权

1. 响应式原理

vue2采用的是Object.defineProperty为每个属性创建getter和setter，通过getter和setter来捕获数据的。

但缺点是无法监听数组或对象新增和删除的数据。办法就是使用watch进行监听。

vue3是通过Proxy来进行数据劫持的，并且可以监听数组或对象新增、删除的数据。

那什么是数据劫持呢？

数据劫持，就是数据代理。

是指在访问或者修改对象的某个属性时，通过一段代码拦截这个行为，进行额外的操作或返回修改结果。

例如使用Object.defineProperty方法来定义对象属性的访问器（getter,setter），或者使用Proxy对象来创建一个对象的代理，从而拦截和自定义基本操作。

了解Object.defineProperty()方法

主要传三个参数

Object.defineProperty(obj,prop,descriptor):

obj：定义属性的对象

prop：定义或修改属性的名称

descriptor：定义或修改的属性描述符

属性描述符有数据描述符和存取描述符。两者描述符只能存在一个，不能同时存在。

数据描述符：configurable，enumerable，value，writable

存取描述符：configurable，enumerable，get，set

get与value功能相同，set与writable功能相同

2. 生命周期

vue3和vue2的生命周期其实没什么区别，vue3在vue2的基础上在钩子前面加了“on”。

vue3没有created和beforeCreate钩子，被setup替代了，但可以直接使用。

vue2的beforeDestroy和destroyed钩子，vue3替换成onBeforeUnmount和onUnmounted钩子。

vue2和vue3的生命周期
vue2	vue3
beforeCreate	setup	组件开始创建数据实例之前
created	setup	组件实例创建完成
beforeMount	onBeforeMount	DOM挂载之前
mounted	onMounted	DOM挂载完成
beforeUpdate	onBeforeUpdate	组件更新之前
updated	onUpdated	组件更新之后
beforeDestroy	onBeforeUnmount	组件销毁之前
destroyed	onUnmounted	组件销毁之后

vue3使用钩子的时候需要先引入才能使用，vue2可以直接使用

<script setup>
    //vue3
    //需要引入
    import { onMounted } from 'vue'
    onMounted(()=>{
        
    })
    //还可以写多个
    onMounted(()=>{
        
    })
</script>

<script>
	//vue2
    export default{
        //直接使用
        mounted(){
            
        }
    }
</script>

3. vue3支持碎片化

vue2的根节点只能有一个，vue3可以有多个根节点。

4. Composition API

vue2为选项式api，需要各种选项，例如data，methods等。

vue3为组合式api，允许相关的代码逻辑放在一堆，方便管理。

<script>
//vue2
    export default {
        data(){
            return {
                id:""
            }
        },
        methods:{
            func1(){
                
            },
            func2(){
                
            }
        }
    }
</script>

<script setup>
    //vue3
const id = ""
const func1 = ()=>{
    
}
</script>