vue3.0与vue2 watch侦听器及计算属性大总结

有不少刚毕业的同学想不明白 vue的侦听器 今天给大家总结一下

vue2.0

• watch侦听器

看一下官方文档给出的例子

var watchExampleVM = new Vue({
  el: '#watch-example',
  data: {
    question: '',
    answer: 'I cannot give you an answer until you ask a question!'
  },
  watch: {
    // 如果 `question` 发生改变，这个函数就会运行
    question: function (newQuestion, oldQuestion) {
      this.answer = 'Waiting for you to stop typing...'
      this.debouncedGetAnswer()
    }
  },
  }，

newQuestion//新的 question值, oldQuestion // 旧的question值
当question属性发生改变时 会执行里面的函数

• computed

<div id="example">
  <p>Original message: "{{ message }}"</p>
  <p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>
//省略部分代码
var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello'
  },
  computed: {
    // 计算属性的 getter
    reversedMessage: function () {
      // `this` 指向 vm 实例
      return this.message.split('').reverse().join('')
    }
  }
})

通过计算属性将mesage进行处理 调用reverseMessage 返回属性

得到结果：
Original message: “Hello”

Computed reversed message: “olleH”

你可以像绑定普通 property 一样在模板中绑定计算属性。Vue 知道 vm.reversedMessage 依赖于 vm.message，因此当 vm.message 发生改变时，所有依赖 vm.reversedMessage
的绑定也会更新。而且最妙的是我们已经以声明的方式创建了这种依赖关系：计算属性的 getter 函数是没有副作用 (side effect)
的，这使它更易于测试和理解。

大家注意到 通过表达式中调用方法来达到同样的效果：

我们可以将同一函数定义为一个方法而不是一个计算属性。两种方式的最终结果确实是完全相同的。然而，不同的是计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。这就意味着只要 message 还没有发生改变，多次访问 reversedMessage 计算属性会立即返回之前的计算结果，而不必再次执行函数。

计算方法相比较方法更容易，,当属性值发生改变基于响应式的依赖进行缓存，如果不是响应式依赖则不执行 不需要重复执行函数

在进行开发是尽量使用computed 避免滥用watch

• 计算属性的setter
  计算属性默认只有 getter，不过在需要时你也可以提供一个 setter：

// ...
computed: {
  fullName: {
    // getter
    get: function () {
      return this.firstName + ' ' + this.lastName
    },
    // setter
    set: function (newValue) {
      var names = newValue.split(' ')
      this.firstName = names[0]
      this.lastName = names[names.length - 1]
    }
  }
}
// ...

Vue3.0

• watch
  与vue2相比 watch用法还是变化较大的
  1.watch需要在setup使用 还需要先导入该组件。
  2.只能监听响应式数据 普通字符串无法监听（vue3 很多方法都有这个限制）
  3.新的 watch 默认是深度监听，无需再手动指定 deep 。
  4.同样可以接受两个值 newVal oldVal
  代码

export default defineComponent({
  setup () {
    const name = ref<string>('Petter');

    // 2s后改变数据
    setTimeout(() => {
      name.value = 'Tom';
    }, 2000);

    // 你可以监听一个响应式对象
    watch( name, (newVal, oldVal) => {
      console.log('打印变化前后的值', { oldVal, newVal });
    })

    return {
      name
    }
  }
})

• watchEffect
  新增watchEffect 可以同时监听多个数据
  watchEffect 可以直接监听方法 当数据发生改变触发watchEffect 但不可以监听状态变化的值

import { defineComponent, ref, watchEffect } from 'vue'

export default defineComponent({
  setup () {
    // 单独定义两个数据，后面用来分开改变数值
    const name = ref<string>('Petter');
    const age = ref<number>(18);

    // 定义一个调用这两个数据的函数
    const getUserInfo = (): void => {
      console.log({
        name: name.value,
        age: age.value
      });
    }

    // 2s后改变第一个数据
    setTimeout(() => {
      name.value = 'Tom';
    }, 2000);

    // 4s后改变第二个数据
    setTimeout(() => {
      age.value = 20;
    }, 4000);

    // 直接监听调用函数，在每个数据产生变化的时候，它都会自动执行
    watchEffect(getUserInfo);
  }

理论上 watchEffect 是 watch 的一个简化操作

watch 可以访问侦听状态变化前后的值，watchEffect 没有。
watch 是在属性改变的时候才执行，而 watchEffect 则默认会执行一次，然后在属性改变的时候也会执行。

• computed写法

需要先导入 computed 组件，然后在 setup 里启用它。
通过 computed 得到的是一个响应式的 ref 变量
语法：

const name: ComputedRef<string> = computed( () => `${firstName.value} ${lastName.value}`);