vue3 学习笔记 ——watch监听

前言:

这是个人学习vue3的笔记，文章内容仅自己学习理解。如有错误或者不足地方强烈欢迎各位指正！

vue3学习笔记——setup()
vue3学习笔记——声明响应式数据 ref | reactive

---

watch

接收三个参数

1、要监听的值，这里是overText，
2、回调函数。在函数中你可以获得到新知和老值

首先引入watch

import { reative, watch } from "vue";

写在setup（）中

    setup(){
      
      const data =reactive({
          girl:["宫保鸡丁","鱼香肉丝","大盘鸡"],
          change:"粉红色的回忆",
          // 方法
          changeGirl:(index)=>{
              data.change = data.girl[index] +"点餐完成 |"
              document.title =  data.change
          }
      })
            
     // watch监听
        //  监听的值                      新值       老值
   watch(data.change, (newValue, oldValue) => {
      console.log(`new--->${newValue}`);
      console.log(`old--->${oldValue}`);
      document.title = newValue[0];  //返回的newValue也是一个数组
  });
      return{
        data,
        // girl, changeGirl, change
      }

  }

vue3中 watch可以监听多个值

  watch([data.change,()=>data.girl], (newValue, oldValue) => {
      console.log(`new--->${newValue}`);
      console.log(`old--->${oldValue}`);
      document.title = newValue[0];  //返回的newValue也是一个数组
  });