建站
咨詢
售后
建站咨詢
新聞中心
本文轉(zhuǎn)載自微信公眾號「三分鐘學(xué)前端」，作者sisterAn。轉(zhuǎn)載本文請聯(lián)系三分鐘學(xué)前端公眾號。
在峽江等地區(qū)，都構(gòu)建了全面的區(qū)域性戰(zhàn)略布局，加強發(fā)展的系統(tǒng)性、市場前瞻性、產(chǎn)品創(chuàng)新能力，以專注、極致的服務(wù)理念，為客戶提供網(wǎng)站設(shè)計、網(wǎng)站制作 網(wǎng)站設(shè)計制作定制網(wǎng)站制作,公司網(wǎng)站建設(shè),企業(yè)網(wǎng)站建設(shè),成都品牌網(wǎng)站建設(shè),營銷型網(wǎng)站,成都外貿(mào)網(wǎng)站建設(shè),峽江網(wǎng)站建設(shè)費用合理。
監(jiān)聽一個變量的變化，當(dāng)變量變化時執(zhí)行某些操作，這類似現(xiàn)在流行的前端框架(例如 React、Vue等)中的數(shù)據(jù)綁定功能，在數(shù)據(jù)更新時自動更新 DOM 渲染，那么如何實現(xiàn)數(shù)據(jù)綁定喃?
本文給出兩種思路：
- ES5 的 Object.defineProperty
- ES6 的 Proxy
ES5 的 Object.defineProperty
Object.defineProperty() 方法會直接在一個對象上定義一個新屬性，或者修改一個對象的現(xiàn)有屬性，并返回此對象
——MDN
- Object.defineProperty(obj, prop, descriptor)
其中：
- obj ：要定義屬性的對象
- prop ：要定義或修改的屬性的名稱或 Symbol
- descriptor ：要定義或修改的屬性描述符
- var user = {
- name: 'sisterAn'
- }
- Object.defineProperty(user, 'name', {
- enumerable: true,
- configurable:true,
- set: function(newVal) {
- this._name = newVal
- console.log('set: ' + this._name)
- },
- get: function() {
- console.log('get: ' + this._name)
- return this._name
- }
- })
- user.name = 'an' // set: an
- console.log(user.name) // get: an
如果是完整的對變量的每一個子屬性進行監(jiān)聽：
- // 監(jiān)視對象
- function observe(obj) {
- // 遍歷對象，使用 get/set 重新定義對象的每個屬性值
- Object.keys(obj).map(key => {
- defineReactive(obj, key, obj[key])
- })
- }
- function defineReactive(obj, k, v) {
- // 遞歸子屬性
- if (typeof(v) === 'object') observe(v)
- // 重定義 get/set
- Object.defineProperty(obj, k, {
- enumerable: true,
- configurable: true,
- get: function reactiveGetter() {
- console.log('get: ' + v)
- return v
- },
- // 重新設(shè)置值時，觸發(fā)收集器的通知機制
- set: function reactiveSetter(newV) {
- console.log('set: ' + newV)
- v = newV
- },
- })
- }
- let data = {a: 1}
- // 監(jiān)視對象
- observe(data)
- data.a // get: 1
- data.a = 2 // set: 2
通過 map 遍歷，通過深度遞歸監(jiān)聽子子屬性
注意， Object.defineProperty 擁有以下缺陷：
- IE8 及更低版本 IE 是不支持的
- 無法檢測到對象屬性的新增或刪除
- 如果修改數(shù)組的 length ( Object.defineProperty 不能監(jiān)聽數(shù)組的長度)，以及數(shù)組的 push 等變異方法是無法觸發(fā) setter 的
對此，我們看一下 vue2.x 是如何解決這塊的?
vue2.x 中如何監(jiān)測數(shù)組變化
使用了函數(shù)劫持的方式，重寫了數(shù)組的方法，Vue 將 data 中的數(shù)組進行了原型鏈重寫，指向了自己定義的數(shù)組原型方法。這樣當(dāng)調(diào)用數(shù)組 api 時，可以通知依賴更新。如果數(shù)組中包含著引用類型，會對數(shù)組中的引用類型再次遞歸遍歷進行監(jiān)控。這樣就實現(xiàn)了監(jiān)測數(shù)組變化。
對于數(shù)組而言，Vue 內(nèi)部重寫了以下函數(shù)實現(xiàn)派發(fā)更新
- // 獲得數(shù)組原型
- const arrayProto = Array.prototype
- export const arrayMethods = Object.create(arrayProto)
- // 重寫以下函數(shù)
- const methodsToPatch = [
- 'push',
- 'pop',
- 'shift',
- 'unshift',
- 'splice',
- 'sort',
- 'reverse'
- ]
- methodsToPatch.forEach(function (method) {
- // 緩存原生函數(shù)
- const original = arrayProto[method]
- // 重寫函數(shù)
- def(arrayMethods, method, function mutator (...args) {
- // 先調(diào)用原生函數(shù)獲得結(jié)果
- const result = original.apply(this, args)
- const ob = this.__ob__
- let inserted
- // 調(diào)用以下幾個函數(shù)時，監(jiān)聽新數(shù)據(jù)
- switch (method) {
- case 'push':
- case 'unshift':
- inserted = args
- break
- case 'splice':
- inserted = args.slice(2)
- break
- }
- if (inserted) ob.observeArray(inserted)
- // 手動派發(fā)更新
- ob.dep.notify()
- return result
- })
- })
vue2.x 怎么解決給對象新增屬性不會觸發(fā)組件重新渲染的問題
受現(xiàn)代 JavaScript 的限制 ( Object.observe 已被廢棄)，Vue 無法檢測到對象屬性的添加或刪除。
由于 Vue 會在初始化實例時對屬性執(zhí)行 getter/setter 轉(zhuǎn)化，所以屬性必須在 data 對象上存在才能讓 Vue 將它轉(zhuǎn)換為響應(yīng)式的。
對于已經(jīng)創(chuàng)建的實例，Vue 不允許動態(tài)添加根級別的響應(yīng)式屬性。但是，可以使用 Vue.set(object, propertyName, value) 方法向嵌套對象添加響應(yīng)式屬性。
vm.$set()實現(xiàn)原理
- export function set(target: Array
| Object, key: any, val: any): any { - // target 為數(shù)組
- if (Array.isArray(target) && isValidArrayIndex(key)) {
- // 修改數(shù)組的長度, 避免索引>數(shù)組長度導(dǎo)致 splice() 執(zhí)行有誤
- target.length = Math.max(target.length, key);
- // 利用數(shù)組的 splice 方法觸發(fā)響應(yīng)式
- target.splice(key, 1, val);
- return val;
- }
- // target 為對象, key 在 target 或者 target.prototype 上 且必須不能在 Object.prototype 上,直接賦值
- if (key in target && !(key in Object.prototype)) {
- target[key] = val;
- return val;
- }
- // 以上都不成立, 即開始給 target 創(chuàng)建一個全新的屬性
- // 獲取 Observer 實例
- const ob = (target: any).__ob__;
- // target 本身就不是響應(yīng)式數(shù)據(jù), 直接賦值
- if (!ob) {
- target[key] = val;
- return val;
- }
- // 進行響應(yīng)式處理
- defineReactive(ob.value, key, val);
- ob.dep.notify();
- return val;
- }
- 如果目標是數(shù)組,使用 vue 實現(xiàn)的變異方法 splice 實現(xiàn)響應(yīng)式
- 如果目標是對象,判斷屬性存在,即為響應(yīng)式,直接賦值
- 如果 target 本身就不是響應(yīng)式,直接賦值
- 如果屬性不是響應(yīng)式,則調(diào)用 defineReactive 方法進行響應(yīng)式處理
ES6 的 Proxy
眾所周知，尤大大的 vue3.0 版本用 Proxy 代替了defineProperty 來實現(xiàn)數(shù)據(jù)綁定，因為 Proxy 可以直接監(jiān)聽對象和數(shù)組的變化，并且有多達 13 種攔截方法。并且作為新標準將受到瀏覽器廠商重點持續(xù)的性能優(yōu)化。
Proxy
Proxy 對象用于創(chuàng)建一個對象的代理，從而實現(xiàn)基本操作的攔截和自定義(如屬性查找、賦值、枚舉、函數(shù)調(diào)用等)
— MDN
- const p = new Proxy(target, handler)
其中：
- target ：要使用 Proxy 包裝的目標對象(可以是任何類型的對象，包括原生數(shù)組，函數(shù)，甚至另一個代理)
- handler ：一個通常以函數(shù)作為屬性的對象，各屬性中的函數(shù)分別定義了在執(zhí)行各種操作時代理 p 的行為
- var handler = {
- get: function(target, name){
- return name in target ? target[name] : 'no prop!'
- },
- set: function(target, prop, value, receiver) {
- target[prop] = value;
- console.log('property set: ' + prop + ' = ' + value);
- return true;
- }
- };
- var user = new Proxy({}, handler)
- user.name = 'an' // property set: name = an
- console.log(user.name) // an
- console.log(user.age) // no prop!
上面提到過 Proxy 總共提供了 13 種攔截行為，分別是：
- getPrototypeOf / setPrototypeOf
- isExtensible / preventExtensions
- ownKeys / getOwnPropertyDescriptor
- defineProperty / deleteProperty
- get / set / has
- apply / construct
感興趣的可以查看 MDN ，一一嘗試一下，這里不再贅述
另外考慮兩個問題：
- Proxy只會代理對象的第一層，那么又是怎樣處理這個問題的呢?
- 監(jiān)測數(shù)組的時候可能觸發(fā)多次get/set，那么如何防止觸發(fā)多次呢(因為獲取push和修改length的時候也會觸發(fā))
Vue3 Proxy
對于第一個問題，我們可以判斷當(dāng)前 Reflect.get 的返回值是否為 Object ，如果是則再通過 reactive 方法做代理， 這樣就實現(xiàn)了深度觀測。
對于第二個問題，我們可以判斷是否是 hasOwProperty
下面我們自己寫個案例，通過proxy 自定義獲取、增加、刪除等行為
- const toProxy = new WeakMap(); // 存放被代理過的對象
- const toRaw = new WeakMap(); // 存放已經(jīng)代理過的對象
- function reactive(target) {
- // 創(chuàng)建響應(yīng)式對象
- return createReactiveObject(target);
- }
- function isObject(target) {
- return typeof target === "object" && target !== null;
- }
- function hasOwn(target,key){
- return target.hasOwnProperty(key);
- }
- function createReactiveObject(target) {
- if (!isObject(target)) {
- return target;
- }
- let observed = toProxy.get(target);
- if(observed){ // 判斷是否被代理過
- return observed;
- }
- if(toRaw.has(target)){ // 判斷是否要重復(fù)代理
- return target;
- }
- const handlers = {
- get(target, key, receiver) {
- let res = Reflect.get(target, key, receiver);
- track(target,'get',key); // 依賴收集==
- return isObject(res)
- ?reactive(res):res;
- },
- set(target, key, value, receiver) {
- let oldValue = target[key];
- let hadKey = hasOwn(target,key);
- let result = Reflect.set(target, key, value, receiver);
- if(!hadKey){
- trigger(target,'add',key); // 觸發(fā)添加
- }else if(oldValue !== value){
- trigger(target,'set',key); // 觸發(fā)修改
- }
- return result;
- },
- deleteProperty(target, key) {
- console.log("刪除");
- const result = Reflect.deleteProperty(target, key);
- return result;
- }
- };
- // 開始代理
- observed = new Proxy(target, handlers);
- toProxy.set(target,observed);
- toRaw.set(observed,target); // 做映射表
- return observed;
- }
總結(jié)
Proxy 相比于 defineProperty 的優(yōu)勢：
基于 Proxy 和 Reflect ，可以原生監(jiān)聽數(shù)組，可以監(jiān)聽對象屬性的添加和刪除
不需要深度遍歷監(jiān)聽：判斷當(dāng)前 Reflect.get 的返回值是否為 Object ，如果是則再通過 reactive 方法做代理， 這樣就實現(xiàn)了深度觀測
只在 getter 時才對對象的下一層進行劫持(優(yōu)化了性能)
所以，建議使用 Proxy 監(jiān)測變量變化
參考
MDN
帶你了解 vue-next(Vue 3.0)之 爐火純青
文章名稱：監(jiān)聽一個變量的變化，需要怎么做
新聞來源：http://www.dlmjj.cn/article/djopeid.html
