vue3 ウォッチ & ウォッチエフェクト

watch 関数と watchEffect 関数は両方ともリスナーであり、データの変更を監視するために使用されます。watch は不活性ですが、watchEffect は不活性ではありません。watch は特定の監視プロパティを指定する必要があり、watchEffect は特定の監視プロパティと構成パラメータを指定する必要はなく、コードを自動的に検出します。依存関係; watch は以前の古い値と新しい値を取得できますが、watchEffect は最新の値のみを取得できます

1.監視監視

1. watch は、ref で定義された単一の応答データを監視します。

<script setup>
import { watch, computed } from 'vue'
const num = ref(11)

watch(
 // 监视的数据：监视 ref 所定义的单个响应式数据
 num,
 // 监视回调函数
 (newVal, oldVal) => {
  console.log(newVal, oldVal)
 },
 // 监视配置：immediate 的默认值是 false，当值为 true 表示立即执行； deep 表示是否深度监听，这里的 deep 无意义
 { immediate: true, deep: true }
)
<script>

2. watch は計算されたプロパティを監視します

<script setup>
import { watch, computed } from 'vue'
const start = ref(1)
const end = computed(() => start.value + 1)

watch(
 // 监视的数据：监视 computed 计算属性
 end,
 // 监视回调函数
 (newVal, oldVal) => {
  console.log(newVal, oldVal)
 },
 // 监视配置：immediate 的默认值是 false，当值为 true 表示立即执行； deep 表示是否深度监听，这里的 deep 无意义
 { immediate: true, deep: true }
)
<script>

3. watch はゲッター関数を監視します

<script setup>
import { watch, computed } from 'vue'
const messages = ref('this is a mesage')

watch(
 // 监视的数据：监视 getter 函数
 () => '返回的消息' + messages.value,
 // 监视回调函数
 (newVal, oldVal) => {
  console.log(newVal, oldVal)
 },
 // 监视配置：immediate 的默认值是 false，当值为 true 表示立即执行； deep 表示是否深度监听，这里的 deep 无意义
 { immediate: true, deep: true }
)
<script>

4. watch は、あらゆるタイプの ref、computed、getter 関数などで構成される配列を監視します。

<script setup>
import { watch, computed } from 'vue'
const msg = ref('this is a msg')
const n = ref(1)
const count = computed(() => n.value + 1)

watch(
 // 监视的数据：监视由 ref、computed、getter函数 等任意类型组成的数组
 [msg, n, count, () => n.value + count.value],
 // 监视的回调函数
 (newVal, oldVal) => {
  console.log(newVal, oldVal)
 },
 // 监视配置：immediate 的默认值是 false，当值为 true 表示立即执行； deep 表示是否深度监听，这里的 deep 无意义
 { immediate: true, deep: true }
)
<script>

5. Watch は reactive で定義された応答オブジェクトを監視しますデフォルトでは深い監視が強制的にオンになっています監視設定が deep:false であっても無効となり、コールバックで oldValue を正しく取得することは困難です。コールバックのoldValとoldValは同じです。

<script setup>
import { watch, reactive } from 'vue'
const obj = reactive({
  name: 'bob',
  age: 18
})

watch(
 // 监视的数据：监视 reactive 所定义的响应式对象
 obj,
 // 监视的回调函数： newVal 和 oldVal 是相同的
 (newVal, oldVal) => {
  console.log(newVal, oldVal)
 },
 // 监视配置：immediate 的默认值是 false，当值为 true 表示立即执行； deep 表示是否深度监听，这里的 deep 强制开启，即使手动设置 false 也无效
 { immediate: true, deep: false }
)
<script>

6. watch は、reactive で定義された応答オブジェクトの特定の属性を監視します。

<script setup>
import { watch, reactive } from 'vue'
const obj = reactive({
  name: 'bob',
  age: 18,
  sex: '男',
  score: 90,
  info: {
    meta: 'meta'
 }
})

watch(
 // 监视的数据：监视 reactive 所定义的响应式对象属性 name, 注意这里要用 getter 函数的形式书写，如果直接写 obj.name 则无效
 () => obj.name,
 // 监视的回调函数
 (newVal, oldVal) => {
  console.log(newVal, oldVal)
 }
)

watch(
 // 监视的数据：监视 reactive 所定义的响应式对象属性 age, 注意这里要用 getter 函数的形式书写，如果直接写 obj.age 则无效 
 () => obj.age,
 // 监视的回调函数
 (newVal, oldVal) => {
  console.log(newVal, oldVal)
 }
)

watch(
 // 监视的数据：监视 reactive 所定义的响应式对象多个属性
 [() => obj.sex, () => obj.score],
 // 监视的回调函数
 (newVal, oldVal) => {
  console.log(newVal, oldVal)
 }
)

watch(
 // 监视的数据：监视 reactive 所定义的响应式对象属性 info, 注意这里要用 getter 函数的形式书写，如果直接写 obj.info 则无效 
 () => obj.info,
 // 监视的回调函数
 (newVal, oldVal) => {
  console.log(newVal, oldVal)
 },
 // 监视配置：immediate 的默认值是 false，当值为 true 表示立即执行； deep 表示是否深度监听，这里的 deep 需要开启，因为 obj.info 是一个对象，如果不开启无法深度监听
 { immediate: true, deep: true }
)
<script>

7. ウォッチは監視を停止し、監視を再開します

<script setup lang="ts">
import { watch, reactive } from 'vue'
const visible = ref<boolean>(false)

let stopWatch = watch(
 visible,
 (newVal, oldVal) => {
  console.log(newVal, oldVal)
 },
 { immediate: true, deep: true }
)
// 停止监听: 将 watch 赋值给一个变量，当达到条件时就调用这个变量来停止监听
setTimeout(() => {
 stopWatch()
}, 3000)

// 重启监听： 将监听器重新赋值给变量
stopWatch = watch(
 visible,
 (newVal, oldVal) => {
  console.log(newVal, oldVal)
 },
 { immediate: true, deep: true }
)
<script>

2.watchEffectモニタリング

<script setup>
import { watchEffect, computed, ref,reactive } from 'vue'
const obj = reactive({ name: 'bob',  age: 18 })
const n = ref(1)
const msg = () => n.value + 1
const count = computed(() => n.value + 1)

// 只要 watchEffect 中涉及到数据发生变化，就会执行此回调
watchEffect(() => {
 const objName = obj.name.value
 const nValue = n.value
 const msgValue = msg.value
 const countValue =  count.value
})


// 取消监听
const stop = watchEffect(() => {
 const objName = obj.name.value
 const nValue = n.value

 setTimeout(() => {
  stop()
 }, 5000)
})

// 重启监听
const stop = watchEffect(() => {
 const objName = obj.name.value
 const nValue = n.value
})
<script>

比較した

比較した	慣性があるのか	パラメータ	値を取得する
時計	遅延があり、値が再度変更された後にリスニング関数が実行されます。	複数のデータバージョンの変更をリッスンできます	パラメータは現在の値と元の値を取得できます
ウォッチエフェクト	怠惰なく即時実行	リスニングコンテンツを渡す必要がなく、コードの依存関係を自動的に検出します	多くのパラメータを渡す必要がなく、元の値を取得することはできません

vue3 ウォッチ & ウォッチエフェクト

1.監視監視

2.watchEffectモニタリング

比較した

おすすめ