基础--监听器

watch 的作用是用于监测响应式属性的变化，并在属性发生改变时，执行特定的操作

 

?

1 2 3 4 5 6 7 8 9 10 11

const vm = new Vue({   data: {     message: 'Hello'   },   watch: {     // 监听message的变化     message(newValue, oldValue) {       console.log('message发生了变化:', newValue, oldValue);     }   } })

　　

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

<template>   <div>     <p>{{ message }}</p>     <button @click="updateMessage">Update Message</button>   </div> </template>   <script setup> import { ref, watch } from 'vue';   // 使用ref()创建响应式数据 const message = ref('Hello');   // 创建监听器 watch(message, (newValue, oldValue) => {   console.log('message发生了变化:', newValue, oldValue); });   // 更新消息 const updateMessage = () => {   message.value = 'Updated message'; }; </script>

　　

pinia监听缓存数据变化

$subscribe函数用于监听store中数据的变化

 

?

1 2 3 4 5 6 7 8

const keyword = useKeywordsStore()   // 监听缓存数据又变化执行 keyword.$subscribe(() => {   if (keyword.data) {     visible()   } })

　　

?

1	visible()是一个函数，监听数据变化，然后执行函数