watch和watchEffect区别

watch和watchEffect区别

● watch（[监听的属性1，监听的属性2，（）=>监听的属性3（reactive声明的属性）]，回调函数（newval，oldval），{deep：true，immediate：true）函数
○ 与watch配置功能一致
○ 监视指定的一个或多个响应式数据, 一旦数据变化, 就自动执行监视回调
○ 默认初始时不执行回调, 但可以通过配置immediate为true, 来指定初始时立即执行第一次
○ 通过配置deep为true, 来指定深度监视
● watchEffect（（）=>{}）函数
○ 不用直接指定要监视的数据, 回调函数中使用的哪些响应式数据就监视哪些响应式数据
○ 默认初始时就会执行第一次, 从而可以收集需要监视的数据
○ 监视数据发生变化时回调
● watch和watchEffect区别
○ 参数上
■ watch接收三个参数，watchEffect接收两个参数，因为watchEffect会自动追踪副作用函数中的响应式数据。
○ 执行上
■ watch默认懒侦听，可以通过第三个参数配置对象中的 immediate 属性修改，watchEffect强制非惰性侦听，且参数配置对象中没有 immediate 属性修改。
○ 副作用函数上的参数
■ watch回调函数可接收三个参数新值、旧值，以及一个用于注册副作用清理的回调函数；watchEffect回调函数只接受一个用于注册副作用清理的回调函数。

<template>
  fistName: <input v-model="user.firstName"/><br>
  lastName: <input v-model="user.lastName"/><br>
  fullName1: <input v-model="fullName1"/><br>
  fullName2: <input v-model="fullName2"><br>
  fullName3: <input v-model="fullName3"><br>

</template>

<script lang="ts">
/*
1. watch函数
  与watch配置功能一致
  监视指定的一个或多个响应式数据, 一旦数据变化, 就自动执行监视回调
  默认初始时不执行回调, 但可以通过配置immediate为true, 来指定初始时立即执行第一次
  通过配置deep为true, 来指定深度监视
2. watchEffect函数
  不用直接指定要监视的数据, 回调函数中使用的哪些响应式数据就监视哪些响应式数据
  默认初始时就会执行第一次, 从而可以收集需要监视的数据
  监视数据发生变化时回调
*/

import {
  reactive,
  ref,
  watch,
  watchEffect
} from 'vue'

export default {

  setup () {
    const user = reactive({
      firstName: 'A',
      lastName: 'B'
    })
    /* 
    watchEffect: 监视所有回调中使用的数据
    */
    /* 
    watchEffect(() => {
      console.log('watchEffect')
      fullName3.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,
      fullName1,
      fullName2,
      fullName3
    }
  }
}
</script>