Vue3+TypeScript学习笔记（六）

1. watchEffect作为函数被调用，其接收两个参数。第一个是回调函数，当组件中的变量在回调函数中被使用时会被自动监听，此时在外部修改变量会引起回调函数重新执行。

let message = ref('飞机')
// 每次修改message回调函数都会重新执行，输出message
watchEffect(() => {
  console.log('message==========>', message)
})

1. watchEffect函数返回一个函数，作用是在调用时取消高级监听

/*模板*/
  <button @click = stopWatch>结束监听</button>
  
/* 脚本 */
const stop = watchEffect(() => {
    console.log('message==========>', message)
})
// 不写花括号也能正常执行
let stopWatch = () => stop()    //结束监听

1. watchEffect的回调函数接收一个参数，该参数也是一个函数，接收一个回调函数，在高级监听即将被解除时被调用。

/* 模板 */
<button @click="stopWatch">解除监听</button>

/* 脚本 */
const stop = watchEffect((oninvalidate)=>{
  oninvalidate(()=>{
    console.log('高级监听即将被解除')
  })
})
let stopWatch = () => stop()

1. watchEffect函数还接收一个配置对象，有两个常见的配置项：

const stop = watchEffect((oninvalidate) => {
  console.log('message==========>', message)
  let el: HTMLInputElement = document.querySelector('#ipt') as HTMLInputElement
  console.log('el========>', el)
  oninvalidate(()=>{
    console.log('before')
  })
},{
  //和watch配置项相同，pre代表
    flush:'post',// 默认为pre,表明watch调用的时机。pre是在组件更新之前调用,sync是同步调用,post是在组件更新之后调用
  // 调试工具,在侦听器回调被依赖项的变更触发时被调用
    onTrigger(e){
      debugger
    }
  // 调试工具,在响应属性或引用作为依赖项被跟踪时被调用
      onTrack(e){
      debugger
    }
})

完整代码：

<template>
    <input type="text" v-model="message" id="ipt" />
    <input type="text" v-model="message2" />
    <button @click="stopWatch">解除监听</button>
</template>

<script setup lang="ts">
import { ref, reactive, watchEffect } from 'vue'

let message = ref('飞机')
let message2 = ref('飞机杯子')

// 当message发生改变时watchEffect会自动执行
const stop = watchEffect((oninvalidate) => {
    console.log('message==========>', message)
    let el: HTMLInputElement = document.querySelector('#ipt') as HTMLInputElement
    console.log('el========>', el)
    oninvalidate(()=>{
        console.log('before')
    })
},{
    // 在模板加载完毕后启动监听
    flush:'post',
    // 调试工具,在侦听器回调被依赖项的变更触发时被调用
    onTrigger(e){
        debugger
    }
})
let stopWatch = () => stop()
</script>

<style scoped></style>