arduinowifi.send怎么获取响应_Vue3.0 响应式原理（一）

前几天，回顾整理下关于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 lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Vue3 原理</title>
</head>
<body><script src="vue.global.js"></script><script>  let proxy = Vue.reactive({name: 'bryant'});// 副作用 Vue.effect 默认会先执行一次,先打印出 'bryant',而后 proxy.name 的值发生改变,则会在执行一次 打印出 'wzy'Vue.effect(()=> {console.log(proxy.name)})proxy.name = 'wzy'proxy.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(target，key,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(target，handle)；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的响应式原理，只是数据是一层的情况下的。咱们拆开来一步步了解，会很清晰。

但是看得懂不如自己手撸一遍来的实际。撸吧骚年！

arduinowifi.send怎么获取响应_Vue3.0 响应式原理（一）相关推荐

arduinowifi.send怎么获取响应_ChatterBot代码解读－获取对话
这个过程比较复制,安装处理的流程,依次进行代码解读. 在定义一个ChatBot后,可以进行对话的训练,这个过程参考: 水中的鱼:ChatterBot代码解读-训练数据zhuanlan.zhihu.c ...
matlabeig函数根据什么原理_vue3.0 源码解析二：响应式原理（下)
一回顾上文上节我们讲了数据绑定proxy原理,vue3.0用到的基本的拦截器,以及reactive入口等等.调用reactive建立响应式,首先通过判断数据类型来确定使用的hander,然后创建p ...
python构造响应头_Python爬虫库requests获取响应内容、响应状态码、响应头
首先在程序中引入Requests模块 import requests 一.获取不同类型的响应内容在发送请求后,服务器会返回一个响应内容,而且requests通常会自动解码响应内容 1.文本响应内容 ...
vue 获取响应头里set-cookie的值_最简化 VUE的响应式原理
前言前端目前两个当家花旦框架 VUE React,它们能够流行开来,响应式原理做出了巨大贡献.毕竟,它通过数据的变更就能够更新相应的视图,极大的将我们从繁琐的DOM操作中解放出来. 所以掌握它们的响 ...
data access components 2.0未响应_Vue2.x 源码剖析之响应式原理
# Study Notes 本博主会持续更新各种前端的技术,如果各位道友喜欢,可以关注.收藏.点赞下本博主的文章. Vue.js 源码剖析-响应式原理响应式处理的入口 src/core/insta ...
python request返回的响应_Python爬虫库requests获取响应内容、响应状态码、响应头...
首先在程序中引入Requests模块 import requests 一.获取不同类型的响应内容在发送请求后,服务器会返回一个响应内容,而且requests通常会自动解码响应内容 1.文本响应内容 ...
Vue2.0 —— 由设计模式切入，实现响应式原理
Vue2.0 -- 由设计模式切入,实现响应式原理 <工欲善其事,必先利其器> 既然点进来了,麻烦你看下去,希望你有不一样的收获. 大家好,我是vk,好久不见,今天我们一起来盘一盘关于 V ...
【原创】Selenium获取请求头、响应头
本文仅供学习交流使用,如侵立删! Selenium获取请求头.响应头操作环境 win10 . mac Python3.9 selenium.seleniumwire selenium是没有办法直接获 ...
vue 2.0响应式源码实践，麻麻，我再也不怕被面试官提问啦
vue2.0/vue3.0响应式源码实践,麻麻,我再也不怕被面试官提问啦写在前面 vue2.0响应式源码实现 1. 先创建一个对象 2.实现observer方法 3.接下来我们对observer函数 ...

arduinowifi.send怎么获取响应_Vue3.0 响应式原理（一）

arduinowifi.send怎么获取响应_Vue3.0 响应式原理（一）相关推荐

最新文章

热门文章

arduinowifi.send怎么获取响应_Vue3.0 响应式原理 （一）

arduinowifi.send怎么获取响应_Vue3.0 响应式原理 （一）相关推荐

最新文章

热门文章

arduinowifi.send怎么获取响应_Vue3.0 响应式原理（一）

arduinowifi.send怎么获取响应_Vue3.0 响应式原理（一）相关推荐