1. Calculated attribute: calculated

Preliminary understanding of computed

• 1. Cache is supported. Only when the dependent data changes, the calculation will be re performed
• 2. Asynchrony is not supported. computed is the dependent value, and the function will be re executed when the value changes. The calculation property takes the return value as the latest result, so it cannot return the result asynchronously
• 3. The calculated attribute value will be cached by default. The calculated attribute is cached based on their responsive dependencies, that is, the calculated value based on the data declared in data or in props passed by the parent component
• 4. If an attribute is calculated from other attributes, it depends on other attributes. It is a "many to one" or "one to one". It is generally calculated

computed example

Write a simple example

<div id="example">
  <p>Original message: "{{ message }}"</p>
  <p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>

var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello'
  },
  computed: {
    // getter of calculated property
    reversedMessage: function () {
      // `this ` points to the vm instance
      return this.message.split('').reverse().join('')
    }
  }
})

Rendering results we will find
Original message: "Hello"
Computed reversed message: "olleH"

computed property

If the property value of the computed property is a function, the get method will be used by default; The return value of the function is the attribute value of the attribute; The properties in computed have a get and a set method. When the data changes, the set method is called.

computed: {
  fullName: {
    // getter
    get: function () {
      return this.firstName + ' ' + this.lastName
    },
    // setter
    set: function (newValue) {
      var names = newValue.split(' ')
      this.firstName = names[0]
      this.lastName = names[names.length - 1]
    }
  }
}

Now run VM When fullname = 'John Doe', setter will be called, VM Firstname and VM LastName will be updated accordingly.

2. Listening attribute: watch

Preliminary understanding of watch

• 1. Caching is not supported, and data changes will directly trigger corresponding operations;
• 2. watch supports asynchrony;
• 3. The listening function receives two parameters. The first parameter is the latest value; The second parameter is the value before input;
• 4. When an attribute changes, you need to perform the corresponding operation, but in initialization, it is not executed by default, and only when it changes; One to many;
• 5. The listening data must be the data in props declared in data or passed by the parent component. When the data changes, other operations will be triggered

Note: deep cannot listen to array changes and object additions. Refer to vue array variations. Only when triggered in a responsive manner can it be monitored.

watch example

Write a simple example

<div id="demo">{{ fullName }}</div>

var vm = new Vue({
  el: '#demo',
  data: {
    firstName: 'Foo',
    lastName: 'Bar',
    fullName: 'Foo Bar'
  },
  watch: {
    firstName: function (val) {
      this.fullName = val + ' ' + this.lastName
    },
    lastName: function (val) {
      this.fullName = this.firstName + ' ' + val
    }
  }
})

Rendering results we will find
Foo Bar

watch property

The function has three arguments:

• handler: watch executes the function and has two parameters at the same time. The first is the changed value and the second is the value before the change
• Immediate: the callback function is triggered immediately after the component is loaded, but it is not executed by default during initialization. It is only executed when changes are made. If you use immediate, the initialization will also be triggered;
• Deep: deep listening. In order to find changes in the internal values of objects, it is used for complex types of data, such as changes in the contents of objects in the array. Note that it is not necessary to listen to the array.

It is written as follows:

<input type="text" v-model="firstName.name"/>

var vm = new Vue({
  el: '#root',
  data: {
    firstName: {id: 1, name: 'Foo'}
  },
  watch: {
    firstName: {
      handler(newName, oldName) {      
      	// ...    
      },
    deep: true,
    immediate: true
    }
  } 
})