Vue 中 Computed 与 Watch 区别

Computed

computed 是一个计算属性，类似过滤器，对绑定的 view 的数据进行处理
computed get 里面必有 return 如果没有直接报错

get 用法

data: {
    firstName: 'Foo',
    lastName: 'Bar'
  },
  computed: {
    fullName: function () {
      return this.firstName + ' ' + this.lastName
    }
  }

fullName 不能在 data 里面定义,因为 computed 作为计算属性定义的 fullName 并返回对应的结果给这个变量,变量不可以重复定义和赋值

get 和 set 用法

data: {
    firstName: 'Foo',
    lastName: 'Bar'
  },
  computed: {
  fullName：{
   get(){//回调函数 当需要读取当前属性值是执行，根据相关数据计算并返回当前属性的值
      return this.firstName + ' ' + this.lastName
    },
   set(val){//监视当前属性值的变化，当属性值发生变化时执行，更新相关的属性数据
       //val就是fullName的最新属性值
       console.log(val)
        const names = val.split(' ');
        console.log(names)
        this.firstName = names[0];
        this.lastName = names[1];
   }
   }
  }

Watch

watch 就是一个观察动作

监听简单类型

data(){
      return{
        'first':2
      }
    },
    watch:{
      first(newvalue,oldvalue){
        console.log(newvalue)
        console.log(oldvalue)
        console.log(this.first)
      }
    }

监听复杂类型

data(){
      return{
        'first':{
          second:0
        }
      }
    },
    watch:{
      first.second:function(newVal,oldVal){
        console.log(newVal,oldVal);
          }
        },
    },