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>

　　

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

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

　　

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34

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

　　

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52

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

　　

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48

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

　　

__EOF__

本文作者：userName
本文链接：https://www.cnblogs.com/wencaiguagua/p/18050726.html
关于博主：评论和私信会在第一时间回复。或者直接私信我。
版权声明：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
声援博主：如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力！