watch 监听器

<template>
  <div>
    值 : {{ x }}
    <button @click="changX">点击</button>
  </div>
</template>

<script setup>
import { ref,watch } from 'vue'
const x = ref(0)
const  changX=()=> {
  x.value += 1
}
watch(x,(newValue,OldValue)=>{
      console.log('x的变化',newValue, OldValue);
},{deep:true,immediate:true}) //深度监听  和立刻监听

</script>

<style lang="scss" scoped></style>

<template>
  <div>
    值 : {{ x }}
    <button @click="changX">点击</button>
  </div>
</template>

<script setup>
import { ref,watch } from 'vue'
const x = ref(0)
const  changX=()=> {
  x.value += 1
}
watch(x,(newValue,OldValue)=>{
      console.log('x的变化',newValue, OldValue);
},{deep:true,immediate:true}) //深度监听  和立刻监听

</script>

<style lang="scss" scoped></style>

DANGER

推荐用法 函数式写法 官方推荐

// 推荐用法、
watch(()=>x,(newValue,OldValue)=>{
      console.log('x的变化',newValue, OldValue);
},{deep:true})

// 推荐用法、
watch(()=>x,(newValue,OldValue)=>{
      console.log('x的变化',newValue, OldValue);
},{deep:true})