Vue学习：12-watchEffect函数

watchEffect()会立即执行一遍回调函数，如果这时函数产生了副作用，Vue 会自动追踪副作用的依赖关系，自动分析出响应源。

App.vue

<script setup>

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

let account = ref('Abc')

let emp = reactive({
  name: 'Jack',
  salary: 7000
})

//创建成功后立即执行一遍
watchEffect(()=>{
  //此处用到了数据源，如果该数据源的值发生了变化，会重新执行该回调函数
  console.log('账号：' + account.value)
  console.log('员工的薪资：' + emp.salary)
})

</script>

<!-- 视图区域（view） -->
<template>  
  账号：<input type="text" v-model="account">
  <hr>
  员工薪资：<input type="number" v-model="emp.salary">
  
</template>

<style>
  
</style>

一、回调的触发时机

默认情况下，用户创建的侦听器回调，都会在 Vue 组件更新之前被调用；这意味着你在侦听器回调中访问的 DOM 将是被 Vue 更新之前的状态。

如果想在侦听器回调中能访问被 Vue 更新之后的DOM，你需要指明flush: 'post' 选项，或者你也可以使用更方便的别名watchPostEffect()函数。

App.vue

<script setup>

import { onMounted,reactive,ref,watchEffect,watchPostEffect } from 'vue'

let account = ref('Abc')

let password = ref('123456')

let emp = reactive({
  name: 'Jack',
  salary: 7000
})

//当视图渲染成功后
onMounted(()=>{
  //侦听账号
  watchEffect(()=>{
    console.log('--------------------')
    console.log('账号：' + account.value)
    //默认情况下，回调触发机制在Dom更新之前
    console.log(document.getElementById('titleAccount').innerHTML)
  })
  //侦听密码
  watchEffect(()=>{
    console.log('++++++++++++++++++++++')
    console.log('密码：' + password.value)
    console.log(document.getElementById('titlePassword').innerHTML)
  },
  //更改回调函数触发机制在Dom更新之后
  {flush: 'post'}
  )
  //侦听薪资
  watchPostEffect(()=>{
    console.log('======================')
    console.log('员工薪资：' + emp.salary)
    console.log(document.getElementById('titleSalary').innerHTML)
  })
})

</script>

<!-- 视图区域（view） -->
<template>
  <h1 id="titleAccount">
    账号：<i>{{ account }}</i>
  </h1>  
  账号：<input type="text" v-model="account">
  <hr>
  <h1 id="titlePassword">
    密码：<i>{{ password }}</i>
  </h1>
  密码：<input type="text" v-model="password">
  <hr>
  <h1 id="titleSalary">
    员工薪资：<i>{{ emp.salary }}</i>
  </h1>

  员工薪资：<input type="number" v-model="emp.salary">
  
</template>

<style>
  
</style>

二、停止侦听器

要手动停止一个侦听器，请调用watchEffect或watchPostEffect()返回的函数

App.vue

<script setup>

import { ref,watchEffect,watchPostEffect } from 'vue'

let account = ref('Abc')

let password = ref('123456')

let stopWatchAccount = watchEffect(()=>{
  console.log('---------------------------')
  console.log('账号：' + account.value)
})

let stopWatchPassword = watchPostEffect(()=>{
  console.log('================================')
  console.log('密码：' + password.value)
})

</script>

<!-- 视图区域（view） -->
<template>
   
  账号：<input type="text" v-model="account">
  <button @click="stopWatchAccount">停止账号侦听</button>
  <hr>
  
  密码：<input type="text" v-model="password">
  <button @click="stopWatchPassword">停止密码侦听</button>
  
  
</template>

<style>
  
</style>