watch函数与watchEffect函数

news2024/11/16 7:29:35

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>