Vue3-watch和watchEffect

·  阅读 3969

这是我参与更文挑战的第21天,活动详情查看: 更文挑战

一、watch与watchEffect

watch可以监听一个或多个响应式数据, 一旦数据变化, 就自动执行监听回调, 如果监听rective对象中的属性, 必须通过函数来指定, 如果监听多个数据,需要使用数组来指定,默认初始时不执行回调,当可以通过配置immediate未true,来指定初始时立即执行第一次,通过配置deep为true,来指定深度监听。

watch(prop, (newValue, oldValue) => {})监听新旧属性

<template>
  <div>
      {{name}} <button @click="setName">改变名称</button>
  </div>
</template>

<script lang="ts">
import { defineComponent,ref,watch } from 'vue';

export default defineComponent({
  name: '',
  setup() {
      let name =ref('张三') 
      let setName = () => {
          name.value = '李四'
      }
      watch(name, (newValue,oldValue)=>{
        console.log(newValue,oldValue);
      })
      return {
          name,
          setName,
      }
  }
});
</script>

<style scoped>

</style>
复制代码

2021-06-23-22-38-28.gif

如果是应用对象监听对象中的某个属性

 {{province}}  {{city}} <button @click="setArea">改变城市</button> <br>

let area = reactive({
        province: '广东',
        city: '深圳'
      }) 
      let setArea = () => {
        area.province = '湖南'
        area.city = '长沙'
      }
      // watch引用类型中的一个属性
      watch(()=>area.province,(newValue,oldValue) => {
        console.log(newValue,oldValue);
      })
      return {
          name,
          setName,
          ...toRefs(area),
          setArea
      }
复制代码

2021-06-23-23-01-29.gif

如果要监听多个属性, 以数组的方式传入

2021-06-23-23-04-45.gif

watchEffect的第三个参数, 初始化就立即监听, 和深度监听

2021-06-23-23-08-33.gif

二、watchEffect

watchEffect可以不用直接指定要监听的数据,回调函数中使用的那些响应式数据就监听那些响应式数据,默认初始时就会执行第一次。

2021-06-23-23-20-24.gif 完整代码

<template>
  <div>
    {{ name }} <button @click="setName">改变名称</button> <br />
    {{ province }} {{ city }} <button @click="setArea">改变城市</button> <br />
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, watch, reactive, toRefs , watchEffect } from "vue";

export default defineComponent({
  name: "",
  setup() {
    let name = ref("张三");
    let setName = () => {
      name.value = "李四";
    };
    watch(name, (newValue, oldValue) => {
      console.log(newValue, oldValue);
    });
    let area = reactive({
      province: "广东",
      city: "深圳",
    });
    let setArea = () => {
      area.province = "湖南";
      area.city = "长沙";
    };
    // watch引用类型中的一个属性
    // watch(()=>area.province,(newValue,oldValue) => {
    //   console.log(newValue,oldValue);
    // })

    // 监听多个属性
    // watch([() => area.province, () => area.city], (newValue, oldValue) => {
    //   console.log(newValue, oldValue);
    // });

    // 立即监听和深度监听
    // watch([() => area.province, () => area.city], (newValue, oldValue) => {
    //   console.log(newValue, oldValue);
    // },{
    //     immediate: true,
    //     deep: true
    //   });

    // watchEffect 用到那个属性就会监听那个属性
    watchEffect(() => {
      console.log(area.province,area.city,name.value);
      
    })

    return {
      name,
      setName,
      ...toRefs(area),
      setArea,
    };
  },
});
</script>

<style scoped>
</style>
复制代码
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改