赣州市规划建设局网站改,视频直播网站,app推广活动策划方案,建网站一般用什么工具前几天#xff0c;回顾整理下关于vue2.0的响应式原理。温故而知新么#xff0c;那么今天#xff0c;整理了一下关于vue3.0的响应式原理#xff0c;利用 JavaScript 来写的。本着尽可能的清晰易懂的原则#xff0c;所以#xff0c;可能会分几篇文章来发布。那现在开始上菜…前几天回顾整理下关于vue2.0的响应式原理。温故而知新么那么今天整理了一下关于vue3.0的响应式原理利用 JavaScript 来写的。本着尽可能的清晰易懂的原则所以可能会分几篇文章来发布。那现在开始上菜。盘它敲黑板面试必问你觉得vue2.0 和vue3.0 的区别或者说你觉得vue3.0比vue2.0好在哪儿 如果你只说 vue2.0 是基于Object.definePropery, vue3.0是基于Es6的proxy来架构的仅此而已的话那显然是不够的。首先我们说vue2.0 有哪些缺点或者说不足吧递归大量的递归如果数据嵌套层级过多会特别的消耗内存资源性能不好更改数组改变数组的长度是无效的对象不存在的属性是不能被拦截的Vue3.0 手撸版开撸首先来说我们要知道vue3.0的响应式数据是怎么搞的!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleVue3 原理/title
/head
bodyscript srcvue.global.js/scriptscript let proxy Vue.reactive({name: bryant});// 副作用 Vue.effect 默认会先执行一次,先打印出 bryant,而后 proxy.name 的值发生改变,则会在执行一次 打印出 wzyVue.effect(() {console.log(proxy.name)})proxy.name wzyproxy.name yolin/script
/body
/html是代码中的这个 Vue.reactive({name: bryant})这个api 是吧那么我们创建一个js文件定义一个这样的函数// 1.响应式的核心方法function reactive(target) {// 创建响应式对象return createReactiveObject(target)
};
// 2. 创建响应式对象
function createReactiveObject (target) {if(!isObject(target)){return target; // 判断如果不是对象那就直接把他返回出去;};// 创建一个观察者, 此处是vue3的核心了不在使用object.defineProperty 而是是用来自ES6的 proxy;// baseHandle 对象中就存放一些拦截的函数了比如get set方法等;let baseHandle {// 形参中的target 值得是原对象,指的是下面定义的 let data {name: wzy};,key 指的是你要获取的某个属性// receiver 指的是下面的proxy, 也就是data 被代理后的对象get(target,key, receiver) {console.log(获取);// 理论上取值的话是这样的// return target[key];// 但是在vue3中 proxy 是和一个新的api结合使用的 reflect 反射let result Reflect.get(target,key,receiver);return result;},set(target,key,value,receiver) {console.log(设置);let flag Reflect.set(target,key,value,receiver); // 返回的是一个布尔类型ture false 告诉设置是否成功return flag;},deleteProperty(target,key) {console.log(删除);let res Reflect.deleteProperty(target,key);return res;}};let observer new Proxy(target, baseHandle); return observer;
};
// 3. isObject(); 该函数就是判断是不是对象function isObject(val) {return typeof val object val ! null;
};简单说一下 首先reactive函数里面return的 createdReactiveObject() 函数是创建响应式的主体首先在c函数中先判断传进来的数据是否为对象如果不是对象就return出去是对象的话则声明一个变量来接受Proxy的实例并且把这个对象传给 Proxy();如果对 Proxy 不是很了解的同学可以去读一下阮一峰老师的Es6很详细。 那么简单的说下Proxy 利用Proxy可以对所要操作的对象架设一层拦截在这个拦截中可以做一些我们想做的事情。那么它所接受的第一个参数则是要操作的目标对象数据那么第二个参数也是对象类型那么在这个对象里面则是一些关于可以捕获到的拦截的方法。比如 get set delete 等等。所以第二个参数我们创建一个baseHandle对象用来存放一些方法。 如果上述说的不是很全面欢迎大神抡锤let baseHandle {
// 那么在获取值的时候走的是这个get方法那么就涉及到传参的一个问题
// target 指的是原对象数据也就是你要操作的那个对象
// key 指的是你所要获取的这个对象的属性
// receiver 指的是被代理后的 对象get(targetkey,receiver){console.log(获取);// 理论上取值的话是这样的// return target[key];// 但是在vue3中 proxy 是和一个新的api结合使用的 reflect 反射let result Reflect.get(target,key,receiver);return result;},set() {console.log(设置);let flag Reflect.set(target,key,value,receiver); // 返回的是一个布尔类型ture false 告诉设置是否成功return flag;},deleteProperty() {console.log(删除);let res Reflect.deleteProperty(target,key);return res;}
}
let observer new Proxy(targethandle)return observer; // 改造后的响应式数据得返回出去那么下面则是一部分 测试数据let data {name: wzy};// proxy 为经过 reactive();函数处理过后的 代理对象
let proxy reactive(data);
proxy.name yolin
console.log(proxy.name)
// 删除
delete proxy.name;
console.log(proxy)
本篇文章说的不是全部vue3.0的响应式原理只是数据是一层的情况下的。咱们拆开来一步步了解会很清晰。但是看得懂不如自己手撸一遍来的实际。撸吧骚年
