Detailed explanation of watcher in vue

While computed properties are more appropriate in most cases, sometimes a custom watcher is needed. This is why Vue provides a more general way to respond to data changes through the watch option. This is useful when you want to perform asynchronous or expensive operations in response to data changes. This article mainly introduces the relevant information of watcher in vue. Friends who need it can refer to it. I hope it can help everyone.

Everyone should be familiar with watch. They have all used the following writing method in the project:

watch: {
 someProp () {
  // do something
 }
}
// 或者
watch: {
 someProp: {
  deep: true,
  handler () {
   // do something
  }
 }
}

The above writing method tells Vue that I need to monitor changes in someProp attributes. So vue will create a watcher object for us internally. (Limited by space, we will not talk about the specific implementation of watcher. If you are interested, you can directly look at the source code of watcher)

However, in vue, the function of watcher is not so single. Let’s start with the code:

<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(&#39;a is changed&#39;)
  }
 },
 methods: {
  increment () {
   this.a += 1
  }
 },
 created () {
  console.log(this._watchers)
 }
}
</script>

Online demo

The above code is very simple. We now focus on this._watchers printed in the created hook, as follows:

Expand three watchers respectively and observe each expression from top to bottom They are:

b() {   return this.a * 2;↵  }
"a"
function () {   vm._update(vm._render(), hydrating);↵  }

The above three watchers represent watchers with three different functions. We divide them into three categories according to their functions:

• defined in watch , a watcher for monitoring property changes (the second one)

• a watcher for computed properties (the first one)

• for Page update watcher (the third one)

normal-watcher

What we define in watch are all It belongs to this type, that is, as long as the monitored properties change, the defined callback function will be triggered.

computed-watcher

Each computed Attributes will eventually generate a corresponding watcher object, but this type of watcher has a characteristic. Let's take b above as an example:

Attribute b depends on a. When a changes, b will not be recalculated immediately. , only when b needs to be read elsewhere later, will it actually be calculated, that is, it has the lazy (lazy calculation) feature

render-watcher

Each component will have a render-watcher, function () {↵ vm._update(vm._render(), hydrating);↵ }, when data/computed

When the properties in change, the render-watcher will be called to update the component's view

The execution order of the three watchers

In addition to the functions The difference between these three types of watchers is that they also have fixed execution orders, which are:

computed-render -> normal-watcher -> render-watcher

There is a reason for this arrangement, so that it can be guaranteed as much as possible that when updating the component view, the computed attribute is already The latest value. If render-watcher is ranked in front of computed-render, the computed value will be old data when the page is updated.

Let’s look at the watcher in vue from a piece of example code

In this example, using the watch option allows us to perform asynchronous operations ( access an API), limit how often we perform the operation, and set intermediate states before we get the final result. This is something that computed properties cannot do.

<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&#39;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: &#39;#watch-example&#39;,
data: {
question: &#39;&#39;,
answer: &#39;I cannot give you an answer until you ask a question!&#39;
},
watch: {
 // 如果 question 发生改变，这个函数就会运行
question: function (newQuestion) {
this.answer = &#39;Waiting for you to stop typing...&#39;
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(&#39;?&#39;) === -1) {
vm.answer = &#39;Questions usually contain a question mark. ;-)&#39;
return
}
vm.answer = &#39;Thinking...&#39;
axios.get(&#39;https://yesno.wtf/api&#39;)
.then(function (response) {
vm.answer = _.capitalize(response.data.answer)
})
.catch(function (error) {
vm.answer = &#39;Error! Could not reach the API. &#39; + error
})
},
// 这是我们为用户停止输入等待的毫秒数
500
)
}
})
</script>

Related recommendations:

Vue methods and event handling issues

What are the internal instructions in Vue 2.0

How to use VUE on the front end

The above is the detailed content of Detailed explanation of watcher in vue. For more information, please follow other related articles on the PHP Chinese website!