前言の前言：寫得極其不通順戈钢，只是快速做個(gè)零碎總結(jié)，后續(xù)會(huì)不斷潤色
vue2與vue3在實(shí)現(xiàn)上的區(qū)別
vue2實(shí)現(xiàn)數(shù)據(jù)劫持使用的是Object.defineProperty, Vue3使用的是Proxy
共同需要解決的問題
- 響應(yīng)式的對(duì)象
- 響應(yīng)式的數(shù)組
看看vue響應(yīng)式的表現(xiàn)
- 定義在data中的數(shù)據(jù)才是響應(yīng)式的
- 【對(duì)象】使用vm.a =1視圖不會(huì)更新择份，需要用Vue.set 或 vm.$set
- 給對(duì)象批量添加屬性O(shè)bject.assign(this.obj, { a:1, b:2})不行田度；得用this.obj=Object.assign({}, this.obj, {a:1, b:2})象颖，即加上原對(duì)象一起混入
- 【數(shù)組】arr[1] = 2不行布疙，得用Vue.set或者vm.$set
- arr.length=2改長度不行，需要用splice
- 動(dòng)態(tài)在vm.data中加入屬性是無效的辆床，必須在初始化前聲明
- Vue更新dom是異步的佳晶；只要偵聽到數(shù)據(jù)變化，Vue 將開啟一個(gè)隊(duì)列讼载，并緩沖在同一事件循環(huán)中發(fā)生的所有數(shù)據(jù)變更
在了解這些vue2的表現(xiàn)后轿秧，我們往原理層面看看中跌，到底為什么會(huì)是這樣
使用Object.defineProperty
表面上，這個(gè)Object的API Object.defineProperty 和直接使用字面量給對(duì)象賦值的效果貌似是一樣的淤刃，那么實(shí)際上他們到底有什么區(qū)別呢
（1）定義方式
// 使用Object.defineProperty給對(duì)象定義屬性
let obj = {};
// 參數(shù): 對(duì)象晒他、屬性名/Symbol、描述符（里面的叫做鍵逸贾、值）
Object.defineProperty( obj, "name", {
configurable: false, // 1.是否能刪除 2.描述符是否能修改
enumerable: false, // 是否可枚舉
value: undefined, // 值
writable: false, // 能否被賦值運(yùn)算符=賦值
get: undefined, // 訪問該屬性時(shí)調(diào)用陨仅，傳入this，返回結(jié)果用作屬性值
set: undefined // 修改屬性值時(shí)調(diào)用铝侵，傳入修改值和this
} )
// 使用字面量的方式
obj.name = undefined;
很顯然灼伤，Object.defineProperty可以使用描述來控制該屬性的配置、枚舉咪鲜、修改狐赡，攔截get和set的過程，而這正是我們實(shí)現(xiàn)數(shù)據(jù)劫持所需要的特性疟丙。
此外颖侄，如果想要批量添加屬性的話，可以使用Object.defineProperties,示例
const obj = {};
Object.defineProperties(obj, {
name: {
value: "123",
writable: true
},
name2: {
value: "456"
}
});
基本的響應(yīng)式實(shí)現(xiàn)
// 數(shù)據(jù)
const data = {
name: "123",
name2: "456"
};
// 將data變成響應(yīng)式
observer(data);
function observer(target) {
// 非數(shù)組享郊、對(duì)象 直接返回
if(typeof target !== 'object' || typeof target !== null) {
return target;
}
// 數(shù)組览祖、對(duì)象實(shí)現(xiàn)數(shù)據(jù)劫持
for(let key in target) {
defineReactive(target, key, target[key]);
}
}
// 使用defineProperty實(shí)現(xiàn)簡(jiǎn)單的數(shù)據(jù)劫持
function defineReactive(target, key, value) {
Object.defineProperty(target, key, {
value,
get: function() {
return value;
},
set: function(newVal) {
value = newVal;
// todo: 更新視圖
}
})
}
這里補(bǔ)一張圖：
vue實(shí)際上是通過發(fā)布訂閱者模式進(jìn)行數(shù)據(jù)驅(qū)動(dòng)視圖更新的。
在我理解炊琉，發(fā)布訂閱者模式可以高度概括為一句話：控制并發(fā)布數(shù)據(jù)的Subject會(huì)在數(shù)據(jù)發(fā)生變動(dòng)時(shí)通知所有注冊(cè)&訂閱了的Observer進(jìn)行更新展蒂。
細(xì)化.復(fù)雜對(duì)象
const data = {
name: "123",
name2: "456",
name3: {
firstName: "c",
lastName: "xk"
}
};
// 將data變成響應(yīng)式的數(shù)據(jù)
observer(data);
// observer的實(shí)現(xiàn)：遞歸偵聽
function observer(target) {
if(typeof target !== 'object' || typeof target !== null) {
return target;
}
// s數(shù)組、對(duì)象使用defineProperty實(shí)現(xiàn)簡(jiǎn)單的數(shù)據(jù)劫持
for(let key in target) {
observer(newVal);
Object.defineProperty(target, key, {
value,
get: function() {
return value;
},
set: function(newVal) {
observer(newVal);
value = newVal;
// todo: 更新視圖
}
})
}
}
當(dāng)數(shù)據(jù)是多層級(jí)對(duì)象時(shí)苔咪，之前的實(shí)現(xiàn)就無法偵聽到深層次屬性的變化了锰悼，所以需要使用遞歸進(jìn)行優(yōu)化；另外团赏，如果set的時(shí)候箕般，給定的也是個(gè)對(duì)象 如 obj.name = { name }, 那么也無法監(jiān)聽，所以這里也需要遞歸優(yōu)化下舔清，遞歸時(shí)間復(fù)雜度很高隘世，所以在vue2在遇到復(fù)雜對(duì)象時(shí)性能不會(huì)很好，vue3使用proxy解決了這個(gè)問題鸠踪。
細(xì)化.數(shù)組
const {
arguments
} = require("file-loader");
const {
method
} = require("lodash");
const data = {
name: "123",
name2: "456",
name3: {
firstName: "c",
lastName: "xk"
},
names: ['1', '2', '3'];
};
// 利用Array原型創(chuàng)建新原型
const oldArrayProto = Array.prototype;
const newArrayProto = Object.create(oldArrayProto);
['push', 'pop', 'shift', 'unshift', 'splice'].forEach(methodName => {
newArrayProto[methodName] = function () {
// todo： 更新視圖
oldArrayProto[methodName].call(this, ...arguments);
}
});
// 將data變成響應(yīng)式的數(shù)據(jù)
observer(data);
// observer的實(shí)現(xiàn)：遞歸偵聽
function observer(target) {
if (typeof target !== 'object' || typeof target !== null) {
return target;
}
// 將_proto_指向新原型
if (Array.isArray(target)) {
target._proto_ = newArrayProto;
}
// s數(shù)組、對(duì)象使用defineProperty實(shí)現(xiàn)簡(jiǎn)單的數(shù)據(jù)劫持
for (let key in target) {
observer(newVal);
Object.defineProperty(target, key, {
value,
get: function () {
return value;
},
set: function (newVal) {
observer(newVal);
value = newVal;
// todo: 更新視圖
}
})
}
}
Object.create方法的作用是Creates an object that has the specified prototype or that has null prototype复斥，即創(chuàng)建有原型指向舊對(duì)象的新對(duì)象营密。
后續(xù)將繼續(xù)補(bǔ)充完善
