追求卓越一諾千金

藍藍設計-阿龙山吧,2011年成立-__觅食的意思,主創清華團隊|--淮安草根网,專注軟件和互聯網ui設計開發_-_078彩票ios。擅長企業信息化管理_优彩彩票靠谱吗、監控||-长沙同志浴室、大數據軟件UIUE谘詢和設計開發服務|小型食品搅拌机。立足UI-_-臭狗熊和光头强,好好學習-|刘春天膏方网,天天進步-q币购物券有什么用!


【Vue原理】Watch - 白話版

2019-7-10 釋然 前端及開發文章及欣賞


如果您想訂閱本博客內容_-佛说五百次回眸,每天自動發到您的郵箱中|--北京驱逐外来人口, 請點這裏

【Vue原理】Watch - 白話版
簡述 響應式
監聽的數據改變的時_|07我型我秀朱晓东照片,watch 如何工作
設置 immediate 時--|众盈提款提不出,watch 如何工作
設置了 deep 時__|2019最新六开彩结果, watch 如何工作
舉栗子
結論
沒有設置 deep
設置了 deep
實際證明
專注 Vue 源碼分享--赢彩彩票怎么提现,為了方便大家理解||_苏州消防网,分為了白話版和 源碼版---老司机导航(原avsoso,白話版可以輕鬆理解工作原理和設計思想|掌上彩票为什么不能用,源碼版可以更清楚內部操作和 Vue的美-_众购彩票娱乐,喜歡我就關注我的公眾號_-云顶娱乐下载官网100,公眾號的文章|--魏一宁 尼坤,排版更好看

如果你覺得排版難看_--088彩票,請點擊下麵公眾號鏈接

【Vue原理】Watch - 白話版


今天我們用白話文解讀 watch 的工作原理|__剑气侠虹,輕鬆快速理解 watch 內部工作原理__徐娇的微博。你說||天津热线adsl查询,你隻懂怎麼用的--22彩票平台跑了,卻不懂他內部是怎麼工作的_注册送彩金的彩票平台,這樣能有什麼用_-黄山奇石天狗望月?

近期有篇 《停止學習框架》很火_||永胜国际投注是真的吗,其實本意不是讓我們不要學框架-_12306智行火车电话,而是讓我們不要隻停留在框架表麵_||三水芦苞祖庙,我們要學會深入__18大全称,以一敵十|-丈母娘送车,讓我們也要學會框架的抽象能力

watch 想必大家用得應該也挺多的-解放军466耳鼻喉科,用得也很順-大连开发区社保网,如果你順便花一點點時間了解一下內部的工作原理-__许氏大酱,相信肯定會對你的工作有事半功倍的效果

watch 的工作原理其實挺簡單的-|-艾瑞泽7洛阳事故,如果你有看過我之前講解其他選項的文章-邮政上班时间,你可以一下子就明白 watch 是如何工作的||12强赛世预赛赛程,所以這邊文章我也✍得很快

根據 watch 的 api||-武汉市教师教育网,我們需要了解三個地方

1|第一现场直播、監聽的數據改變的時||_舅舅和外甥的关系,watch 如何工作

2-_|诺基亚滑盖手机大全图片及报价、設置 immediate 時|-|嘉洲服务器,watch 如何工作

3_|-朱云来妻子、設置了 deep 時_新观兰,watch 如何工作



簡述 響應式
Vue 會把數據設置響應式_-0165彩票网站登录,既是設置他的 get 和 set

當 數據被讀取|__长郡style,get 被觸發_|_桑叶采摘机,然後收集到讀取他的東西_闽江学院教务管理系统,保存到依賴收集器

當 數據被改變|-惠蒙网qig6,set 被觸發_|掌上彩票首页,然後通知曾經讀取他的東西進行更新

如果你不了解-|涨潮时间,可以查看下 以前的文章

【Vue原理】響應式原理 - 白話版



監聽的數據改變的時---临泉二手房网,watch 如何工作
watch 在一開始初始化的時候-__戴刘菲,會 讀取 一遍 監聽的數據的值-|_秦皇岛开心订房网,於是|网通固定电话费查询,此時 那個數據就收集到 watch 的 watcher 了

然後 你給 watch 設置的 handler ||雅迪燃油助力车价格,watch 會放入 watcher 的更新函數中

當 數據改變時|锐骐zd30,通知 watch 的 watcher 進行更新-_-纤之秀,於是 你設置的 handler 就被調用了



設置 immediate 時|_北京男性科建国医院,watch 如何工作
當你設置了 immediate 時-|1980私彩平台信誉排名,就不需要在 數據改變的時候 才會觸發---诺基亚6208c游戏。

而是在 初始化 watch 時|_-掌上娱乐时时彩正规吗?,在讀取了 監聽的數據的值 之後--柴静受贿,便立即調用一遍你設置的監聽回調盈彩直播app,然後傳入剛讀取的值



設置了 deep 時|__郸城黑社会, watch 如何工作
我們都知道 watch 有一個 deep 選項__掌上彩票102,是用來深度監聽的-|亿博娱乐彩票。什麼是深度監聽呢|_助赢论坛官网?就是當你監聽的屬性的值是一個對象的時候||_淘宝助理不能用,如果你沒有設置深度監聽-_|093彩票咋样,當對象內部變化時_甘萍简历,你監聽的回調是不會被觸發的

在說明這個之前-_永盛国际彩票骗局,請大家先了解一下

當你使用 Object.defineProperty 給 【值是對象的屬性】 設置 set 和 get 的時候

1如果你直接改變或讀取這個屬性 ( 直接賦值 )__雪菲官网,可以觸發這個屬性的設置的 set 和 get

2但是你改變或讀取它內部的屬性_|_金瑞希,get 和 set 不會被觸發的

舉栗子
var inner = { first:1111 }
var test={    name:inner  }

Object.defineProperty(test,"name",{
    get(){         
        console.log("name get被觸發")         
        return inner
    },
    set(){        
        console.log("name set被觸發")
    }
})

// 訪問 test.name 第一次|-|易中彩票是真的吗,觸發 name 的 get
Object.defineProperty(test.name,"first",{
    get(){        
        return console.log("first get被觸發")
    },
    set(){        
        console.log("first set被觸發")
    }
})

// 訪問 test.name 第二次|__黑社会砍人电影,觸發 name 的 get
var a = test.name
// 獨立訪問 first 第一次
var b= a.first 
// 獨立訪問 first 第二次
b= a.first
// 獨立改變 first
a.first = 5


能看到除了有兩次需要訪問到 name|_|英杰传系列,必不可少會觸發到 name 的 get

之後__|钢构的故乡,當我們獨立訪問 name 內部的 first 的時||-盈彩网彩票评价,隻會觸發 first 的 get 函數-金士刚,而 name 設置的 get 並不會被觸發

結論
看上麵的例子後___嫩白白,所以當你的 data 屬性值是對象||亿彩彩票安卓,比如下麵的 info

data(){    

    return {        

        info:{ name:1 }

    }

}


此時--斯丽,Vue在設置響應式數據的時候|惊爆游戏h, 遇到值是對象的求身份证号,會遞歸遍曆|_快乐大本营张惠妹,把對象內所有的屬性都設置為響應式_230彩票,就是每個屬性都設置 get 和 set--苟在松,於是每個屬性都有自己的一個依賴收集器

首先_||圣元金币优惠多联盟,再次說明-_尊彩app,watch初始化的時候-|-赢钱彩冲值卡有什么用,會先讀取一遍監聽數據的值

沒有設置 deep
1_赢彩彩票有人玩吗、因為讀取了監聽的 data 的屬性_|赫依伦,watch 的 watcher 被收集在 這個屬性的 收集器中

設置了 deep
1-__360彩票苹果客户端、因為讀取了監聽的data 的屬性-|-诛仙飞升任务,watch 的 watcher 被收集在 這個屬性的 收集器中

2-铲形币是哪个国家的、在讀取 data 屬性的時候-娱乐天地点检官网注册,發現設置了 deep 而且值是一個對象--聚美优品网站打不开,會遞歸遍曆這個值笔业加工,把內部所有屬性逐個讀取一遍||打长途加什么便宜,於是 屬性和 它的對象值內每一個屬性 都會收集到 watch 的 watcher

於是__288彩票平台,無論對象嵌套多深的屬性-|众彩彩票诈骗,隻要改變了-|-空间留言代码祝福闪字,會通知 相應的 watch 的 watcher 去更新-__苏州故事广播,於是 你設置的 watch 回調就被觸發了

實際證明
證明 watch 的 watcher 深度監聽時是否被內部每個屬性都收集

我在 Vue 內部給 watch 的 watcher 加了一個 屬性_-_竹蒂,標識他是 watch 的 watcher_陈秋石将军,並且去掉了多餘的屬性___金香蜜瓜,為了截圖短一點
藍藍設計www.jwrumpff.com )是一家專注而深入的界麵設計公司_|_约彩彩票中奖了怎么办,為期望卓越的國內外企業提供卓越的UI界麵設計陈志平博客、BS界麵設計 -||京东商城首页淘宝、 cs界麵設計 |日本地震最新消息2018、 ipad界麵設計 --|1分钟贷款、 包裝設計 _--淘宝网如何开店、 圖標定製 --106官网彩票客服、 用戶體驗 ||2019香港赛马比赛、交互設計__|009彩票是合法的吗?、網站建設 _--易旺彩票骗局、平麵設計服務_阮加根。

標簽: 【Vue原理】Watch - 白話版 « vue 移動端彈出鍵盤導致頁麵fixed布局錯亂 | FY品牌官網/移動端視覺設計»


訂閱Rss