鍍金池/ 問(wèn)答/HTML/ Vue值傳遞取消數(shù)據(jù)綁定

Vue值傳遞取消數(shù)據(jù)綁定

有一個(gè)app，如下：

var app = new Vue({
    el:'#app',
    data:{
        name:'zhangsan'
    }
});

var d = app.data;
d.name = 'lisi' //如何讓這兒更改不影響app.data中的數(shù)據(jù)？
回答
編輯回答
涼薄

Vue數(shù)據(jù)響應(yīng)式的原理是 Object.defineProperty 用get和set劫持其他人對(duì) 對(duì)象屬性的訪問(wèn)
然后vue自己寫的set里面，實(shí)現(xiàn)了(ˇ?ˇ) 想向所有需要這個(gè)屬性的對(duì)象，發(fā)送這個(gè)屬性最新的值
只要修改了 屬性的值 就會(huì)調(diào)用 set 方法，然后其他對(duì)象就知道數(shù)據(jù)改變，然后重新渲染

相關(guān)代碼

var a = {
    n: 12,
    m: 'asd'
}
Object.defineProperty(a, 'm', {
    get: function(){
        console.log('觸發(fā)了 getter');
        return 'asd';
    },
    set: function(value){
        console.log('觸發(fā)了 setter');
        m = value;
    }
});
2017年11月26日 07:29
編輯回答
笨尐豬

深考貝，
JSON.parse(JSON.stringify(app.data));

2017年9月21日 23:03