watch(监视属性)和computed(计算属性)的区别

watch(监视属性)和computed(计算属性)的区别

watch 和 computed 是vue实例对象中的两个重要属性，watch是监视属性，用来监视vue实例对象上属性和方法的变化，computed被称为计算属性，可以将data对象中的属性进行计算得到新的属性；由于watch属性监视data对象中的属性变化时，也能拿到data对象中的属性进行计算。

既然两者都能实现同一功能，两者有什么区别呢？

watch 实现案例

使用场景

1、watch的函数名称必须和data中的数据名一致
2、watch中的函数有两个参数，前者是newVal，后者是oldVal
3、watch中的函数是不需要调用的
4、watch只会监听数据的值是否发生改变，而不会去监听数据的地址是否发生改变，要深度监听需要配合deep：true属性使用
5、immediate:true 页面首次加载的时候做一次监听

使用方式

 //基本语法
watch: {
    // cont表示data中的数据名  newval表示新的数据，oldval表示旧的数据
    cont (newval, oldval) {
      console.log(newval, oldval)
    }
  }

//对象写法
watch: {
    //定义对象格式的侦听器
    cont: {
      //侦听器的处理函数
      handler(newVal, oldVal) {//handler是固定写法
        console. log(newVal, oldVal)
      },
      // immediate 选项的默认佰是false
      // /1 immediate 的作用是:控制侦听器是否自动触发-次!
      immediate: true
      //开启深度监听，只要对象中一个属性变化了，都会触发对象的侦听
      deep：true
  } 
//监听对象中单个属性
    '对象名.属性名'：{
        handler(newvalue,oldvulue){
			console.log(newvalue)
        }
        immediate:true
        deep:true
    }

computed 实现案例

使用场景：

1、使用方法和data中的数据一样，但是类似一个执行方法
2、在调用时候不加（）
3、必须有return返回
4、如果函数所依赖的属性没有发生变化，从缓存中读取
模板中的表达式常用于简单的运算，当模板中的表达式过长或者其逻辑复杂时，会难以维护，计算属性就是解决该类问题

使用方式

//基础实用方法
computed: {
    //简写方式
    adds () {
      return this.cont + 1
    }，
     // 对象写法，完整写法
     total:{
          get() {
            	 // getter，用于获取属性值，比如：
	            console.log('计算 total...')
	             return this.num1+this.num2
              },
          set(val) { // setter，用于设置（修改）属性值
                console.log('赋值:', val)
              }
	        },
	        //简写
            //total() {
            //    return this.num1+this.num2
            //}
  }

区别

1、功能：computed是计算属性；watch是监听一个值的变化执行对应的回调
2、是否调用缓存：computed函数所依赖的属性不变的时候会调用缓存；watch每次监听的值发生变化时候都会调用回调
3、是否调用return：computed必须有；watch可以没有
4、使用场景：computed当一个属性受多个属性影响的时候；例如购物车商品结算；watch当一条数据影响多条数据的时候，例如搜索框
5、是否支持异步：computed函数不能有异步；watch可以
6、个人理解：watch是在监听到变化时执行某一个回调函数（变化就去做某一件事），computed是监听到变化时去重新计算值。

注意

deep无法监听到数组的变动和对象的新增，参考vue数组变异,只有以响应式的方式触发才会被监听到。