Vue2和Vue3的区别-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_54049842/article/details/146334227

Vue2和Vue3的区别

Vue2和Vue3的区别

Vue2和Vue3的区别

响应式原理

Vue2: 使用 Object.defineProperty() 实现数据劫持
Vue3: 使用 Proxy 代理对象实现响应式

// Vue2 响应式实现的简单示例
class Vue2Observer {
    constructor(data) {
        this.observe(data);
    }

    observe(data) {
        if (!data || typeof data !== 'object') return;
        
        Object.keys(data).forEach(key => {
            this.defineReactive(data, key, data[key]);
        });
    }

    defineReactive(obj, key, value) {
        // 递归观察子属性
        this.observe(value);
        
        Object.defineProperty(obj, key, {
            get() {
                console.log(`获取${key}属性`);
                return value;
            },
            set(newValue) {
                if (value === newValue) return;
                console.log(`设置${key}属性为${newValue}`);
                value = newValue;
                // 触发更新...
            }
        });
    }
}

// 使用示例
const data = {
    name: 'vue2',
    age: 18
};
new Vue2Observer(data);
data.name = 'vue2-new'; // 输出：设置name属性为vue2-new
console.log(data.age);  // 输出：获取age属性 18

// Vue3 响应式实现的简单示例
class Vue3Observer {
    constructor(data) {
        return this.observe(data);
    }

    observe(data) {
        if (!data || typeof data !== 'object') return data;

        return new Proxy(data, {
            get(target, key, receiver) {
                const result = Reflect.get(target, key, receiver);
                console.log(`获取${key}属性`);
                // 如果是对象，继续代理
                return result && typeof result === 'object' 
                    ? new Vue3Observer(result) 
                    : result;
            },
            set(target, key, value, receiver) {
                console.log(`设置${key}属性为${value}`);
                return Reflect.set(target, key, value, receiver);
            },
            deleteProperty(target, key) {
                console.log(`删除${key}属性`);
                return Reflect.deleteProperty(target, key);
            }
        });
    }
}

// 使用示例
const data = new Vue3Observer({
    name: 'vue3',
    age: 18,
    info: {
        address: 'beijing'
    }
});

data.name = 'vue3-new';     // 输出：设置name属性为vue3-new
console.log(data.age);      // 输出：获取age属性 18
data.newProp = 'new';      // 输出：设置newProp属性为new
delete data.age;           // 输出：删除age属性
console.log(data.info.address); // 输出：获取address属性

组合式api

Vue2: Options API
通过 data、methods、computed 等选项组织代码，当组件变得复杂时，同一个功能的代码被分散到不同选项中
Vue3: Composition API
可以将相关联的代码组合在一起，更好的代码复用性，更灵活的逻辑组织方式
下面是简单的计数器示例

// Vue2 计数器组件
export default {
  data() {
    return {
      count: 0,
      message: 'Hello Vue2'
    }
  },
  
  computed: {
    doubleCount() {
      return this.count * 2
    }
  },
  
  methods: {
    increment() {
      this.count++
    },
    
    decrement() {
      this.count--
    }
  }
}

// Vue3 计数器组件
<script setup>
import { ref, computed } from 'vue'

// 响应式状态
const count = ref(0)
const message = ref('Hello Vue3')

// 计算属性
const doubleCount = computed(() => count.value * 2)

// 方法
const increment = () => {
  count.value++
}

const decrement = () => {
  count.value--
}
</script>

diff算法不同

vue2
遍历每一个虚拟节点，进行虚拟节点对比，并返回一个patch对象，用来存储两个节点不同的地方。用patch记录的消息去更新dom
缺点：比较每一个节点，而对于一些不参与更新的元素，进行比较是有点消耗性能的。特点：特别要提一下Vue的patch是即时的，并不是打包所有修改最后一起操作DOM，也就是在vue中边记录变更新。（React则是将更新放入队列后集中处理）。
vue3
在初始化的时候会给每一个虚拟节点添加一个patchFlags，是一种优化的标识。只会比较patchFlags发生变化的节点，进行识图更新。而对于patchFlags没有变化的元素作静态标记，在渲染的时候直接复用。

多根节点

// Vue2只能存在一个根节点，需要用一个<div>来包裹着
<template>
  <div>
    <header></header>
    <main></main>
    <footer></footer>
  </div>
</template>

// Vue3支持多个根节点
<template>
  <header></header>
  <main></main>
  <footer></footer>
</template>

生命周期

阶段	vue2	vue3	说明
创建	beforeCreate	setup	实例创建前，适合插件初始化，此时无法访问data/methods
创建	created	setup	实例创建完成，可访问data/methods，DOM未生成，适合异步请求
挂载	beforeMount	onBeforeMount	DOM挂载前，模板已编译，但尚未渲染
挂载	mounted	onMounted	DOM挂载完成，可进行DOM操作，子组件已挂载
更新	beforeUpdate	onBeforeUpdate	DOM更新前，可获取更新前的状态
更新	updated	onUpdated	DOM更新完成，数据为最新状态
销毁	beforeDestroy	onBeforeUnmount	实例销毁前，清理定时器、事件监听等
销毁	destroyed	onUnmounted	实例已销毁，所有绑定解除，子组件销毁完成