vue003——vue计算属性computed 和 侦听器watch

vue2计算属性和侦听器官网介绍

1、功能不同，计算属性用于解决模板语法冗余问题；侦听器侦听data中某一个数据变化。

2、计算属性有缓存机制，侦听器没有缓存机制

• 计算属性：支持缓存，只有当依赖项数据发生改变，才会重新进行计算
• 侦听器：不支持缓存的，数据变化，就会直接触发响应的操作

3、计算属性不支持异步操作，侦听器支持异步操作

• 计算属性：不支持异步操作的，当计算属性computed内有异步操作的时候，无法监听数据的变化，此时计算属性computed是无效的；
• 侦听器：支持异步的操作，监听的函数接受到两个参数，第一个参数是最新的值，第二个参数是输入之前的值。

4、计算属性可以给vue新增属性，侦听器必须是data中已有属性

5、计算属性只要使用了就会立即执行一次，侦听器默认只有当数据第一次执行才会执行

6、侦听器可以通过设置immerdiate为true，也可以像计算属性一样立即执行一次

• 侦听器中的immediate属性： immediate设置为 true 的意思就是组件加载立即触发回调函数执行

7、擅长处理的场景

• 计算属性：就是一个数据受多个数据的影响；比如项目中的购物车计算价格（多个商品影响总计），数据的全选和反选；
• 侦听器：一个数据影响多个数据；比如项目中的搜索框，输入搜索条件，得到许多搜索结果。

计算属性

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

如果计算属性computed需要对数据进行修改，需要写get和set两个方法，当数据变化时，就调用set方法

侦听器

var watchExampleVM = new Vue({
  el: '#watch-example',
  data: {
    question: '',
  },
  watch: {
    // 如果 `question` 发生改变，这个函数就会运行
    question: function (newQuestion, oldQuestion) {
      console.log(newQuestion);
      console.log(oldQuestion);
    }
  }
})

//immediate属性======================
var watchExampleVM = new Vue({
  el: '#watch-example',
  data: {
    question: '',
  },
  watch: {
    // 如果 `question` 发生改变，这个函数就会运行
    question:{
     handler(newQuestion, oldQuestion) {
      console.log(newQuestion);
      console.log(oldQuestion);
      },
      // 代表在wacth里声明了name这个方法之后立即先去执行一次handler方法
      immediate: true
    }
  }
})

//deep属性======================
/*
侦听器中的deep属性，deep设置为 true 的意思就是深入侦听，
修改对象里面任何一个属性都会触发这个监听器里面的 handler 方法来处理响应的逻辑
*/
//不适用deep
<script>
    var vm = new Vue({
      el: '#app',
      data: {
        product: {
          name: '',
          count: '',
          title: ''
        }
      },
      watch: {
        'product.name': function(newValue){
          console.log(newValue)
        },
        'product.count': function(newValue){
          console.log(newValue)
        },
        'product.title': function(newValue){
          console.log(newValue)
        }
      }
    })
  </script>
//使用deep
<script>
    var vm = new Vue({
      el: '#app',
      data: {
        product: {
          name: '',
          count: '',
          title: ''
        }
      },
      watch: {
        product: {
          handler: function(newVal) {
            console.log(newVal)
          },
          deep: true
        }
      }
    })
  </script>