vue3学习笔记-setup中使用watch

项目场景

vue3+ts

---

问题描述

在vue3 setup语法糖中使用watch监听数据变化

准备工作

<script lang="ts" setup>
import {ref, onMounted, watch} from "vue";
let flag = ref<boolean>(true)
let flag2 = ref<boolean>(true)

onMounted(() => {
  setTimeout(() => {
    flag.value = !flag.value
    flag2.value = !flag2.value
  }, 2000)
});

//监听一个值 
//watch(要监听的值,(新值,旧值)=>{......})
watch(flag, (curr, old) => {
  console.log(curr, old) //false true
})

//监听多个值 
//watch([监听值1，监听值2,...],([值1-新值，值2-新值,...],[值1-旧值,值2-旧值,...])=>{})
watch(
  [flag, flag2],
  ([curr, curr2], [old, old2]) => {
    console.log('flag', curr, old) // flag false true
    console.log('flag2', curr2, old2) // flag2 false true
  }
)
</script>

输出结果

---