用 Vue 來觀察屬性變化

hot_pot_Leo 發布于2019-08-20 12:17 / 1954人閱讀

摘要：創建實例時，將遍歷的屬性，通過的將它們轉為，在其內部可以追蹤依賴通知變化。在內部，同是響應的觀察屬性變化的實例提供了方法，用于觀察屬性變化。

響應系統是 Vue 一個顯著功能，修改屬性，可以更新視圖，這讓狀態管理變得非常簡單且直觀。
創建 Vue 實例時，Vue 將遍歷 data 的屬性，通過 ES5 的 Object.defineProperty 將它們轉為 getter/setter，在其內部 Vue 可以追蹤依賴、通知變化。

const vm = new Vue({
  data: {foo: 1} // "vm.foo" (在內部，同 "this.foo") 是響應的
})

觀察屬性變化

Vue 的實例提供了 $watch 方法，用于觀察屬性變化。

const vm = new Vue({
  data: {foo: 1}
})

vm.$watch("foo", function (newValue, oldValue) {
  console.log(newValue, oldValue) // 輸出 2 1
  console.log(this.foo) // 輸出 2
})

vm.foo = 2

當屬性變化后，響應函數將會被調用，在其內部，this 自動綁定到 Vue 的實例 vm 上。
需要注意的是，響應是異步的。如下：

const vm = new Vue({
  data: {foo: 1}
})

vm.$watch("foo", function (newValue, oldValue) {
  console.log("inner:", newValue) // 后輸出 "inner" 2
})

vm.foo = 2
console.log("outer:", vm.foo) // 先輸出 "outer" 2

通過 $watch Vue 實現了數據和視圖的綁定。觀察到數據變化，Vue 便異步更新 DOM ，在同一事件循環內，多次數據變化將會被緩存起來，在下次事件循環中，Vue 刷新隊列并僅執行必要的更新。如下：

const vm = new Vue({
  data: {foo: 1}
})

vm.$watch("foo", function (newValue, oldValue) {
  console.log("inner:", newValue) // 后只輸出一次 "inner" 5
})

vm.foo = 2
vm.foo = 3
vm.foo = 4
console.log("outer:", vm.foo) // 先輸出 "outer" 4
vm.foo = 5

計算屬性

MV* 中，將 Model 層數據展現到 View，經常有復雜的數據處理邏輯，這種情況下，使用計算屬性 (computed property) 更加明智。

const vm = new Vue({
  data: {
    width: 0,
    height: 0,
  },
  computed: {
    area () {
      let output = ""
      if (this.width > 0 && this.height > 0) {
        const area = this.width * this.height
        output = area.toFixed(2) + "m2"
      }
      return output
    }
  }
})

vm.width = 2.34
vm.height = 5.67
console.log(vm.area) // 輸出 "13.27m2"

在計算屬性內部，this 自動綁定 vm，因此聲明計算屬性時需要避免使用箭頭函數。
上例中，vm.width 和 vm.height 是響應的，vm.area 內部首次讀取 this.width 和 this.height 時，Vue 收集其做為 vm.area 的依賴，此后 vm.width 或 vm.height 變化時，vm.area 重新求值。
計算屬性是基于它的依賴緩存，如果 vm.width 和 vm.height 沒有變化，多次讀取 vm.area，會立即返回之前的計算結果，而不必再次求值。
同樣由于 vm.width 和 vm.height 是響應的，在 vm.area 中可以將依賴的屬性賦值給一個變量，通過讀取變量來減少讀取屬性次數，同時解決在條件分支中，Vue 有時會無法收集到依賴的問題。
新的實現如下：

const vm = new Vue({
  data: {
    width: 0,
    height: 0,
  },
  computed: {
    area () {
      let output = ""
      const {width, height} = this
      if (width > 0 && height > 0) {
        const area = width * height
        output = area.toFixed(2) + "m2"
      }
      return output
    }
  }
})

vm.width = 2.34
vm.height = 5.67
console.log(vm.area) // 輸出 "13.27m2"

通過 ~~ob.js~~ smart-observe 多帶帶使用 Vue 的屬性觀察模塊

為方便學習和使用，smart-observe 將 Vue 中屬性觀察模塊提取并封裝了一下。

smart-observe GitHub 地址：https://github.com/cnlon/smar...

安裝

npm install --save smart-observe

觀察屬性變化

const target = {a: 1}
observe(target, "a", function (newValue, oldValue) {
  console.log(newValue, oldValue) // 3 1
})
target.a = 3

添加計算屬性

const target = {a: 1}
observe.compute(target, "b", function () {
  return this.a * 2
})
target.a = 10
console.log(target.b) // 20

像聲明 Vue 實例一樣傳入參數集合

const options = {
  data: {
    PI: Math.PI,
    radius: 1,
  },
  computed: {
    "area": function () {
      return this.PI * this.square(this.radius)
    },
  },
  watchers: {
    "area": function (newValue, oldValue) {
      console.log(newValue) // 28.274333882308138
    },
  },
  methods: {
    square (num) {
      return num * num
    },
  },
}
const target = observe.react(options)
target.radius = 3

更詳細的使用介紹請點擊這里

同時推薦其它兩款同類庫

Watch.JS https://github.com/melanke/Wa...

observe.js https://github.com/kmdjs/obse...

GPU云服務器云服務器 vue實例屬性 vue.js 屬性 vue的計算屬性用jquery來定位

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/80894.html

深入淺出Vue響應式原理

摘要：總結最后我們依照下圖參考深入淺出，再來回顧下整個過程在后，會調用函數進行初始化，也就是過程，在這個過程通過轉換成了的形式，來對數據追蹤變化，當被設置的對象被讀取的時候會執行函數，而在當被賦值的時候會執行函數。前言 Vue 最獨特的特性之一，是其非侵入性的響應式系統。數據模型僅僅是普通的 JavaScript 對象。而當你修改它們時，視圖會進行更新。這使得狀態管理非常簡單直接，不過理解...

yiliang 2019-08-23 18:34 評論0 收藏0
Vue中如何使用方法、計算屬性或觀察者

摘要：如何實現一個查看在線在中我們放置了一些事件處理方法，我們可以在事件綁定中直接應用，不會依賴于任何的屬性。例如計算屬性依賴于屬性，只要屬性發生變化，我們的也會發生變化，從而篩選出我們需要的數據。熟悉 Vue 的都知道方法methods、計算屬性computed、觀察者watcher 在 Vue 中有著非常重要的作用，有些時候我們實現一個功能的時候可以使用它們中任何一個都是可以的，但是...

zhaot 2019-08-23 12:37 評論0 收藏0
淺談Vue中計算屬性computed的實現原理

摘要：雖然計算屬性在大多數情況下更合適，但有時也需要一個自定義的偵聽器。當某個屬性發生變化，觸發攔截函數，然后調用自身消息訂閱器的方法，遍歷當前中保存著所有訂閱者的數組，并逐個調用的方法，完成響應更新。雖然目前的技術棧已由Vue轉到了React，但從之前使用Vue開發的多個項目實際經歷來看還是非常愉悅的，Vue文檔清晰規范，api設計簡潔高效，對前端開發人員友好，上手快，甚至個人認為在很多...

laznrbfe 2019-08-23 11:56 評論0 收藏0
做面試的不倒翁：淺談 Vue 中 computed 實現原理

摘要：當某個屬性發生變化，觸發攔截函數，然后調用自身消息訂閱器的方法，遍歷當前中保存著所有訂閱者的數組，并逐個調用的方法，完成響應更新。編者按：我們會不時邀請工程師談談有意思的技術細節，希望知其所以然能讓大家在面試有更出色表現。也給面試官提供更多思路。 showImg(https://segmentfault.com/img/bVbgYyU?w=1200&h=600); 雖然目前的技術...

Anonymous1 2019-08-23 11:57 評論0 收藏0
關于框架

摘要：事件訂閱發布者模式什么是讀音類似于是一套構建用戶界面的漸進式框架。與其他重量級框架不同的是，采用自底向上增量開發的設計。 MVC && MVVM 前端框架前端 MV*框架的意義被誤解的MVC和被神化的MVVM Vue.js新手入門指南單頁應用SPA的路由單頁面應用的路由問題本文是在自己總結時，看了許多篇文章有了些體會，然后把我認為有意義的摘抄下來，文中很大部分摘錄以上...

Richard_Gao 2019-08-20 18:30 評論0 收藏0