Vue中watch使用方法详解
前言
说到 vue 中的 watch 方法，大家可能首先想到，它是用来监听数据的变化，一旦数据发生变化可以执行一些其他的操作。但是 watch 的操作可不止如此，本章就带大家一起深剖细析 vue 中的 watch 方法。
watch
因为 vue 是双向数据绑定，所以当页面数据发生变化时，我们通过 watch 方法就可以拿到数据变化前和变化后的值，从而做一系列操作，下面我们通过一个简单的例子来解释。
先看下面这段代码
<template>
<div>
<input type="text" v-model="nameModel" />
</div>
</template>
<script>
export default {
data() {
return {
nameModel: "",
};
},
watch: {
nameModel() {
console.log("触发打印");
},
},
};
</script>
实现效果
immediate和handler
问：immediate 和 handler 是干嘛用的？
在回答这个问题之前，我们先回到上面的例子中，如果我想让值第一次绑定的时候就监听函数该怎么办？这就牵扯到 watch 的一个特点，就是当值第一次绑定的时候，不会执行监听函数，只有值发生改变才会执行。那如果我们就是需要在最初绑定值的时候也执行函数，举个最常见的例子，当父组件向子组件动态传值时，子组件 props 首次接收父组件传来的默认值时，也需要执行函数，这个时候就需要用到 immediate 属性。
接着看下面这段代码
父组件
<template>
<div>
<Child :message="informtion"></Child>
</div>
</template>
<script>
import Child from "./subassembly/seed.vue";
export default {
data() {
return {
informtion: "默认传递给子组件的数据",
};
},
components: {
Child,
},
};
</script>
子组件
<template>
<h2>接收父组件值：{{ value }}</h2>
</template>
<script>
export default {
data() {
return {
value: "",
};
},
props: {
message: {
type: String,
default: "",
},
},
watch: {
message: {
handler(newName, oldName) {
this.value = newName;
},
immediate: true, //首次绑定的时候，是否执行 handler
},
},
};
</script>
当 immediate 为 false 时
当 immediate 为 true 时
通过上面的例子我们不难推出：immediate 表示在 watch 中首次绑定的时候，是否执行 handler，值为 true 时表示在 watch 中声明的时候，就立即执行 handler 方法，反之，则和一般使用 watch 一样，在数据发生变化的时候才执行 handler。
注意：handler 有 2 个参数。第一个是 newValue，第二个是 oldValue，分别表示新的值和旧的值。
deep
deep 其实就是深度监听，那可能又有同学要问了，深度监听又是啥？试想一下，当你监听的目标是一个对象时，当对象中的 a 值发生变化，在不使用 deep 的前提下，是不会触发 handler 函数的，因为这个对象并没有改变，再通俗的讲就是对象中的 a 并没有变成 b 或者是消失了，你只是修改了 a 的值，但是 a 的值是 a 的，并不是对象的，并不能代表对象的改变。
再看下面这段代码
<template>
<div>
<input type="text" v-model="forms.nameModel" />
</div>
</template>
<script>
export default {
data() {
return {
forms: {
nameModel: "",
},
};
},
watch: {
forms: {
handler(newName, oldName) {
console.log("触发打印");
},
},
},
};
</script>
实现效果
可以看到控制台并没有打印任何结果，再回到上面的问题，deep 属性就是用来解决这个问题的。当你需要监听一个对象的改变时，普通的 watch 方法无法监听到对象内部属性的改变，只有 data 中的数据才能够监听到变化，此时就需要 deep 属性对对象进行深度监听。
正确的写法
通过设置 deep: true 则可以监听到对象中属性值的变化。
<template>
<div>
<input type="text" v-model="forms.nameModel" />
</div>
</template>
<script>
export default {
data() {
return {
forms: {
nameModel: "",
},
};
},
watch: {
forms: {
handler(newName, oldName) {
console.log("触发打印");
},
deep: true,
},
},
};
</script>
实现效果
有同学可能要问了，对象中有 n 个属性，但是我只想监听某一个属性值的变化该怎么写呢？其实有一个非常简单的方法：使用字符串的形式监听对象属性值变化。
实例
<template>
<div>
<input type="text" v-model="forms.nameModel" />
</div>
</template>
<script>
export default {
data() {
return {
forms: {
nameModel: "",
},
};
},
watch: {
"forms.nameModel": {
handler(newName, oldName) {
console.log("触发打印");
},
},
},
};
</script>
实现效果
注意： 数组（一维、多维）的变化不需要通过深度监听，对象数组中对象的属性变化则需要深度监听。
拓展
computed 和 watch 区别
两者最明显的区别在于 watch 是观察某一个属性的变化，从而重新计算属性的值；而 computed 是通过所依赖的属性的变化计算属性值，在绝大部分情况下，computed 和 watch 没有明显区别，但如果是在数据变化的同时进行异步操作，那么 watch 无疑是最好的选择。
到此这篇关于Vue中watch使用方法详解的文章就介绍到这了,更多相关Vue watch内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
resetFields 对整个表单进行重置,将所有字段值重置为空并移除校验结果,下面这篇文章主要给大家介绍了关于vue中resetFields重置初始值不生效的原因的相关资料,需要的朋友可以参考下2023-03-03
这篇文章主要介绍了vue2.x background:url()的踩坑记录，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
这篇文章主要介绍了vue函数@click.prevent的使用解析，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
Vue3.0相比较于之前的版本更快、更小、更易于维护、更贴近原生、对开发者更友好，本文就Vue3.0进行详细介绍，需要了解的小伙伴可以参考一下这篇文章2021-09-09
这篇文章主要介绍了vue数组去重的12种方法示例全面详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-07-07
这篇文章主要介绍了vue-mounted中如何处理data数据方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
打开尤大大的GitHub，发现多了个叫 petite-vue 的东西,Vue3 和 Vite 还没学完呢，又开始整新东西了？本文就来介绍一下2021-07-07
这篇文章主要为大家详细介绍了Vue-pdf实现在线预览PDF文件，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-05-05
今天小编就为大家分享一篇关于Vuex中的State使用介绍，小编觉得内容挺不错的，现在分享给大家，具有很好的参考价值，需要的朋友一起跟随小编来看看吧2019-01-01
在我们前端日常开发中经常会遇到判断一个字符串中是否包含某个元素的需求,下面这篇文章主要给大家介绍了关于Vue判断字符串(或数组)中是否包含某个元素的多种方法,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-09-09
最新评论