//當數據改變時，更新視圖，和vue的有點類似
let obj = {
name:{
name:'ll'
},
age:12,
}
let arr = [1,2,3];
//針對數組的寫法
//當需要改變原型對象上的方法時，不要直接在prototype上修改，否則以后使用的都是修改后的方法
//創建一個新對象，可以獲取到Array.protyotype上的所有方法
let proto = Object.create(Array.prototype);
['pop','push','shift','unshift','reverse','sort','splice'].forEach(method=>{
proto[method] = function(){
update();
let old = Array.prototype[method];
old.call(this,...arguments)
}
})
function update(){
console.log('更新視圖')
}
function observer(obj){
//如果是數組，不循環，把數組的新方法賦給該數組
if(Array.isArray(obj)) return;
if(typeof obj !== 'object'){
return obj.__proto__ = proto;
}
for(let key in obj){
defineReactive(obj,key,obj[key]);
}
}
//定義屬性的getter和setter
function defineReactive(obj,key,value){
observer(value) //如果值是對象，繼續循環定義getter和setter
Object.defineProperty(obj,key,{
get(){
return value;
},
set(newval){
//如果新值是個對象，也要循環定義getter和setter
if(typeof newval === 'object'){
observer(newval)
}
//如果數據有變化，更新視圖
if(value !== newval){
update();
}
value = newval
}
})
}
//對象
observer(obj);
//數組
observer(arr);
//更改數據
obj.name.name = 'mj';
arr.push(4);
console.log(obj);
console.log(arr)

轉載于:https://www.cnblogs.com/qiruoranbeginner/p/10980768.html

總結

以上是生活随笔為你收集整理的数据改动，更新视图，类似于vue的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。