国产99久久精品_欧美日本韩国一区二区_激情小说综合网_欧美一级二级视频_午夜av电影_日本久久精品视频

最新文章專題視頻專題問答1問答10問答100問答1000問答2000關鍵字專題1關鍵字專題50關鍵字專題500關鍵字專題1500TAG最新視頻文章推薦1 推薦3 推薦5 推薦7 推薦9 推薦11 推薦13 推薦15 推薦17 推薦19 推薦21 推薦23 推薦25 推薦27 推薦29 推薦31 推薦33 推薦35 推薦37視頻文章20視頻文章30視頻文章40視頻文章50視頻文章60 視頻文章70視頻文章80視頻文章90視頻文章100視頻文章120視頻文章140 視頻2關鍵字專題關鍵字專題tag2tag3文章專題文章專題2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章專題3
問答文章1 問答文章501 問答文章1001 問答文章1501 問答文章2001 問答文章2501 問答文章3001 問答文章3501 問答文章4001 問答文章4501 問答文章5001 問答文章5501 問答文章6001 問答文章6501 問答文章7001 問答文章7501 問答文章8001 問答文章8501 問答文章9001 問答文章9501
當前位置: 首頁 - 科技 - 知識百科 - 正文

vue觀察模式的簡單理解

來源:懂視網 責編:小采 時間:2020-11-27 19:30:19
文檔

vue觀察模式的簡單理解

vue觀察模式的簡單理解:本篇文章給大家帶來的內容是關于vue觀察模式的簡單理解,有一定的參考價值,有需要的朋友可以參考一下,希望對你有所幫助。以下是我對vue觀察者模式的理解:不要對框架的偏見, 你真的了解jquery、angular、react 等等,框架是什么只是工具而已。 你用過jqu
推薦度:
導讀vue觀察模式的簡單理解:本篇文章給大家帶來的內容是關于vue觀察模式的簡單理解,有一定的參考價值,有需要的朋友可以參考一下,希望對你有所幫助。以下是我對vue觀察者模式的理解:不要對框架的偏見, 你真的了解jquery、angular、react 等等,框架是什么只是工具而已。 你用過jqu
本篇文章給大家帶來的內容是關于vue觀察模式的簡單理解,有一定的參考價值,有需要的朋友可以參考一下,希望對你有所幫助。

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

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

3740524565-5ba6f27a49413_articlex.png

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方法,進而更新。
(這部分代碼不知如何說,故此沒寫, 具體查看源碼)

聲明:本網頁內容旨在傳播知識,若有侵權等問題請及時與本網聯系,我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

文檔

vue觀察模式的簡單理解

vue觀察模式的簡單理解:本篇文章給大家帶來的內容是關于vue觀察模式的簡單理解,有一定的參考價值,有需要的朋友可以參考一下,希望對你有所幫助。以下是我對vue觀察者模式的理解:不要對框架的偏見, 你真的了解jquery、angular、react 等等,框架是什么只是工具而已。 你用過jqu
推薦度:
標簽: 模式 VUE 了解
  • 熱門焦點

最新推薦

猜你喜歡

熱門推薦

專題
Top
主站蜘蛛池模板: 欧洲亚洲一区 | 国产一区二区高清视频 | 最新国产精品亚洲二区 | 欧美精| 日韩欧美中文 | 欧美另类精品一区二区三区 | 一边摸一边叫床一边爽视频 | 二区久久国产乱子伦免费精品 | 国产精品视频一区麻豆 | 日韩欧美极品 | 美日韩在线 | 国产高清免费视频 | 国产一区二区日韩欧美在线 | 欧洲亚洲欧美国产日本高清 | 亚洲免费福利 | 欧美成人精品第一区二区三区 | 久久精品最新免费国产成人 | 国产美女视频黄a视频免费全过程 | 亚洲精品自产拍在线观看app | 欧美国产日韩在线 | 国产一区二区久久久 | 亚洲欧美激情另类 | 亚洲欧美日韩高清一区二区三区 | 精品欧美一区二区在线观看欧美熟 | 国产剧情精品在线 | 亚洲一区二区三区久久精品 | 国产高清视频 | 欧美精品久久久亚洲 | 国产成人一区在线播放 | 精品一区视频 | 久久久91精品国产一区二区 | 国产一区二区三区免费 | 国产成人久久精品亚洲小说 | 国产一区免费在线观看 | 亚欧美综合 | 欧美日韩一区二区三区视频 | 日韩一区二区三区在线视频 | 亚洲伊人久久综合一区二区 | 亚洲网站免费 | 欧美色图亚洲激情 | 999久久久免费精品国产牛牛 |