首頁  >  文章  >  web前端  >  vue觀察模式的簡單理解

vue觀察模式的簡單理解

不言
不言原創
2018-09-25 17:44:272333瀏覽

這篇文章帶給大家的內容是關於vue觀察模式的簡單理解,有一定的參考價值,有需要的朋友可以參考一下,希望對你有幫助。

以下是我對vue觀察者模式的理解:

不要對框架的偏見, 你真的了解jquery、 angular、react 等等,框架是什麼只是工具而已。
 你用過jquery的 trigger、on、off 事件綁定的方法嗎?事實上 vue 不過也是這種模式,只不過vue 是自動呼叫on方法,自動觸發trigger。甚至可以不用jquery對事件監聽觸發的實作。其實最終解釋就是對某種事件的callback(基礎原理)。
以下是原始碼目錄截圖:

vue觀察模式的簡單理解

#1... vue 實例初始化時,會對data函數傳回的物件裡的屬性呼叫以下方法,程式碼註解如下:

 // 这个是 vue 绑定自动绑定事件的方法和触发事件方法, 会把data函数返回的对象变量属性,重写对应属性的 赋值 和获取的操作。具体查看 (mdn  Object.defineProperty api)
  Object.defineProperty(obj, key, {
    enumerable: true,
    configurable: true,
    get: function reactiveGetter () {
      const value = getter ? getter.call(obj) : val
      // watcher 对象, 如果存在
      if (Dep.target) {
        // 把Watcher 实例 推入 Dep 实例的 subs 数组里, 这个就相当于 on
        dep.depend()
        if (childOb) {
          childOb.dep.depend()
          if (Array.isArray(value)) {
            dependArray(value)
          }
        }
      }
      return value
    },
    set: function reactiveSetter (newVal) {
      const value = getter ? getter.call(obj) : val
      /* eslint-disable no-self-compare */
      if (newVal === value || (newVal !== newVal && value !== value)) {
        return
      }
      /* eslint-enable no-self-compare */
      if (process.env.NODE_ENV !== 'production' && customSetter) {
        customSetter()
      }
      if (setter) {
        setter.call(obj, newVal)
      } else {
        val = newVal
      }
      childOb = !shallow && observe(newVal)
      // 通知 Dep 实例 中subs 里数组 中所有 Watcher 实例, 然后调用Watcher实例里的 update方法(), 这个就相当于 trigger。
      dep.notify()
    }
  })
// Watcher 构造函数 
 constructor (
    vm: Component,
    expOrFn: string | Function,
    cb: Function,
    options?: ?Object,
    isRenderWatcher?: boolean
  )

2...Watcher初始化時,會呼叫Dep.pushTarget方法, 把Wathcer實例賦值到dep.js 裡的Dep.target, 接著會根據exporFn ,運行exporFn 所代表的方法。這個方法基本上包含呼叫1...裡的getter方法(想想render鉤子裡的操作基本上有取得vue實例屬性data裡的值或是取得vue實例的計算屬性的值)

var vm = new Vue({
    data () {
        return {msg: '找个小姐姐!'}
    },
    // 相当于 exporFn
    render(h) {
        return h('h3', {},
          // 这里面就会调用 msg 对应的 getter方法
          this.msg
        )
    }
})

所以會讓 render  函數 與 Vue 實例 的 資料 data屬性 和觀察屬性等產生聯繫,這就形成一個閉環。當其中的屬性變化,就會自動呼叫 setter 方法,從而觸發dep.notify 方法,進而觸發 dep.subs 裡的 Watcher 實例呼叫 update方法,進而更新。
(這部分程式碼不知如何說,故此沒寫, 具體查看原始碼)

以上是vue觀察模式的簡單理解的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

相關文章

看更多