vue3基础-组合式API之watch_vue3 组合式api watch

watch

与Vue2.x中watch配置功能一致
watch 函数是提供了在某个时机做一些事情，同vue的生命周期钩子
和 computed 的区别是，watch看重的是过程变化，而computed看重的是结果且结果是只读的，不可修改，而且computed是提供了缓存可以提高性能，这也是和JS普通函数的区别。使用时推荐使用watch 和 computed

示例

<template>
  <div class="home">
    <div>{{userInfo.name}}</div>
    <div>{{userInfo.age}}</div>
    <button @click="changeUserName">修改名称</button>
    <button @click="changeUserAge">修改年龄</button>
  </div>
</template>

<script lang="ts">
import {
  defineComponent,
  watch, watchEffect,
} from 'vue';

export default defineComponent({
  name: 'Home',

  setup(props, context) {
    console.log('setup');
    const userInfo = reactive({
      name: '张三',
      age: 18,
    });

    function changeUserName() {
      userInfo.name = '李四';
    }
    function changeUserAge() {
      userInfo.age = 100;
    }
    // 初次进入，newValue有值，oldValue无值
    // 数据改变后 oldValue 不正常，oldValue 的值还是 newValue 的值
    // 在使用时，如确定该对象的所有属性都要监听则可直接传入对象，否则还是建议传入监听的具体属性值
    watch(userInfo, (newValue, oldValue) => {
      console.log('userInfo 变化了 newValue', newValue);
      console.log('userInfo 变化了 oldValue', oldValue);
    }, { immediate: true, deep: true });
    
    // 初次进入则渲染，oldValue 初次进入是 undefined
    // 数据改变则渲染，oldValue 有旧版本的值
    watch(() => userInfo.name, (newValue, oldValue) => {
      console.log('userInfo 的 name 变化了', newValue, oldValue);
    }, { immediate: true, deep: true });

    // watchEffect 所指定的回调中用到的数据只要发生变化，则直接重新执行回调。
    watchEffect(() => {
      const { name } = userInfo;
      console.log('watchEffect配置的回调执行了', name);
    });
    return {
      userInfo,
      changeUserName,
      changeUserAge,
    };
  },
});
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59