基础--监听器

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

 

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

　　

<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中数据的变化

 

const keyword = useKeywordsStore()

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

　　

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