The guide

  1. The computed grammar
  2. Watch the grammar
  3. The difference between watch and computed

computed

Computed attributes are computed attributes, and the syntax of computed attributes is relatively simple. Corresponding functions need to be written in computed attributes. Here is a simple example for readers

<template>
  <div id="app">
    <p>{{ reversedMessage }}</p>
  </div>
</template>
var vm = new Vue({
  el: '#app'.data: {
    message: 'Good'
},
  computed: {
    // Calculates the getter for the property
    reversedMessage: function () {
      // 'this' points to the VM instance
      return this.message.join('boy')}}})Copy the code

In this example, a calculation function is used in computed data, and changes in data are returned. In this case, you can directly use this function to obtain the computed results, but there is a cache in the computed attributes, and the calculation will not be performed again if the data does not change.

watch

When the data changes, we can monitor it through watch. When the data changes, we can carry out some corresponding operations. Syntax is as follows

<template>
  <div id="app">
    <p>{{ reversedMessage }}</p>
  </div>
</template>
var vm = new Vue({
  el: '#app'.data: {
    message: 'Good'
},
  computed: {
    // Calculates the getter for the property
    reversedMessage: function () {
      // 'this' points to the VM instance
      return this.message.join('boy')}},watch: {
  	message: {
    	handler: function(newValue, oldValue) {
        	console.log(newValue, oldValue)
        }
    }
  }
})
Copy the code

At this point, we have monitored the message data, and as long as the data changes, the handler function will be triggered. Here, we did not write the click event, but we can modify the message data through the click event, and then trigger the watch at the same time to type the content we need. This is just an ordinary value reference, but there is another one Types are address references, as shown in the following example

<template>
  <div id="app">
    <p>{{ reversedMessage }}</p>
  </div>
</template>
var vm = new Vue({
  el: '#app'.data: {
    message: {
    	name: 'It's in the headlines today.'}},computed: {
    // Calculates the getter for the property
    reversedMessage: function () {
      // 'this' points to the VM instance
      return this.message.name.join('boy')}},watch: {
  	message: {
    	handler: function(newValue, oldValue) {
        	console.log(newValue, oldValue)
        }
    }
  }
})
Copy the code

Here, we still listen to the message data, but we all know that address references, even change the data address values in the object won’t change, so as not to trigger the watch event, so we need to be set through configuration, Vue provides us with the configuration items, only in the deep, is dig deep change

<template>
  <div id="app">
    <p>{{ reversedMessage }}</p>
  </div>
</template>
var vm = new Vue({
  el: '#app'.data: {
    message: {
    	name: 'It's in the headlines today.'}},computed: {
    // Calculates the getter for the property
    reversedMessage: function () {
      // 'this' points to the VM instance
      return this.message.name.join('boy')}},watch: {
  	message: {
    	handler: function(newValue, oldValue) {
        	console.log(newValue, oldValue)
        },
         deep: true}}})Copy the code

In this way, the watch event can be triggered when the internal data changes

The difference between watch and computed

  1. Computed is a computing attribute, and watch is a listening attribute
  2. Computed without parentheses can be used as an attribute and has a cache. If the data does not change, it will not be computed
  3. Watch has two options,immediate indicating whether the render is executed for the first time, and deep indicating whether it is too deep to trigger the function when variables in the object change