茶余饭后聊聊 Vue3.0 响应式数据那些事儿

原創

政采云前端团队

2021-02-01 00:08

{"type":"doc","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"Vue3.0 为了达到更快、更小、更易于维护、更贴近原生、对开发者更友好的目的，在很多方面进行了重构："}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"numberedlist","attrs":{"start":null,"normalizeStart":1},"content":[{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":1,"align":null,"origin":null},"content":[{"type":"text","text":"使用 Typescript"}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":2,"align":null,"origin":null},"content":[{"type":"text","text":"放弃 class 采用 function-based API"}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":3,"align":null,"origin":null},"content":[{"type":"text","text":"重构 complier"}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":4,"align":null,"origin":null},"content":[{"type":"text","text":"重构 virtual DOM"}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":5,"align":null,"origin":null},"content":[{"type":"text","text":"新的响应式机制"}]}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"今天咱就聊聊重构后的响应式数据。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"尝鲜"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"重构后的 Vue3.0 和之前在写法上有很大的差别，早前在网络上对于 Vue3.0 这种激进式的重构方式发起了一场讨论，见仁见智。不多说先看看 Vue3.0 在写法上激进到什么程度。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"javascript"},"content":[{"type":"text","text":"\n\n\n \n Document\n <script src="%5C%22..%5C/packages%5C/vue%5C/dist%5C/vue.global.js%5C%22"><\/script>\n<\/head>\n<body>\n <div id=\"app\"><\/div>\n <script>\n const { reactive, computed, effect, createApp } = Vue\n const App = {\n template: `\n <div id=\"box\">\n <button @click=\"add\">{{ state.count }}<\/button>\n <\/div>\n `,\n setup() {\n const state = reactive({\n count: 0\n })\n function add() {\n state.count++\n }\n effect(() => {\n console.log('count改变', state.count);\n })\n return {\n state,\n add\n }\n }\n }\n createApp().mount(App, '#app')\n <\/script>\n<\/body>\n<\/html>\n"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"确实写法上和 Vue2.x 差别有点大，还整出了个 setup。不过我的第一感觉倒不是写法上的差异，毕竟写过 React，这种写法也没啥特别的。关键是这种响应式数据的写法好像在哪里见过有没有？写过 React 项目的人可能一眼就能看出来，没错就是它 mobx，一种 React 的响应式状态管理插件"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"javascript"},"content":[{"type":"text","text":"import {observable,computed,autorun} from\"mobx\"\nvar numbers = observable([1,2,3]);\nvar sum = computed(() => numbers.reduce((a, b) => a + b, 0));\n\nvar disposer = autorun(() =>console.log(sum.get()));\n\/\/ 输出 '6'\nnumbers.push(4);\n\/\/ 输出 '10'\nnumbers.push(5);\n"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"再看看 Vue3.0 暴露的这几个和响应式数据相关的方法："}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"numberedlist","attrs":{"start":1,"normalizeStart":1},"content":[{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":1,"align":null,"origin":null},"content":[{"type":"text","text":"reactive(value)"}]}]}]},{"type":"paragraph","attrs":{"indent":1,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"创建可观察的变量，参数可以是 JS 原始类型、引用、纯对象、类实例、数组、集合（Map|Set）。"}]},{"type":"numberedlist","attrs":{"start":1,"normalizeStart":2},"content":[{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":2,"align":null,"origin":null},"content":[{"type":"text","text":"effect(fn)"}]}]}]},{"type":"paragraph","attrs":{"indent":1,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"effect 意思是副作用,此方法默认会先执行一次。如果 fn 中有依赖的可观察属性变化时，会再次触发此回调函数"}]},{"type":"numberedlist","attrs":{"start":1,"normalizeStart":3},"content":[{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":3,"align":null,"origin":null},"content":[{"type":"text","text":"computed(()=>expression)"}]}]}]},{"type":"paragraph","attrs":{"indent":1,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"创建一个计算值，"},{"type":"codeinline","content":[{"type":"text","text":"computed"}]},{"type":"text","text":" 实现也是基于 "},{"type":"codeinline","content":[{"type":"text","text":"effect"}]},{"type":"text","text":" 来实现的，特点是 "},{"type":"codeinline","content":[{"type":"text","text":"computed"}]},{"type":"text","text":" 中的函数不会立即执行，多次取值是有缓存机制的，"},{"type":"codeinline","content":[{"type":"text","text":"expression"}]},{"type":"text","text":" 不应该有任何副作用，而仅仅是返回一个值。当这个 "},{"type":"codeinline","content":[{"type":"text","text":"expression"}]},{"type":"text","text":" 依赖的可观察属性变化时，这个表达式会重新计算。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"和 mobx 有异曲同工之妙。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"Vue3.0 把创建响应式对象从组件实例初始化中抽离了出来，通过暴露 API 的方式将响应式对象创建的权利交给开发者，开发者可以自由的决定何时何地创建响应式对象，就冲这点 Vue3.0 我先粉了。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"重构后的响应式机制带来了哪些改变？"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"每一个大版本的发布都意味着新功能、新特性的出现，那么重构后的响应式数据部分相比 3.0 之前的版本有了哪些方面的改变呢？下面听我娓娓道来："}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"对数组的全面监听"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"Vue2.x 中被大家吐槽的最多的一点就是针对数组只实现了 "},{"type":"codeinline","content":[{"type":"text","text":"push,pop,shift,unshift,splice,sort,reverse'"}]},{"type":"text","text":" 这七个方法的监听，以前通过数组下标改变值的时候，是不能触发视图更新的。这里插一个题外话，很多人认为 Vue2.x 中数组不能实现全方位监听是 Object.defineProperty 不能监听数组下标的改变，这可就冤枉人家了，人家也能侦听数组下标变化的好吗，不信你看"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"javascript"},"content":[{"type":"text","text":"const arr = [\"2019\",\"云\",\"栖\",\"音\",\"乐\",\"节\"];\narr.forEach((val,index)=>{\n Object.defineProperty(arr,index,{\n set(newVal){\n console.log(\"赋值\");\n },\n get(){\n console.log(\"取值\");\n return val;\n }\n })\n})\nlet index = arr[1];\n\/\/取值\narr[0] = \"2050\";\n\/\/赋值\n"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"没毛病，一切变化都在人家的掌握中。上面这段代码，有没有人没看懂，我假装你们都不懂，贴张图"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/infoq\/49\/497760f46cfd83694917c122d94b8f19.webp","alt":"Image","title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"从数组的数据结构来看，数组也是一个 Key-Value 的键值对集合，只是 Key 是数字罢了，自然也可以通过 Object.defineProperty 来实现数组的下标访问和赋值拦截了。其实 Vue2.x 没有实现数组的全方位监听主要有两方面原因："}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"numberedlist","attrs":{"start":null,"normalizeStart":1},"content":[{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":1,"align":null,"origin":null},"content":[{"type":"text","text":"数组和普通对象相比，JS 数组太\"多变\"了。比如："},{"type":"codeinline","content":[{"type":"text","text":"arr.length=0"}]},{"type":"text","text":"，可以瞬间清空一个数组；"},{"type":"codeinline","content":[{"type":"text","text":"arr[100]=1"}]},{"type":"text","text":"又可以瞬间将一个数组的长度变为 100（其他位置用空元素填充），等等骚操作。对于一个普通对象，我们一般只会改变 Key 对应的 Value 值，而不会连 key 都改变了,而数组就不一样了 Key 和 Value 都经常增加或减少，因此每次变化后我们都需要重新将整个数组的所有key递归的使用 Object.defineProperty 加上 setter 和 getter，同时我们还要穷举每一种数组变化的可能，这样势必就会带来性能开销问题，有的人会觉得这点性能开销算个 x 呀，但是性能问题都是由小变大的，如果数组中存的数据量大而且操作频繁时，这就会是一个大问题。React16.x 在就因为在优化 textNode 的时候，移除了无意义的 span 标签，性能据说都提升了多少个百分点，所以性能问题不可小看。"}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":2,"align":null,"origin":null},"content":[{"type":"text","text":"数组在应用中经常会被操作，但是通常 "},{"type":"codeinline","content":[{"type":"text","text":"push,pop,shift,unshift,splice,sort,reverse"}]},{"type":"text","text":" 这 7 种操作就能达到目的。因此，出于性能方面的考虑 Vue2.x 做出了一定的取舍。"}]}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"那么 Vue3.0 怎么又走回头路去实现了数组的全面监听了呢？答案就是 Proxy 和 Reflet 这一对原生 CP 的出现，Vue3.0 使用 Proxy 作为响应式数据实现的核心，用 Proxy 返回一个代理对象，通过代理对象来收集依赖和触发更新。大概的原理像这段代码一样："}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"javascript"},"content":[{"type":"text","text":"const arr = [\"2019\",\"云\",\"栖\",\"音\",\"乐\",\"节\"];\nlet ProxyArray = newProxy(arr,{\n get:function(target, name, value, receiver) {\n console.log(\"取值\")\n returnReflect.get(target,name);\n },\n set: function(target, name, value, receiver) {\n console.log(\"赋值\")\n Reflect.set(target,name, value, receiver);;\n }\n })\n const index = ProxyArray[0];\n \/\/取值\n ProxyArray[0]=\"2050\"\n \/\/赋值\n"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"效果和 Object.defineProperty 一样一样的，又显得清新脱俗有没有？而且 Proxy 只要是对象都能代理，后面还会提到。当然 Vue3.0 是虽然有了新欢，但也没忘记旧爱，对于在之前版本中数组的几种方法的监听还是照样支持的。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"惰性监听"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong"}],"text":"什么是\"惰性监听\"?"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"简单讲就是\"偷懒\"，开发者可以选择性的生成可观察对象。在平时的开发中常有这样的场景，一些页面上的数据在页面的整个生命周期中是不会变化的，这时这部分数据不需要具备响应式能力，这在 Vue3.0 以前是没有选择余地的，所有在模板中使用到的数据都需要在 data 中定义，组件实例在初始化的时候会将 data 整个对象变为可观察对象。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong"}],"text":"惰性监听有什么好处？"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"numberedlist","attrs":{"start":null,"normalizeStart":1},"content":[{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":1,"align":null,"origin":null},"content":[{"type":"text","text":"提高了组件实例初始化速度"}]},{"type":"paragraph","attrs":{"indent":0,"number":2,"align":null,"origin":null},"content":[{"type":"text","text":"Vue3.0 以前组件实例在初始化的时候会将 data 整个对象变为可观察对象，通过递归的方式给每个 Key 使用 Object.defineProperty 加上 getter 和 settter，如果是数组就重写代理数组对象的七个方法。而在 Vue3.0 中，将可响应式对象创建的权利交给了开发者，开发者可以通过暴露的 reactive, compted, effect 方法自定义自己需要响应式能力的数据，实例在初始化时不需要再去递归 data 对象了，从而降低了组件实例化的时间。"}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":3,"align":null,"origin":null},"content":[{"type":"text","text":"降低了运行内存的使用"}]},{"type":"paragraph","attrs":{"indent":0,"number":4,"align":null,"origin":null},"content":[{"type":"text","text":"Vue3.0 以前生成响应式对象会对对象进行深度遍历，同时为每个 Key 生成一个 def 对象用来保存 Key 的所有依赖项，当 Key 对应的 Value 变化的时候通知依赖项进行 update。但如果这些依赖项在页面整个生命周期内不需要更新的时候，这时 def 对象收集的依赖项不仅没用而且还会占用内存，如果可以在初始化 data 的时候忽略掉这些不会变化的值就好了。Vue3.0 通过暴露的 reactive 方法，开发者可以选择性的创建可观察对象，达到减少依赖项的保存，降低了运行内存的使用。"}]}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"Map、Set、WeakSet、WeakMap的监听"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"前面提到 Proxy 可以代理所有的对象，立马联想到了 ES6 里面新增的集合 Map、Set，聚合类型的支持得益于 Proxy 和 Reflect。讲真的这之前还真不知道 Proxy 这么刚啥都能代理，二话不说直接动手用 Proxy 代理了一个 map 试试水"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"javascript"},"content":[{"type":"text","text":"let map = newMap([[\"name\",\"zhengcaiyun\"]])\nlet mapProxy = newProxy(map, {\n get(target, key, receiver) {\n console.log(\"取值:\",key)\n returnReflect.get(target, key, receiver)\n }\n})\nmapProxy.get(\"name\")\n"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"Uncaught TypeError: Method Map.prototype.get called on incompatible receiver [object Object]"}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"一盆凉水泼来，报错了。原来 "},{"type":"codeinline","content":[{"type":"text","text":"Map、Set"}]},{"type":"text","text":" 对象赋值、取值和他们内部的 this 指向有关系，但这里的 this 指向的是其实是 Proxy 对象，所以得这样干"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"javascript"},"content":[{"type":"text","text":"let map = newMap([['name','wangyangyang']])\nlet mapProxy = newProxy(map, {\n get(target, key, receiver) {\n var value = Reflect.get(...arguments)\n console.log(\"取值:\",...arguments)\n returntypeof value == 'function' ? value.bind(target) : value\n }\n})\nmapProxy.get(\"name\")\n"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"当获取的是一个函数的时候，通过作用域绑定的方式将原对象绑定到 "},{"type":"codeinline","content":[{"type":"text","text":"Map、Set"}]},{"type":"text","text":" 对象上就好了。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong"}],"text":"Vue3.0 是如何实现集合类型数据监听的？"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"眼尖的同学看完上面这段代码会发现一个问题，集合是没有 set 方法，集合赋值用的是 add 操作,那咋办呢？来看看那么 Vue3.0 是怎么处理的，上一段简化后的源码"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"javascript"},"content":[{"type":"text","text":"function reactive(target: object) {\n return createReactiveObject(\n target,\n rawToReactive,\n reactiveToRaw,\n mutableHandlers,\n mutableCollectionHandlers\n )\n}\n\nfunction createReactiveObject(\n target: any,\n toProxy: WeakMap<any, any>,\n toRaw: WeakMap<any, any>,\n baseHandlers: ProxyHandler<any>,\n collectionHandlers: ProxyHandler<any>\n) {\n \/\/collectionTypes = new Set<Function>([Set, Map, WeakMap, WeakSet])\n const handlers = collectionTypes.has(target.constructor)\n ? collectionHandlers\n : baseHandlers\n \/\/生成代理对象\n observed = newProxy(target, handlers)\n toProxy.set(target, observed)\n toRaw.set(observed, target)\n if (!targetMap.has(target)) {\n targetMap.set(target, newMap())\n }\n return observed\n}\n"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"根据 target 类型适配不同的 handler，如果是集合（"},{"type":"codeinline","content":[{"type":"text","text":"Map、Set"}]},{"type":"text","text":"）就使用 collectionHandlers，是其他类型就使用 baseHandlers。接下来看看 collectionHandlers"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"javascript"},"content":[{"type":"text","text":"export const mutableCollectionHandlers: ProxyHandler<any> = {\n get: createInstrumentationGetter(mutableInstrumentations)\n}\nexport const readonlyCollectionHandlers: ProxyHandler<any> = {\n get: createInstrumentationGetter(readonlyInstrumentations)\n}\n"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"没有意外只有 get，骚就骚在这儿:"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"javascript"},"content":[{"type":"text","text":"\/\/ 可变数据插桩对象，以及一系列相应的插桩方法\nconst mutableInstrumentations: any = {\n get(key: any) {\n returnget(this, key, toReactive)\n },\n get size() {\n return size(this)\n },\n has,\n add,\n set,\n delete: deleteEntry,\n clear,\n forEach: createForEach(false)\n}\n\/\/ 迭代器相关的方法\nconst iteratorMethods = ['keys', 'values', 'entries', Symbol.iterator]\niteratorMethods.forEach(method => {\n mutableInstrumentations[method] = createIterableMethod(method, false)\n readonlyInstrumentations[method] = createIterableMethod(method, true)\n})\n\/\/ 创建getter的函数\nfunction createInstrumentationGetter(instrumentations: any) {\n returnfunction getInstrumented(\n target: any,\n key: string | symbol,\n receiver: any\n ) {\n target =\n hasOwn(instrumentations, key) && key in target ? instrumentations : target\n returnReflect.get(target, key, receiver)\n }\n}\n"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"由于 Proxy 的 traps 跟 "},{"type":"codeinline","content":[{"type":"text","text":"Map|Set"}]},{"type":"text","text":" 集合的原生方法不一致，因此无法通过 Proxy 劫持 set，所以作者在在这里进行了\"偷梁换柱\"，这里新创建了一个和集合对象具有相同属性和方法的普通对象，在集合对象 get 操作时将 target 对象换成新创建的普通对象。这样，当调用 get 操作时 Reflect 反射到这个新对象上，当调用 set 方法时就直接调用新对象上可以触发响应的方法，是不是很巧妙？所以多看源码好处多多，可以多学学人家的骚操作。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"IE 怎么办？"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"这是个实在不想提但又绕不开的话题，IE 在前端开发者眼里和魔鬼没什么区别。在 Vue3.0 之前，响应式数据的实现是依赖 ES5 的 Object.defineProperty，因此只要支持 ES5 的浏览器都支持 Vue，也就是说 Vue2.x 能支持到 IE9。Vue3.0 依赖的是 Proxy 和 Reflect 这一对出生新时代的 CP，且无法被转译成 ES5，或者通过 Polyfill 提供兼容，这就尴尬了。开发者技术前线获悉的信息，官方在发布最终版本之前会做到兼容 IE11，至于更低版本的 IE 那就只有送上一曲凉凉了。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"其实也不用太纠结 IE 的问题，因为连微软自己都已经放弃治疗 IE 拥抱 Chromium 了，我们又何必纠结呢？"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"结语"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"在使用开源框架时不要忘了，我们之所以能免费试用他，靠的维护者投入的大量精力。希望我们多去发现它带来的优点和作者想通过它传递的编程思想。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"horizontalrule"},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"头图：Unsplash"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"作者：赤墨"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"原文：https:\/\/mp.weixin.qq.com\/s\/vxUHy3Az58T_4MrSz0PR1Q"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"原文：茶余饭后聊聊 Vue3.0 响应式数据那些事儿"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"来源：政采云前端团队 - 微信公众号 [ID：Zoo-Team]"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"转载：著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。"}]}]}</script>

發表評論

所有評論

還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.

相關文章

三十分钟入门基础Go（Java小子版）

前言 Go語言定義 Go（又稱 Golang）是 Google 的 Robert Griesemer，Rob Pike 及 Ken Thompson 開發的一種靜態、強類型、編譯型語言。Go 語言語法與 C 相近，但功能上有：內存安

2024-04-25 23:17:43

数据结构笔记浅记（十三）哈希表

「哈希表 hash table」，又稱「散列表」，它通過建立鍵 key 與值 value 之間的映射，實現高效的元素查詢。具體而言，我們向哈希表中輸入一個鍵 key ，則可以在 𝑂(1) 時間內獲取對應的值 value 。從本質上看，哈

2024-04-24 23:39:16

数组和链表的适用场景

簡介在計算機中要對給定的數據集進行若干處理，首要任務是把數據集的一部分（當數據量非常大時，可能只能一部分一部分地讀取數據到內存中來處理）或全部存儲到內存中，然後再對內存中的數據進行各種處理。例如，對於數據集 S{1，2，3，4，5，6

2024-04-24 09:31:34

下载量超 200 万，最近频繁登上热搜的 AI 程序员，大家怎么看

人狠話不多，會熟練使用 200 多種編程語言，寫得了代碼，做得了測試，7 天 24 小時隨叫隨到…… 硅基程序員通義靈碼首次入職阿里雲，有網友說：終於不穿格子衫了！還有網友說：這簡歷，作爲一個 HR 我很難不心動！人狠話不多的通義靈碼，

2024-04-22 21:12:06

基于信息安全的软测工具链解决方案

伴隨着汽車與外界的交互手段不斷豐富，車聯網相關設備、系統間的數據交互更加頻繁，萬物互聯下的網絡攻擊也逐漸滲透延伸到車聯網的領域。汽車行業面臨着重大的信息安全挑戰。此外，UNECE WP.29 R155和ISO/SAE 21434

2024-04-18 22:43:26

初探Java编程——开启你的编程之旅

標題：初探Java編程——開啓你的編程之旅摘要：本文主要介紹了Java編程語言的基本概念、特點以及如何搭建Java開發環境。通過簡單的實例，讓讀者初步瞭解Java編程，爲其後續學習打下基礎。一、Java概述 Java是一種面

2024-04-17 00:39:23

五一假期畅游指南：Python技术构建的热门景点分析系统解读

導言五一假期即將到來，作爲一名熱愛旅遊的技術達人，我總是希望能夠通過技術手段更好地規劃我的旅行路線。在這篇文章中，我將向大家介紹一款基於Python技術的熱門景點分析系統，幫助您在五一假期中游玩得更加盡興！ 1. 系統概述熱門景點

2024-04-16 23:25:46

Hugging Face推出全新代码大模型：支持80+编程语言，集成VSCode

隨着人工智能技術的不斷髮展，代碼大模型成爲了近年來備受矚目的技術熱點。作爲自然語言處理領域的領軍企業，Hugging Face近日推出了一款全新的代碼大模型，該模型支持80+種編程語言，並與VSCode進行了集成，爲用戶提供了前所未有的代碼

2024-04-16 11:29:25

裁员了！别错过2024年大数据工程师必备的10项技能

在當今快速發展的世界中，數據被視爲新的石油。隨着對數據驅動洞察的日益依賴，大數據工程師的角色比以往任何時候都更爲關鍵。這些專業人員在管理和優化組織內的數據操作中扮演着至關重要的角色。在本文中，我們將探索2024年大數據工程師必須具備的十

2024-04-16 11:00:53

实现“代码可视化”需要了解的前置知识-编译器前端

1. 前言 “代碼可視化”的概念定義和業界案例在前文中已經進行了講述，綜述可閱讀淺析“代碼可視化”，更多相關知識可查看專欄“代碼可視化”。本文梳理了“代碼可視化”功能開發需要前置瞭解的編譯器前端部分知識，因能力有限若有解釋不清和錯誤的地方

2024-04-12 23:16:44

智能Java开发工具IntelliJ IDEA v2024.1震撼发布——让开发工作更简单！

IntelliJ IDEA，是java編程語言開發的集成環境。IntelliJ在業界被公認爲最好的java開發工具，尤其在智能代碼助手、代碼自動提示、重構、JavaEE支持、各類版本工具(git、svn等)、JUnit、CVS整合、代碼分析

2024-04-12 11:33:56

数据结构笔记浅记（九）存储设备

物理結構在很大程度上決定了程序對內存和緩存的使用效率，進而影響算法程序的整體性能。由於存儲數據的需要長久保存，並且內存的價格比硬盤貴太多，因此內存無法取代硬盤。緩存的大容量和高速度難以兼得。隨着 L1、L2、L3 緩存的容量逐步增大

2024-04-08 23:38:13

京东云“智能编码”上线了！免费试用

智能編碼JoyCoder 是一款基於大語言模型、適配多種 IDE 的智能編程助手，可以爲研發人員提供代碼預測續寫、UI 草圖轉前端代碼、生成單元測試、代碼安全漏洞自動識別及修復、一鍵生成接口文檔、AI 智能問答等功能。助力開發者高效、流暢、

2024-04-02 23:16:35

Testwell CTC++10.1.0 新版持续支持ASPICE认证，软件全面升级！

Testwell CTC++是業界領先的代碼覆蓋率分析工具。該工具支持廣泛的編程語言和多種認證標準，特別是在安全關鍵領域，如航空航天、汽車、醫療設備和工業控制系統等。幫助開發和測試團隊精確測量測試過程中代碼的執行情況，有效提升軟件的可靠性

2024-04-02 21:28:37

让你的文档从静态展示到一键部署可操作验证

作者：慕扉用戶在根據文檔進行操作時，會出現根據文檔內容搭建環境困難、代碼調試失敗、功能無法使用的情況，主要是由於文檔中有年久失修、沒人維護、無法跑通的代碼，給用戶快速上手帶來很多的挑戰。爲了解決文檔中的這些用戶體驗問題，通過函數計算的能

2024-04-02 21:12:11

24小時熱門文章

最新文章

最新評論文章