watch函数与watchEffect函数

俊哥前端工程师

已于 2023-11-22 10:51:28 修改

阅读量396

点赞数 10

CC 4.0 BY-SA版权

分类专栏： vue相关语法文章标签：前端 javascript 开发语言 ecmascript vue.js 前端框架 typescript

于 2023-11-22 10:47:57 首次发布

本文链接：https://blog.youkuaiyun.com/ForForever9/article/details/134548358

vue相关语法专栏收录该内容

39 篇文章

订阅专栏

本文详细比较了Vue3.0中的watch和watchEffect函数，介绍了深度监视、初始执行和数据变化回调的用法，适合前端开发者了解和学习Vue3的新特性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

watach函数：

与vue2.x的配置功能一致

监视指定的一个或多个响应式数据, 一旦数据变化, 就自动执行监视回调

默认初始时不执行回调, 但可以通过配置immediate为true, 来指定初始时立即执行第一次

通过配置deep为true, 来指定深度监视

watchEffect函数：

不用直接指定要监视的数据, 回调函数中使用的哪些响应式数据就监视哪些响应式数据默认初始时就会执行第一次, 从而可以收集需要监视的数据监视数据发生变化时回调

watchEffect 是不支持 deep 参数的，也就是说它不会对数据进行深度监听。 watchEffect 中的回调函数只会监听使用到的响应式数据的变化，如果这些响应式数据是对象或数组，只有它们的引用发生变化时才会触发回调函数执行。

<template>
  <div style="font-size: 14px;">
    <h2>测试watch监视 和 watchEffect</h2>
    fistName: <input v-model="user.firstName"/><br>
    lastName: <input v-model="user.lastName"/><br>
    fullName3: <input v-model="fullName3"><br>
    fullName4: <input v-model="fullName3"><br>
  </div>
</template>

<script lang="ts">
// vue3.0 版本语法
import {
  defineComponent,
  reactive,
  ref,
  watch,
  watchEffect
} from 'vue'

export default defineComponent({
  setup () {
    const user = reactive({
      firstName: '张',
      lastName: '三'
    })
    const fullName3 = ref('')
    const fullName4 = ref('')
    /* watchEffect: 监视所有回调中使用的数据*/
    watchEffect(() => {
      console.log('watchEffect')
      fullName4.value = user.firstName + '-' + user.lastName
    }) 

    /* 
    使用watch的2个特性:
      深度监视
      初始化立即执行
    */
    watch(user, () => {
      fullName3.value = user.firstName + '-' + user.lastName
    }, {
      immediate: true,  // 是否初始化立即执行一次, 默认是false
      deep: true, // 是否是深度监视, 默认是false
    })

    /* 
    watch一个数据
      默认在数据发生改变时执行回调
    */
    watch(fullName3, (value) => {
      console.log('watch')
      const names = value.split('-')
      user.firstName = names[0]
      user.lastName = names[1]
    })

    /* 
    watch多个数据: 
      使用数组来指定
      如果是ref对象, 直接指定
      如果是reactive对象中的属性,  必须通过函数来指定
    */
    watch([() => user.firstName, () => user.lastName, fullName3], (values) => {
      console.log('监视多个数据', values)
    })
    return {
      user,
      fullName3,fullName4
    }
  }
})
</script>