vue-计算属性与侦听器

Posted 2021-03-24 peilin-liang

今日分享

当在表达式中涉及复杂的运算的时候就可以用到计算属性——computed

基本用法：

<span>{{sum}}</span>

 

computed:{
      sum:{
          get:function(){
             return this.a + this.b 
          },
          set:function(newValue){
              window.console.log(newValue)
              console.log(‘setter‘)
              this.a+=10
          }
          
      }
  },

 

计算属性默认只有getter,可在必要的时候添加setter(注意：只有在设置fullName值的时候才会触发setter方法

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

<el-button type="danger" @click="fullName = ‘bob job‘">welcome</el-button>

计算属性缓存VS方法

不同的点在于计算属性是基于它们的响应式依赖进行缓存的。

只在相关响应式依赖发生改变时它们才会重新求值。这就意味着只要 a,b还没有发生改变，多次访问 sum计算属性会立即返回之前的计算结果，而不必再次执行函数.

<template>
  <div class="hello">
        <el-row>
            <el-button type="danger" @click="sum += 1">welcome</el-button>
        </el-row>
        <el-row>
            <span>{{sum}}</span>
        </el-row>
        <el-row>
            <span>{{ add() }} </span>
        </el-row>
    
  </div>
</template>

<script>
export default {
  name: ‘HelloWorld‘,
  props: {
    msg: String
  },
  data(){
      return{
         a:1,
         b:2,
         sum1:0 
      }
          
  },
  computed:{
      sum:{
          get:function(){
             return this.a + this.b 
          },
          set:function(newValue){
              window.console.log(newValue)
              console.log(‘setter‘)
              this.a+=10
          }
          
      }
  },
  methods:{
      add:function(){
          return this.a +this.b
      }
  }
}
</script>

计算属性vs侦听属性

当需要在数据变化执行异步或开销较大的操作时，需要使用watch.

watch的基本用法: 当值发生变化时，watch监听并且执行

<template>
  <div class="hello">
        <el-row>
            <el-button type="danger" @click="sum += 1">welcome</el-button>
        </el-row>
        <el-row>
            <span>{{sum}}</span>
        </el-row>
  </div>
</template>

<script>
export default {
  name: ‘HelloWorld‘,
  props: {
    msg: String
  },
  data(){
      return{
         a:1,
         b:2,
         sum1:0 
      }
          
  },
  watch:{
      a(newValue,oldValue){
          console.log(‘a改变了‘)
      }
  },
  computed:{
      sum:{
          get:function(){
             return this.a + this.b 
          },
          
      }
  }
}
</script>

这样使用watch时会有存在一个问题：值第一次绑定的时候不会执行监听函数，只有值发生改变的时候才会执行。如果需要在绑定值得时候就触发函数的话，需要handler和immediate属性。

watch:{
      a:{
          handler(newValue,oldValue){
          console.log(‘a改变了‘)
      },
      immediate:true
      }
  },

如果需要监听某个对象里面的属性值的变化，需要用到deep属性

watch:{
      a:{
          handler(newValue,oldValue){
          console.log(‘a改变了‘)
      },
      immediate:true,
      deep:true
      }
  },

但是这样使用会耗费很大的性能，可以简化：

data(){
      return{
         a:{
             value:1
         },
         b:2,
         sum1:0 
      }
          
  },
  watch:{
      "a.value":{
          handler(newValue,oldValue){
          console.log(‘a改变了‘)
      },
      immediate:true,
      //deep:true
      }
  },