數據響應式

一、數據劫持

1. 使用setter getter 方式實現數據劫持

• getter 是一種獲得屬性值的方法，負責查詢值，它不帶任何參數
• setter是一種設置屬性值的方法，setter負責設置鍵值，值是以參數的形式傳遞

let obj = {
    $name: "kkb",
    get name(){ // 獲取 name 屬性時觸發
        //console.log("想要獲取name屬性");
        return this.$name;// 想要讓 obj 在獲取name 屬性時，拿到的值
    },
    set name(newVal){ // 設置 name 屬性時 觸發
        console.log(newVal); // 給 name 設置的新值
        this.$name = newVal;
    }
};
//console.log(obj.name);
obj.name = "開課吧集團";
// console.log(obj.name);
// console.log(obj);
//通俗的講 get  如果想要在獲取對象的屬性的時候做一些別的操作，set 如果想要在設置對象的屬性的時候做一些別的操作

2.利用 defineProperty 實現數據劫持

語法：

Object.defineProperty(obj, prop, descriptor)

參數：

• obj 要在其上定義屬性的對象。
• prop 要定義或修改的屬性的名稱。
• descriptor 將被定義或修改的屬性描述符。

數據描述符

• configurable 當且僅當該屬性的 configurable 爲 true時，該屬性描述符才能夠被改變，同時該屬性也能從對應的對象上被刪除。默認爲 true。
• enumerable 當且僅當該屬性的enumerable爲true時，該屬性才能夠出現在對象的枚舉屬性中。默認爲 true。。
• value 該屬性對應的值。可以是任何有效的 JavaScript 值（數值，對象，函數等）。默認爲 undefined。
• writable 當且僅當該屬性的writable爲true時，value才能被賦值運算符改變。默認爲 true。

存取描述符

• get 一個給屬性提供 getter 的方法，如果沒有 getter 則爲undefined。當訪問該屬性時，該方法會被執行，方法執行時沒有參數傳入，但是會傳入this對象（由於繼承關係，這裏的this並不一定是定義該屬性的對象）。默認爲 undefined。
• set 一個給屬性提供 setter 的方法，如果沒有 setter 則爲undefined。當屬性值修改時，觸發執行該方法。該方法將接受唯一參數，即該屬性新的參數值。默認爲 undefined。

let obj = {
    name: "kkb",
    age: 8
};
Object.defineProperty(obj,"name",{
    configurable: true, //配置是否允許被刪除 true(默認值) 可以被刪除，false 不能被刪除
    enumerable: true, //配置是否允許被枚舉 true(默認值) 可以被枚舉，false 不能被枚舉
    set(newVal){
        console.log("這個想要設置的新值",newVal);
    },
    get(){
        return "你猜名字是啥";
    }
});
// for(let s in obj){
//     console.log(s);
// }
obj.name = "開課吧";
console.log(obj.name);
//console.log(obj);

2、mvvm框架中編譯數據到視圖

MVC架構：
M-Model（數據模型）負責操作所有數據和服務器進行交互，將請求到的數據傳給Controller。
V-View（視圖）負責所有 UI 界面，HTML 渲染。
C-Controller（控制器）負責監聽並處理View 的事件，更新和調用 Model；也負責監聽 Model的變化（Model從服務器獲得數據），並更新 View。Controller 控制其他所有流程

3、實現數據驅動視圖更新