vue3笔记watch监视的五种变化03

<template>

  <div class="about">

    <p>情况一，监事ref的值</p>

    <h1>求和 {{sum}}</h1>

    <button @click="changeSum">++++</button>

  </div>

</template>

<script lang="ts" setup>

import {ref,watch} from 'vue'

let sum = ref(0)

function changeSum(){

  sum.value += 1

}

//sum不能加.value

const shopWatch = watch(sum,(newValue,oldValue)=>{   //情况一，监视ref的基本类型

  console.log('sum的值变化',newValue,oldValue);

  if(newValue >=10){

    shopWatch()   //当watch的值超过10后，停止监视改ref

  }

})

</script>

　　

<template>
  <div class="about">
    <p>情况二，监视ref的基本类型的对象数据</p>
    <p>姓名：{{person.name}}</p>
    <p>年龄：{{person.age}}</p>
    <button @click="changeName">改名字</button>
    <button @click="changeAge">改年龄</button>
    <button @click="changeperson">改人</button>
  </div>
</template>
<script lang="ts" setup>
import {ref,watch} from 'vue'
let person = ref({
  name:'张三',
  age:999,
})
function changeName(){
  person.value.name += '-'
}
function changeAge(){
  person.value.age += 1
}
function changeperson(){
  person.value = {name:'李四',age:90}
}
// 情况二，监视ref的基本类型的对象数据,监视的是对象的地址值，若需要监视内部的值的变化，需要开启深度监视
watch(person,(value)=>{ //可以简写。value，出现的是新值
  console.log('person的变化',value);//会有一种情况，修改person的值的时候，watch指向的地址还是person
},{deep:true,immediate:true}) //deep开启深度监视，immediate立即监视,immediate开启后，页面渲染后马上开启，同时旧的值为undefined，没有值，直到值发生改变
</script>

　　

<template>
  <div class="about">
    <p>情况三，监视reactive的对象数据</p>
    <p>姓名：{{person.name}}</p>
    <p>年龄：{{person.age}}</p>
    <button @click="changeName">改名字</button>
    <button @click="changeAge">改年龄</button>
    <button @click="changeperson">改人</button>
  </div>
</template>
<script lang="ts" setup>
import {reactive,watch} from 'vue'
let person = reactive({
  name:'张三',
  age:990,
})
function changeName(){
  person.name += '-'
}
function changeAge(){
  person.age += 1
}
function changeperson(){
  person = {name:'李四',age:90}   //reactive不可以修改整体对象，所以点击按钮后值没有变化
}
// 情况三，监视reactive的对象数据,默认开启是深度监视，不可关闭的
watch(person,(newValue,oldValue)=>{ 
  console.log('person的变化',newValue,oldValue)
  if(person.age >=1000){
    person.age =1
  }
})
</script>

　　

<template>
  <div class="about">
    <p>watch情况四，</p>
    <p>{{ person.name }}</p>
    <p>{{ person.age }}</p>
    <p>{{ person.car.c1 }}</p>
    <p>{{ person.car.c2 }}</p>
    <button @click="changeName">修改名字</button>
    <button @click="changeAge">修改年龄</button>
    <button @click="changec1">修改第一台车</button>
    <button @click="changec2">修改第二台车</button>
    <button @click="changecar">修改整个车</button>
  </div>
</template>
<script lang="ts" setup>
import { reactive, watch } from 'vue'
let person = reactive({
  name: '张三',
  age: 90,
  car: {
    c1: '奔驰',
    c2: '法拉利'
  }
})
function changeName() {
  person.name += '-'
}
function changeAge() {
  person.age += 1
}
function changec1() {
  person.car.c1 = '劳斯莱斯'
}
function changec2() {
  person.car.c2 = '劳斯莱斯幻影'
}
function changecar() {
  person.car = reactive({
    c1: '额滴',
    c2: '都是额滴'
  })
}
// 情况四，监视响应式对象中的某一个，且该属性是基本类型的，要写成函数式
// watch(()=>person.name,(newValue,oldValue)=>{ //只监视一个值时
//   console.log('person监视',newValue,oldValue);
// })
// 建议加上函数式。这样监视的还是对应的地址值，不然改动整体的时候，会监测不到
watch(()=>person.car,(newValue,oldValue)=>{ //只监视一个值时
  console.log('person.car监视',newValue,oldValue);
})
</script>

　　

<template>
  <div class="about">
    <p>watch情况五，</p>
    <p>{{ person.name }}</p>
    <p>{{ person.age }}</p>
    <p>{{ person.car.c1 }}</p>
    <p>{{ person.car.c2 }}</p>
    <button @click="changeName">修改名字</button>
    <button @click="changeAge">修改年龄</button>
    <button @click="changec1">修改第一台车</button>
    <button @click="changec2">修改第二台车</button>
    <button @click="changecar">修改整个车</button>
  </div>
</template>
<script lang="ts" setup>
import { reactive, watch } from 'vue'
let person = reactive({
  name: '张三',
  age: 90,
  car: {
    c1: '奔驰',
    c2: '法拉利'
  }
})
function changeName() {
  person.name += '-'
}
function changeAge() {
  person.age += 1
}
function changec1() {
  person.car.c1 = '劳斯莱斯'
}
function changec2() {
  person.car.c2 = '劳斯莱斯幻影'
}
function changecar() {
  person.car = reactive({
    c1: '额滴',
    c2: '都是额滴'
  })
}
// 情况五，监测上述的多个数据
watch([()=>person.car,()=>person.name],(newValue,oldValue)=>{ //只监视一个值时
  console.log('person.car监视',newValue,oldValue);
})
</script>