vue——watch监视属性和computed计算属性

6. computed 和 watch 的区别是什么？

computed

1. 它是计算属性。主要用于值的计算并一般会返回一个值。所以它更多⽤于计算值的场景
2. 它具有缓存性。当访问它来获取值时，它的 getter 函数所计算出来的值会进行缓存
3. 只有当它依赖的属性值发生了改变，那下⼀次再访问时才会重新调⽤ getter 函数来计算
4. 它适⽤于计算⽐较消耗性能的计算场景
5. 必须要有一个返回值

watch

1. 它更多的是起到 “观察” 的作⽤，类似于对数据进行变化的监听并执行回调。

   主要⽤于观察 props 或 本组件 data 的值，当这些值发生变化时，执⾏处理操作

2. 不一定要返回某个值

建议

1. 当目的是进⾏数值计算，且依赖于其他数据，那么推荐使用 computed
2. 当需要在某个数据发生变化的, 同时做⼀些稍复杂的逻辑操作，那么推荐使⽤ watch

//watch实力
<template>
  <div>
    <input type="text" v-model="name">
  </div>
</template`>`

<script>
export default {
  data(){
    return {
      name: ""
    }
  },
  // 目标: 侦听到name值的改变
  /*
  语法:
    watch: {
      变量名 (newVal, oldVal){
        // 变量名对应值改变这里自动触发
      }
    }
  */
  watch: {
    // newVal: 当前最新值
    // oldVal: 上一刻值
    name(newVal, oldVal){
      console.log(newVal, oldVal);
    }
  }
}
</script>

<style>

</style>