Vue2.0 Notes - Computed Properties and Listeners

computed property

Using expressions in templates can be very convenient, but only for simple operations. When too much logic is put in, the template is too difficult to maintain. For this, it's like one data needs to change according to another data change. Therefore, computed properties have the ability to monitor.
<br/>
So, for any complex logic, you should use computed properties.

Computed properties are also used to store data, but have the following characteristics:

• Data can be logically processed
• Monitoring data in computed properties

  Computed property logic processing

  Computed properties, like the data option, are also used to store data.
  Computed properties are written in the computed option.
  See an example below:

  var vm = new Vue({
      el:'#app',
      data:{
          message:'Hello'
      },
      computed:{
          //计算属性的getter方法
          reversedMessage:function(){
              return this.message.split('').reverse().join('');
          }
      }
  })
  <div id="app">
  <p>message:{{message}}</p>
  <p>Computed reversed message:{{ reversedMessage }}</p>
  </div>

By executing the code, the message property value is Hello, and the flipped value is olleH.
The value of the reversedMessage property is a function, this function is a getter method, if the property (message) on which the property depends is changed, this computed property will be re-triggered .
Modify the code as follows:

<input type="text" v-model="message">
{{message}}
<p>Computed reversed message:{{ reversedMessage }}</p>

The message property is two-way bound. Once the message value is changed, the reversedMessage will be executed and the new value will be returned, which is its monitoring capability.
<br/>

setter methods for computed properties

Of course, computed properties only have getter methods by default, and you can also add setter methods.

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]
    }
  }
}

Comparing computed property caches with methods

Both methods and computed properties can perform word flipping for them, and the results are the same, but the difference is that computed properties are cached based on their dependencies , that is, as long as the message does not change, multiple visits will return the original Calculate the result without having to execute the function again.
By contrast, calling the method will always execute the function again whenever a re-render is triggered.

listener

While computed properties are more appropriate in most cases, sometimes a custom listener is also required.
Local listeners are written in the watch option .

watch:{
            name:function(newName,oldName){
                console.log('新值:' +newName +',' + '旧值：' + oldName);
            }
        }

The name is an attribute of the listener, the first parameter is to get the new value, and the second parameter is the old value.
<br/>

option deep

If you monitor an object, you change the properties of the object, but it does not change the address of the object, because it monitors the address.
If it does not change, the processor will not be executed. In order to detect changes in the internal value of the object , you need to Set the option deep: true, note that the listener array is not required to do so.

user:{ 
    handler:function(newVal,oldVal){
        console.log('原值为' + oldVal.name + '新值为' + newVal.name);
    },
    deep:true 
}

After adding, the processor function will be executed and the value will be displayed. But both newVal and oldVal are new values,
because the object is a reference type, and both variables point to that object, so after changing the value, naturally oldVal.name will also change to the new value

Options: immediate

Specifying immediate: true in the options parameter will immediately trigger the callback with the current value of the expression:

user:{ 
    handler:function(newVal,oldVal){
        console.log('原值为' + oldVal.name + '新值为' + newVal.name);
    },
    immediate:true
}
// 立即以 `name` 的当前值触发回调