五.Vue基础-计算属性(computed)和监听属性(watch)

五.Vue基础-计算属性(computed)和监听属性(watch)

一.计算属性

1. 计算属性的返回值在同一时间之内, 如果同时被多次使用, 计算属性只会计算一次, 即多次使用返回的是同一结果.
2. 因此计算属性适用于同一时间网页中多个地方使用同一数据源时可以选择计算属性.
3. 计算属性只有在内部计算过程中依赖的数据源发生改变时, 才会被重新计算.

• 例1:

  <div id="app">
      <input type="text" v-model="msg">
      <div class="mag">
          {{reverseMsg}}
      </div>
      <div class="mag">
          {{reverseMsg}}
      </div>
  </div>
  

  let vm = new Vue({
      el: "#app",
      data: {
          msg: "hello",
      },
      computed:{
          reverseMsg:function(){
              //this指向vm实例
              return this.msg.split('').reverse().join('');
          }
      }
  })
  

二.计算机属性的读取和设置

1. 计算属性可以通过getter\setter实现对属性数据的显示和监视, 计算属性存在缓存, 多次读取只能执行一次getter计算.

2. 计算属性默认只有getter

   computed:{
       reverseMsg:{
           get:function(){
               console.log("get方法");
               return this.msg.split('').reverse().join('');
           },
           set: function(value){
               console.log("set方法");
               this.msg = value;
           }
       }
   }
   

三.监听属性

1. 监听属性:用来监视指定的属性值是否发生变化, 如果被监听的属性值一旦发生变化, 立即执行对应的回调函数, 此时在回调函数内部会接收到两个属性值分别是新值和旧值

   watch: {
       /*
               * msg如果是对象的话,只变化一个则监听属性不会走
               * */
       'msg.name': function(new_value, old_value){
           console.log(new_value);
           console.log(old_value);
       },
           /*
               * 计算属性
               * */
           reverseMsg:function (new_value, old_value){
               console.log(new_value);
               console.log(old_value);
           }
   }
   

四.计算属性和监听属性的区别

1. 计算属性使用的情形:

   一个数据属性在它所依赖的属性发生变化时.也要发生变化, 这种情况下, 我们最好使用计算机属性.

   例: 在下面这个例子中，如果我们使用监听函数，代码就会变得有点冗余。

   <div id="app">
       {{fillName}}
   </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
       }
       }
   })
   

   fullName属性依赖于firstName和lastName，这里有个缺点就是，无论firstName或lastName其中的任何一个发生改变时，都要调用不同的监听函数来更新fullName属性。但是当我们使用计算属性时，代码就会变得更加简洁。

   var vm = new Vue({
     el: '#demo',
     data: {
       firstName: 'Foo',
       lastName: 'Bar'
     },
     computed: {
       fullName: function () {
         return this.firstName + ' ' + this.lastName
       }
     }
   })，
   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]
       }
     }
   }
   
   

2. 监听器watch适当的情形

watch函数适用于，当数据发生变化时，执行异步操作或较大开销操作的情况。

参考文档