computed和watch

1. computed

computed是计算属性，指的是通过一系列运算之后，最终得到一个属性值。它会根据依赖的数据动态计算出一个新的值，并且只有在依赖的数据发生变化时才会重新计算。

特点：

• 定义的时候要被定义为“方法”
• 在使用计算属性的时候，当普通的属性使用

好处：

• 实现了代码的复用
• 只要当计算属性中依赖的数据源变化了，计算属性会自动重新求值

上一个简单的案例：

<template>
  <div id="app">
    <span>R</span>
    <input type="text" v-model.number="r" />
    <br />
    <span>G</span>
    <input type="text" v-model.number="g" />
    <br />
    <span>B</span>
    <input type="text" v-model.number="b" />
    <hr />
    <div class="box" :style="{backgroundColor:rgb}">{{ rgb }}</div>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      r: 0,
      g: 0,
      b: 0
    }
  },
  computed: {
    rgb() {
      return `rgb(${this.r}, ${this.g},${this.b})`
    }
  }
}
</script>

运行效果展示：

  

2.watch

watch会监听一个数据的变化，并在数据变化时执行相应的操作。watch的回调函数接收两个参数，第一个参数是新的值，第二个参数是旧的值。

侦听器的格式

格式	优/缺点
方法格式	缺点： 1.无法在刚进入页面的时候，自动触发 2.如果侦听的是一个对象，如果对象中的属性发生了变化，不会触发侦听器
对象格式	优点： 1.可以通过 immediate 选项，让侦听器自动触发 2.可以通过 deep 选项，让侦听器深度监听对象中每个属性的变化

侦听器语法格式如下：

 watch: {
          // 侦听器本质上是一个函数，要监听那个数据的变化，就把该数据名定义为方法名即可
          // xx 表示要监听的数据
          // newVal 表示新值， oldVal 表示旧值
          xx(newVal, oldVal) {
           
          },
        },

3. computed 与 watch 的相同与区别

相同点：computed和watch都是用来监听数据变化并做出相应操作的。

区别：

• computed 所依赖的属性不变的时候会调用缓存，watch 每次监听的值发生变化的时候都会调用回调
• computed 必须有return，watch 可以没有
• computed 不能有异步，watch 可以有

孤独本是常态，逢人不必言深！