computed和watch

computed计算属性

介绍：

• return一个对data或者props处理的值
• 写法像函数，但他不是一个函数，他是一个属性值
• 必须返回一个返回值，他有自己的作用域（缓存）
• 如果变换的值如上次的变换的一样就不会执行，从自己的缓存中获取数据结果直接返回

对象写法

set 赋值修改 get返回处理的值

computed: {
  fullName: {
    set (val) {
      const names = val.split(' ');
      this.firstName = names[0];
      this.lastName = names[names.length - 1];
    }
    get () {
      return `${this.firstName} ${this.lastName}`;
    },
  }
}

函数写法

在函数中直接处理并return处理的数据

computed: {
  fullName () {
    return `${this.firstName} ${this.lastName}`;
  }
}

调用：

<h1>{{fullName}} </h1>

总结：

• 他不是函数，是一个属性值
• 必须有返回值（return）
• 他有自己的作用域（缓存）

watch 监听属性

介绍：

• 监听一个状态的变换并且执行函数
• 有两种写法 对象 函数
• 有两个默认参数 （newdata,olddata）

对象写法

watch: {
  firstName: {
    handler(newName, oldName) {
      this.fullName = newName + ' ' + this.lastName;
    },
    immediate: true,
    deep:true
  }
}

• immediate 默认调用
• deep 深度监听 监听为对象时,obj.a发生变换也可触发

项目中经常使用deep对性能的影响很大,当可以监听对象中的某一个的值的时候可以做以下优化

watch: {
  'obj.a': {
    handler(newName, oldName) {
      console.log('obj.a changed');
    },
    immediate: true,
    // deep: true
  }
}

函数写法

watch: {
  firstName(){
      this.fullName = newName + ' ' + this.lastName;
  }
}

不能深度监听 数据简单处理的写法