自学内容网 自学内容网

Vue3 watch 监视属性

  • 作用:监视数据的变化(和Vue2中的watch作用一致)
  • 特点:Vue3中的watch只能监视以下四种数据
  1. ref定义的数据。
  2. reactive定义的数据。
  3. 函数返回一个值(getter函数)。
  4. 一个包含上述内容的数组。

我们在Vue3中使用watch的时候,通常会遇到以下几种情况:

ref定义的基本类型

<template>
  <div class="person">
    <h2>当前求和{{ sum }}</h2>
    <button @click="changeAddOne">点击加一</button>
  </div>
</template>

<script lang="ts" setup name="Person">
import { computed,watch, ref, watchEffect } from 'vue'

// 数据
let sum = ref(0);

// 方法
function changeAddOne() {
  sum.value++;
}

// 监视 watch(谁,回调函数)
watch(sum, (newValue, oldValue) => {
  console.log('sum发生变化了', newValue, oldValue);
});
</script>

watch监视里面的ref数据不需要.value

主动停止监视:

<template>
  <div class="person">
    <h2>当前求和{{ sum }}</h2>
    <button @click="changeAddOne">点击加一</button>
  </div>
</template>

<script lang="ts" setup name="Person">
import { computed,watch, ref, watchEffect } from 'vue'

// 数据
let sum = ref(0);

// 方法
function changeAddOne() {
  sum.value++;
}

// 监视 watch(谁,回调函数)
const stopWatch = watch(sum, (newValue, oldValue) => {
  console.log('sum发生变化了', newValue, oldValue);
  if(newValue >= 10) {
    stopWatch();
  }
});
</script>

ref定义的对象数据

监视ref定义的【对象类型】数据:直接写数据名,监视的是对象的【地址值】,若想监视对象内部的数据,要手动开启深度监视。

注意:

  • 若修改的是ref定义的对象中的属性,newValueoldValue 都是新值,因为它们是同一个对象。
  • 若修改整个ref定义的对象,newValue 是新值, oldValue 是旧值,因为不是同一个对象了。
<template>
  <div class="person">
    <h2>Person</h2>
    <p>姓名:{{ person.name }}</p>
    <p>年龄:{{ person.age }}</p>
    <button @click="changeAge">年龄+1</button>
  </div>
</template>

<script lang="ts" setup name="Person">
import { computed,watch, ref, watchEffect } from 'vue'

// 数据
let person = ref({
  name: '张三',
  age: 18
});
// 方法
function changeAge() {
  person.value.age++;
}

// 监视 watch(谁,回调函数)
// 监视的是对象的地址值,若想监视对象内部的属性,需要手动开启深度监视 - deep: true
watch(person, (newVal, oldVal) => {
  console.log('watch:', newVal, oldVal);
}, {deep: true, immediate: true});
</script>

watch的参数:

  • 第一个参数:被监视的数据
  • 第二个参数:监视的回调
  • 第三个监视:配置对象(deep, imediate)

reactive定义的对象数据

reactive默认监视开启深度监视。

<template>
  <div class="person">
    <h2>Person</h2>
    <p>姓名:{{ person.name }}</p>
    <p>年龄:{{ person.age }}</p>
    <button @click="changeAge">年龄+1</button>
  </div>
</template>

<script lang="ts" setup name="Person">
import { computed,watch, ref, watchEffect, reactive } from 'vue'

// 数据
let person = reactive({
  name: '张三',
  age: 18
});
// 方法
function changeAge() {
  person.age++;
}

// 监视 watch(谁,回调函数)
// 默认开始深度监视 
watch(person, (newVal, oldVal) => {
  console.log('watch:', newVal, oldVal);
}, {immediate: true});
</script>

监视ref/reactive定义的对象类型中某一个属性

监视refreactive定义的【对象类型】数据中的某个属性,注意点如下:

  1. 若该属性值不是【对象类型】,需要写成函数形式。
  2. 若该属性值是依然是【对象类型】,可直接编,也可写成函数,建议写成函数。

结论:监视的要是对象里的属性,那么最好写函数式,注意点:若是对象监视的是地址值,需要关注对象内部,需要手动开启深度监视。

<template>
  <div class="person">
    <h2>Person</h2>
    <p>姓名:{{ person.name }}</p>
    <p>年龄:{{ person.age }}</p>
    <button @click="changeAge">年龄+1</button>
    <p>车:{{ person.car.c1 }}</p>
    <button @click="changeCarC1">修改第一量车</button>
  </div>
</template>

<script lang="ts" setup name="Person">
import { computed,watch, ref, watchEffect, reactive } from 'vue'

// 数据
let person = reactive({
  name: '张三',
  age: 18,
  car:{
    c1:'宝马',
    c2:'奔驰'
  }
});
// 方法
function changeAge() {
  person.age++;
}
function changeCarC1() {
  person.car.c1 += '---';
}
// 监视 watch(谁,回调函数)
// 默认开始深度监视 
watch(() => {
  return person.age
}, (newVal, oldVal) => {
  console.log('age:', newVal, oldVal);
});
</script>
<template>
  <div class="person">
    <h2>Person</h2>
    <p>姓名:{{ person.name }}</p>
    <p>年龄:{{ person.age }}</p>
    <button @click="changeAge">年龄+1</button>
    <p>车:{{ person.car.c1 }}</p>
    <button @click="changeCarC1">修改第一量车</button>
  </div>
</template>

<script lang="ts" setup name="Person">
import { computed,watch, ref, watchEffect, reactive } from 'vue'

// 数据
let person = reactive({
  name: '张三',
  age: 18,
  car:{
    c1:'宝马',
    c2:'奔驰'
  }
});
// 方法
function changeAge() {
  person.age++;
}
function changeCarC1() {
  person.car.c1 += '---';
}
// 监视 watch(谁,回调函数)
// 默认开始深度监视 
watch(() => {
  return person.car
}, (newVal, oldVal) => {
  console.log('car:', newVal, oldVal);
}, {deep:true});
</script>

多个数据?

<template>
  <div class="person">
    <h2>Person</h2>
    <p>姓名:{{ person.name }}</p>
    <p>年龄:{{ person.age }}</p>
    <button @click="changeAge">年龄+1</button>
    <p>车:{{ person.car.c1 }}</p>
    <button @click="changeCarC1">修改第一量车</button>
  </div>
</template>

<script lang="ts" setup name="Person">
import { computed,watch, ref, watchEffect, reactive } from 'vue'

// 数据
let person = reactive({
  name: '张三',
  age: 18,
  car:{
    c1:'宝马',
    c2:'奔驰'
  }
});
// 方法
function changeAge() {
  person.age++;
}
function changeCarC1() {
  person.car.c1 += '---';
}
// 监视 watch(谁,回调函数)
// 默认开始深度监视 
watch(() => {
  return [person.car, person.age]
}, (newVal, oldVal) => {
  console.log('car:', newVal, oldVal);
}, {deep:true});
</script>

原文地址:https://blog.csdn.net/qq_63432403/article/details/142877035

免责声明:本站文章内容转载自网络资源,如本站内容侵犯了原著者的合法权益,可联系本站删除。更多内容请关注自学内容网(zxcms.com)!