這篇文章主要介紹了vue 中的watcher的相關資料,需要的朋友可以參考下
#觀察Watchers
##雖然計算屬性在大多數情況下更合適,但有時也需要一個自訂的watcher 。這就是為什麼 Vue 提供一個更通用的方法透過watch 選項,來回應資料的變化。當你想要在資料變化回應時,執行非同步操作或開銷較大的操作,這是很有用的。 大家對於watch 應該不陌生,專案中都用過下面這種寫法:watch: { someProp () { // do something } } // 或者 watch: { someProp: { deep: true, handler () { // do something } } }上面的寫法告訴vue,我需要監聽someProp 屬性的變化,於是vue 在內部就會為我們建立一個watcher 物件。 (限於篇幅,我們不聊watcher 的具體實現,感興趣的可以直接看源碼watcher)#然而在vue 中,watcher 的功能並沒有這麼單一,先上段代碼:
<template> <p> <p>a: {{ a }}</p> <p>b: {{ b }}</p> <button @click="increment">+</button> </p> </template> <script> export default { data () { return { a: 1 } }, computed: { b () { return this.a * 2 } }, watch: { a () { console.log('a is changed') } }, methods: { increment () { this.a += 1 } }, created () { console.log(this._watchers) } } </script>在線demo上面程式碼非常簡單,我們現在主要關注created 鉤子中打印的this._watchers,如下:#分別展開三個watcher,觀察每一個expression,從上到下分別為:
b() { return this.a * 2;↵ } "a" function () { vm._update(vm._render(), hydrating);↵ }上面三個watcher 代表了三個不同功能的watcher,我們將其依功能分為三類:
normal-watcher
我們在watch 中定義的,都屬於這種類型,即只要監聽的屬性改變了,都會觸發定義好的回調函數#computed-watcher
每一個computed屬性,最後都會產生一個對應的watcher 對象,但是這類watcher 有個特點,我們拿上面的b 舉例:屬性b 依賴a,當a 改變的時候,b 並不會立即重新計算,只有之後其他地方需要讀取b 的時候,它才會真正計算,即具備lazy(懶計算)特性render-watcher
每一個元件都會有一個 render-watcher, function () {↵ vm._update(vm._render(), hydrating);↵ }, 當data/computed
#三種watcher 的執行順序
除了功能上的區別,這三種watcher 也有固定的執行順序,分別是:computed-render -> normal-watcher -> render-watcher這樣安排是有原因的,這樣就能盡可能的保證,在更新組件視圖的時候,computed 屬性已經是最新值了,如果render-watcher 排在computed-render 前面,就會導致頁面更新的時候computed 值為舊資料。
下面從一段實例程式碼看下vue中的watcher
#在這個範例中,使用watch 選項允許我們執行非同步操作(訪問一個API),限制我們執行該操作的頻率,並在我們得到最終結果之前,設定中間狀態。這是計算屬性無法做到的。<p id="watch-example"> <p> Ask a yes/no question: <input v-model="question"> </p> <p>{{ answer }}</p> </p> <!-- Since there is already a rich ecosystem of ajax libraries --> <!-- and collections of general-purpose utility methods, Vue core --> <!-- is able to remain small by not reinventing them. This also --> <!-- gives you the freedom to just use what you're familiar with. --> <script src="https://unpkg.com/axios@0.12.0/dist/axios.min.js"></script> <script src="https://unpkg.com/lodash@4.13.1/lodash.min.js"></script> <script> var watchExampleVM = new Vue({ el: '#watch-example', data: { question: '', answer: 'I cannot give you an answer until you ask a question!' }, watch: { // 如果 question 发生改变,这个函数就会运行 question: function (newQuestion) { this.answer = 'Waiting for you to stop typing...' this.getAnswer() } }, methods: { // _.debounce 是一个通过 lodash 限制操作频率的函数。 // 在这个例子中,我们希望限制访问yesno.wtf/api的频率 // ajax请求直到用户输入完毕才会发出 // 学习更多关于 _.debounce function (and its cousin // _.throttle), 参考: https://lodash.com/docs#debounce getAnswer: _.debounce( function () { var vm = this if (this.question.indexOf('?') === -1) { vm.answer = 'Questions usually contain a question mark. ;-)' return } vm.answer = 'Thinking...' axios.get('https://yesno.wtf/api') .then(function (response) { vm.answer = _.capitalize(response.data.answer) }) .catch(function (error) { vm.answer = 'Error! Could not reach the API. ' + error }) }, // 这是我们为用户停止输入等待的毫秒数 500 ) } }) </script>上面是我整理給大家的,希望今後會對大家有幫助。 相關文章:
以上是如何使用vue中的watcher的詳細內容。更多資訊請關注PHP中文網其他相關文章!