vue3笔记三(computed、watch、watchEffect)

1、computed使用

计算属性，当依赖的属性值改变的时候触发

<template>
  <input type="text" v-model="firstName">
  <input type="text" v-model="lastName">
  
  <div>{{ name }}</div>
  
  <button @click="changeHandle">click</button>
</template>

<script setup lang="ts">
  import { computed, ref } from 'vue'
  
  let firstName = ref<string>('小李')
  let lastName = ref<string>('飞刀')

  // 写法一：只有getter的计算属性
  // let name = computed(() => {
  //   return firstName.value + '-' +lastName.value
  // })

  // 写法二：有getter与setter的计算属性
  let name = computed({
    get () {
      console.log('get属性触发---')
      return firstName.value + '-' +lastName.value
    },
    set (value) {
      console.log('set属性触发---')
      const name = value.split('-')
      firstName.value = name[0]
      lastName.value = name[1]
    },
  })

  const changeHandle = () => {
    name.value = '齐天-大圣'
  }
</script>

2、watch使用

深度监听ref对象属性需开启deep:true
reactive对象属性，无论是否开启deep，都会深度监听

<template>
  <input type="text" v-model="firstName">
  <input type="text" v-model="lastName">
  
  <input type="text" v-model="info.wife.name">
</template>

<script setup lang="ts">
  import { watch, ref } from 'vue'
  let firstName = ref<string>('小李')
  let lastName = ref<string>('飞刀')

  // 1、监听单个值-----------------------------------------------------------
  watch(firstName, (newVal, oldVal) => {
    console.log('新值---', newVal)
    console.log('旧值---', oldVal)
  })

  // 2、监听多个值-----------------------------------------------------------
  watch([firstName, lastName], (newVal, oldVal) => {
    console.log('新值---', newVal)
    console.log('旧值---', oldVal)
  })
  
  // 3、ref深度监听-----------------------------------------------------------
  const info = ref({
    wife: {
      name: '小花'
    }
  })

  // 深度监听ref对象属性需开启deep:true
  watch(info, (newVal, oldVal) => {
    console.log('新值---', newVal)
    console.log('旧值---', oldVal)
  }, {
    deep: true,
    immediate:true //是否立即调用一次
  })

  // 4、reactive监听-----------------------------------------------------------
  const state = reactive({
    name: '张三',
    age: 19
  })

  // reactive对象属性，无论是否开启deep，都会深度监听
  // state中name或age属性其一改变，都会触发监听
  watch(state, (newVal, oldVal) => {
    console.log('新值---', newVal)
    console.log('旧值---', oldVal)
  })
  
  // 5、reactive监听单一属性-----------------------------------------------------------
  // 监听state中单一属性变化
  watch(() => state.name, (newVal, oldVal) => {
    console.log('新值---', newVal)
    console.log('旧值---', oldVal)
  })
</script>

2.1、watch中ref深度监听注意事项

 const info = ref({
   wife: {
     name: '小花'
   }
 })

 // watch中深度监听ref对象的属性，返回的新旧值都是一样的（vue3目前小bug）
 watch(info, (newVal, oldVal) => {
   console.log('新值---', newVal)
   console.log('旧值---', oldVal)
 }, {
   deep: true
 })

3、watchEffect使用

非惰性，立即执行
自动追踪回调中的数据，用到firstName，则追踪firstName数据变化
未用到lastName，则不追踪lastName数据变化

<template>
  <input type="text" v-model="firstName">
  <input type="text" v-model="lastName">
  
  <button @click="changeHandle">停止监听</button>
</template>

<script setup lang="ts">
  import { watchEffect, ref, reactive } from 'vue'
  let firstName = ref<string>('小李')
  let lastName = ref<string>('飞刀')

  // 1、自动追踪回调中的数据，用到firstName，则追踪firstName数据变化-----------------------------
  // watchEffect(() => {
  //   console.log('firstName----', firstName.value)
  // })
  
  // 2、清除副作用------------------------------------------------------------------------------
  // 触发监听之前会调用一个函数，内部可进行防抖等各种业务逻辑操作
  // watchEffect((oninvalidate) => {
  //   oninvalidate(()=>{
  //     console.log('我先执行---')
  //   })
  //   console.log('firstName----', firstName.value);
  // })

  // 3、停止跟踪 watchEffect 返回一个函数 调用之后将停止更新-------------------------------------
  // const stop = watchEffect(() => {
  //   console.log('firstName----', firstName.value);
  // })

  // const changeHandle = () => stop()

  // 4、更多的配置项----------------------------------------------------------------------------
  
  // 副作用刷新时机 flush 一般使用post
  //          	   pre	        	 sync	    	         post
  // 更新时机	  组件更新前执行		强制效果始终同步触发		组件更新后执行
  
  // onTrigger  可以帮助我们调试 watchEffect
  watchEffect(() => {
    console.log('firstName', firstName.value);
  }, {
    flush: "post",
    onTrigger(e) {
      debugger
    }
  })
</script>

原文链接：
https://xiaoman.blog.csdn.net/article/details/122792620
https://xiaoman.blog.csdn.net/article/details/122797990
https://xiaoman.blog.csdn.net/article/details/122802130