Vue2 Vue3 响应式原理的实现方式

最新推荐文章于 2024-09-07 10:11:54 发布

山治有个温暖的心

最新推荐文章于 2024-09-07 10:11:54 发布

阅读量152

点赞数

文章标签：前端 javascript vue.js

本文链接：https://blog.csdn.net/weixin_43502808/article/details/127800458

版权

本文深入探讨Vue2和Vue3中响应式原理的实现，从数据劫持到依赖收集，揭示了Vue如何确保视图在数据变化时自动更新。通过对Vue2的setter和Vue3的Proxy的比较，理解新一代框架对性能和开发体验的提升。

摘要由CSDN通过智能技术生成

Vue2 响应式原理的实现方式

let teacher = {
      name: "曹操",
      age: 20,
    };
    const proxyTeacher = new Proxy(teacher, {
      get(target, prop) {
        //target是数据源，props是你访问的属性名
        return target[prop];
      },
      set(target, prop, value) {
        //给数据赋值
        console.log("我会去给数据更新" + prop);
				target[prop]=value
      },
    });
		console.log(proxyTeacher.name);
		console.log(proxyTeacher.age);
		proxyTeacher.name='刘备'
		proxyTeacher.age=24
		teacher.age=100
		console.log(teacher.age);
		proxyTeacher.sex='女'
		//proxy 无论是开始有的还是后来新增的都会被进行响应式数据代理，都具有响应式，所以vue3不需要$set
		//注意 ：ref、reactive 响应式函数
		// ref(基本数据类型)=====>响应式原理依旧是 Object.defineProperty 进行响应式数据劫持处理
		//ref(对象)=====>转成使用reactive来进行处理====>Proxy 来进行响应式数据劫持处理
		//reactive(对象)===> proxy 来进行响应式数据劫持处理