watch以及watchEffect的基本使用


阅读数: 次   
字数统计: 1.6k字   |   阅读时长: 8分

在前面的Options API中，我们可以通过watch选项来侦听data或者props的数据变化，当数据变化时执行某一些操作。
在Composition API中，我们可以使用watchEffect和watch来完成响应式数据的侦听；

  • watchEffect用于自动收集响应式数据的依赖；
  • watch需要手动指定侦听的数据源；

watchEffect的基本使用

  • watchEffect传入的函数会被立即执行一次，并且在执行的过程中会收集依赖
  • 只有收集的依赖发生变化时，watchEffect传入的函数才会再次执行
    首先需要引入import { ref, watchEffect } from 'vue';
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    setup() {
      // watchEffect: 自动收集响应式的依赖
      const name = ref("kobe");
      const age = ref(18);

      const changeName = () => name.value = "beichen";
      const changeAge = () => age.value++;

      watchEffect(() => {
        // 会立即执行，因为他要收集所用到了那些响应式的依赖
        // 相当于watch中的immediate(立即执行)
        console.log("name:", name.value, "age: ", age.value);
      })

      return {
        name,
        age,
        changeName,
        changeAge
      }
    }

watchEffect的停止侦听

在age大于25时停止监听
watchEffect的返回值也是一个函数，通常返回的函数定义stop，调用该函数即可。

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
<template>
  <div>
    <h2>{{name}}-{{age}}</h2>
    <button @click="changeName">修改name</button>
    <button @click="changeAge">修改age</button>
  </div>
</template>

<script>
  import { ref, watchEffect } from "vue";

  export default {
    setup() {
      // watchEffect: 自动收集响应式的依赖
      const name = ref("kobe");
      const age = ref(18);

      // watchEffect的返回值是一个函数。
      const stop =  watchEffect(() => {
        // 会立即执行，因为他要收集所用到了那些响应式的依赖
        // 相当于watch中的immediate(立即执行)
        console.log("name:", name.value, "age: ", age.value);
      })

      const changeName = () => name.value = "beichen";
      const changeAge = () => {
        age.value++
        if( age.value > 25) {
          stop();
        }
      };

      return {
        name,
        age,
        changeName,
        changeAge
      }
    }
  }
</script>

watchEffect清除副作用

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
<template>
  <div>
    <h2>{{name}}-{{age}}</h2>
    <button @click="changeName">修改name</button>
    <button @click="changeAge">修改age</button>
  </div>
</template>

<script>
  import { ref, watchEffect } from "vue";

  export default {
    setup() {
      // watchEffect: 自动收集响应式的依赖
      const name = ref("kobe");
      const age = ref(18);

      // watchEffect的返回值是一个函数。
      const stop =  watchEffect((onInvalidate) => {
        const timer = setTimeout(() => {
          console.log("网络请求成功~");
        }, 2000);

        onInvalidate(() => {
          // 在这个函数中清理额外的副作用
          // request.cancel();
          clearTimeout(timer);
        })

        // 会立即执行，因为他要收集所用到了那些响应式的依赖
        // 相当于watch中的immediate(立即执行)
        console.log("name:", name.value, "age: ", age.value);
      })

      const changeName = () => name.value = "beichen";
      const changeAge = () => {
        age.value++
        if( age.value > 25) {
          stop();
        }
      };

      return {
        name,
        age,
        changeName,
        changeAge
      }
    }
  }
</script>

watchEffect执行时机和ref的引用

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
<template>
  <div>
    <h2 ref="title">beichen</h2>
  </div>
</template>

<script>
  import { ref, watchEffect } from "vue";

  export default {
    setup() {
      const title = ref(null);

      // watchEffect两个参数：
      // 第一个参数是回调函数
      // 第二个参数是flush: pre(默认情况下的)
      /* 
      *  调用watchEffect时会立即执行/立即执行/立即执行
      */
      watchEffect(() => {
        console.log(title.value);
      }, {
        // pre是提前执行
        // post是等到dom挂载完了之后执行
        // sync是强制同步(官方不建议使用)
        flush: "post"
      })

      return {
        title
      }
    }
  }
</script>

watchEffect和watch的比较

watch

  1. 懒执行副作用(第一次不会执行)，watchEffect会立即执行(immediate)
  2. 更具体的说明了那些状态发生改变，出发监听器的执行
  3. 访问监听状态变化前后的值，watchEffect只能拿到变化后的值

  4. watch侦听单个数据源

    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
    <template>
      <div>
        <h2>{{info.name}}</h2>
        <button @click="changeData">修改</button>
      </div>
    </template>

    <script>
      import { reactive, ref, watch } from "vue";

      export default {
        setup() {
          const info = reactive({
            name: "Kobe",
            age: 18
          })

          // 1.侦听watch时，传入一个getter函数
          // watch(() => info.name, (newValue, oldValue) => {
          //   console.log("newValue:", newValue, "oldValue:", oldValue);
          // })

          // 2.传入一个可响应式对象: reactive对象/ref对象
          /* 
          * 情况一：reactive对象获取到的newValue和oldValue本身都是reactive对象
          * 情况二：ref对象获取到的newValue和oldValue是value值的本身
          */
          // 情况一：
          // watch(info, (newValue, oldValue) => {
          //   console.log("newValue:", newValue, "oldValue:", oldValue);
          // })

          // 情况一.1 如果希望获取到的newValue和oldValue是一个普通的对象
          watch(() => ({...info}), (newValue, oldValue) => {
            console.log("newValue:", newValue, "oldValue:", oldValue);
          })

          // 情况二：
          // const name = ref("beichen");
          // watch(name, (newValue, oldValue) => {
          //   console.log("newValue:", newValue, "oldValue:", oldValue);
          // })


          const changeData = () => {
            info.name = "james";
          }

          return {
            info,
            changeData
          }
        }
      }
    </script>

watch侦听多个数据源

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
<template>
  <div>
    <h2>{{info.name}}</h2>
    <button @click="changeData">修改</button>
  </div>
</template>

<script>
  import { reactive, ref, watch } from "vue";

  export default {
    setup() {
      // 1.定义可响应式的对象
      const name = ref("beichen");
      const info = reactive({
        name: "Kobe",
        age: 18
      })

      // 2.侦听器watch
      watch([() => ({...info}), name], ([newInfo, newName], [oldInfo, oldName]) => {
        console.log("newInfo:", newInfo, "newName:", newName);
        console.log("oldInfo:", oldInfo, "oldName:", oldName);
      })


      const changeData = () => {
        info.name = "james";
        name.value = "beichenzero";
      }

      return {
        info,
        changeData
      }
    }
  }
</script>

watch侦听响应式对象/watch选项

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
<template>
  <div>
    <h2>{{info.name}}</h2>
    <button @click="changeData">修改</button>
  </div>
</template>

<script>
  import { reactive, ref, watch } from "vue";

  export default {
    setup() {
      const info = reactive({
        name: "Kobe",
        age: 18,
        friend: {
          name: "james"
        }
      })

      /* 
      * 这里传入的是reactive对象，他是会进行深度监听的，同时immediate为false,不会立即执行
      * vue的源码在解析watch传入的第一个参数时，如果判断为reactive对象，会执行deep: true的操作
      */
      watch(info, (newInfo, oldInfo) => {
        console.log("newInfo:", newInfo, "oldInfo:", oldInfo);
      })

      /* 
      * 这里对reactive对象的info进行了解构，解构之后的就是一个普通对象，vue的源码不会加入deep: true的操作
      * 如果我们需要进行深度监听，可以在添加watch的第三个参数
      */ 
      watch(() => ({...info}), (newInfo, oldInfo) => {
        console.log("newInfo:", newInfo, "oldInfo:", oldInfo);
      }, {
        deep: true,
        immediate: true
      })


      const changeData = () => {
        info.friend.name = "beichen";
      }

      return {
        info,
        changeData
      }
    }
  }
</script>

扫一扫，分享到微信

微信分享二维码
本站总访问量 次 | 本站访客数 人次

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

北辰个人博客，记录自己学习生活的博客。