數據劫持

一、什麼是數據劫持

數據劫持是指在一個javascript對象的屬性被修改之前，先攔截這個修改操作，執行自定義的操作，比如提醒用戶或更新界面。通常情況下，開發者需要監聽一個對象的屬性，當這個屬性被修改時，立即執行一些操作。

Vue.js是一種基於MVVM模式的組件化構建web頁面的前端框架，它採用了數據劫持的方式來監聽數據的變化來實現雙向綁定，具有高效穩定的特點。使用數據劫持可以方便地實現開發者想要的功能。

二、數據劫持的優勢

Vue.js採用數據劫持監聽數據的變化，相比直接監聽DOM元素，有以下優勢：

1、性能優越：由於直接監聽DOM元素的方式會耗費很多資源，而採用數據劫持的方式不會增加UI渲染的次數，降低了渲染的時間。

2、代碼簡潔：採用數據劫持後，無需大量的手動判斷屬性是否改變就可以完成listener的設置，縮短了編碼時間。

3、更快的渲染速度：Vue.js在實現DOM操作，結合依賴收集和異步更新隊列等技術，可以大大提升界面渲染效率。

三、Vue.js中的數據劫持

Vue.js中的響應式數據劫持機制指的是，當頁面視圖渲染時，當頁面的數據發生更改時，會自動觸發視圖進行更新。

Vue.js通過Object.defineProperty()來劫持對象屬性的getter和setter操作。Object.defineProperty()是一個屬性描述符的方法，通過它可以把這個屬性設置為不可枚舉，並且在get和set的時候可以插入執行代碼。

  // 定義一個對象
  let person = {
    name: "Lucia",
    sex: "female"
  }
  //通過defineObjectProperty的setter方法監聽name屬性的值的修改，再執行我們要執行的邏輯
  Object.defineProperty(person, "name", {
    set: function(val) {
      console.log(val + "has been changed")
      console.log("previous value is " + this.name)
      this._name = val
    },
    get: function() {
      return this._name
    }
  })

這樣無論何時修改person.name的值，都會觸發setter方法，從而執行對象內置的自定義邏輯。

四、手動觸發數據劫持

在Vue.js框架中，數據劫持是由Vue.js自動觸發的。但在其他應用場景中，我們需要手動觸發數據劫持，在以下情況中需要手動觸發：

1、新數據未被監聽： 在新增的數據中，如果有部分數據沒有被監聽，那麼當這些數據被修改後需要手動觸發數據劫持。

2、某些變量無法被監聽： 在某些情況下，有些變量無法實現數據劫持。如數組的變化，需要特殊處理。當這些變量發生變化時就需要手動觸發數據劫持。

  
    var app = new Vue({
      data: {
        oldObj: {a:1, b:2, c:3}, 
        newObj: {a:1, b:2, c:3}
      }
    });
    // 修改newObj的屬性c，手動觸發數據劫持
    app.$set(app.newObj, 'c', 4);
    // 修改oldObj的修改i不會觸發數據劫持
    app.oldObj.i = 4;
  

五、Vue.js中的$watch

Vue.js提供了watch和computed兩種方式來監聽數據變化。watch是數據變化監聽的一種簡單實用的方式，當監聽到數據變化時，執行對應的回調函數。

  
    var app = new Vue({
      data: {
        message: 'Hello Vue.js!'
      },
      watch: {
        // 監聽message的變化
        message: function (newValue, oldValue) {
          console.log('New Message:'+newValue+', Old Message:'+oldValue);
        }
      }
    });
  

六、總結

數據劫持是Vue.js框架中的核心特性之一。採用數據劫持可以實現數據綁定的雙向更新。Vue.js通過Object.defineProperty()來實現數據劫持，在Vue.js框架中，數據劫持是由框架自動觸發的，開發者只需關注邏輯層面的代碼編寫即可。