Vue 监听状态 watch 与监听状态 watchEffect

监听状态 watch

watch 函数用于监听响应式数据的变化。


使用 watch 函数监听基于 ref 创建的响应式数据 (基本数据类型)。

javascript 复制代码
import { ref, watch } from "vue"
export default {
  setup() {
    const text = ref("")
    watch(text, (current, previous) => {
      console.log("current", current)
      console.log("previous", previous)
    })
    return { text }
  },
}
<template>
  <input type="text" v-model="text" />
</template>
javascript 复制代码
<template>
  <input type="text" v-model="text" />
</template>

使用 watch 监听基于 ref 创建的响应式数据 (引用数据类型)。

javascript 复制代码
import { ref, watch } from "vue";
​
export default {
  name: "App",
  setup() {
    const person = ref({ name: "张三" });
    watch(person.value, (current) => {
      console.log(current);
    });
  },
};
<template>
  <button @click="onClickHandler">{{ person.name }}</button>
</template>

使用 watch 监听响应式数据内部的具体属性 (基本数据类型)

javascript 复制代码
import { ref, watch } from "vue";
​
export default {
  name: "App",
  setup() {
    const person = ref({ name: "张三" });
    watch(
      () => person.value.name,
      (current) => {
        console.log(current);
      }
    );
    return { person };
  },
};

使用 watch 监听响应式数据内部的具体属性 (引用数据类型)

javascript 复制代码
<template>
  <p>{{ person.brand.title }} {{ person.name }}</p>
  <button @click="changeBrandTitle">title</button>
  <button @click="changeName">name</button>
</template>
​
<script>
import { ref, watch } from "vue";
export default {
  name: "App",
  setup() {
    const person = ref({ brand: { title: "宝马" }, name: "张三" });
    const changeBrandTitle = () => {
      person.value.brand.title = "奔驰";
    };
    const changeName = () => {
      person.value.name = "李四";
    };
    watch(person.value.brand, (current) => {
      console.log(current);
    });
    return { person, changeBrandTitle, changeName };
  },
};
</script>

使用 watch 监听基于 reactive 创建的响应式数据。

javascript 复制代码
import { reactive, watch } from "vue"
export default {
  setup() {
    const person = reactive({ name: "张三" })
    const onClickHandler = () => {
      person.name = "李四"
    }
    watch(person, (current, previous) => {
      console.log(current)
    })
    return { person, onClickHandler }
  },
}
<template>
  {{ person.name }}
  <button @click="onClickHandler">button</button>
</template>

javascript 复制代码
使用 watch 监听多个值的变化

import { ref, watch } from "vue"
export default {
  setup() {
    const firstName = ref("")
    const lastName = ref("")
    watch([firstName, lastName], current => {
      console.log(current)
    })
    return { firstName, lastName }
  },
}
<template>
  <input type="text" v-model="firstName" />
  <input type="text" v-model="lastName" />
</template>

使 watch 监听数据在初始时执行一次

javascript 复制代码
import { ref, watch } from "vue"
export default {
  setup() {
    const firstName = ref("hello")
    const lastName = ref("world")
    watch(
      [firstName, lastName],
      current => {
        console.log(current)
      },
      {
        immediate: true,
      }
    )
    return { firstName, lastName }
  },
}

监听状态 watchEffect

watchEffect 和 watch 一样,都是用于监听响应式数据的变化。

区别(重点)

watchEffect 只关心数据的最新值,不关心旧值是什么,而且 watchEffect 默认会在初始时执行一次。

javascript 复制代码
import { ref, watchEffect } from "vue";

export default {
  name: "App",
  setup() {
    const firstName = ref("");
    const lastName = ref("");
    watchEffect(() => {
      console.log(firstName.value);
      console.log(lastName.value);
    });
    return { firstName, lastName };
  },
};
javascript 复制代码
<template>
  <input type="text" v-model="firstName" />
  <input type="text" v-model="lastName" />
</template>
相关推荐
gqkmiss4 分钟前
Chrome 浏览器插件获取网页 iframe 中的 window 对象
前端·chrome·iframe·postmessage·chrome 插件
m0_748247552 小时前
Web 应用项目开发全流程解析与实战经验分享
开发语言·前端·php
m0_748255023 小时前
前端常用算法集合
前端·算法
真的很上进3 小时前
如何借助 Babel+TS+ESLint 构建现代 JS 工程环境?
java·前端·javascript·css·react.js·vue·html
web130933203983 小时前
vue elementUI form组件动态添加el-form-item并且动态添加rules必填项校验方法
前端·vue.js·elementui
NiNg_1_2343 小时前
Echarts连接数据库,实时绘制图表详解
前端·数据库·echarts
如若1234 小时前
对文件内的文件名生成目录,方便查阅
java·前端·python
滚雪球~5 小时前
npm error code ETIMEDOUT
前端·npm·node.js
沙漏无语5 小时前
npm : 无法加载文件 D:\Nodejs\node_global\npm.ps1,因为在此系统上禁止运行脚本
前端·npm·node.js
supermapsupport5 小时前
iClient3D for Cesium在Vue中快速实现场景卷帘
前端·vue.js·3d·cesium·supermap