Vue中watch使用方法详解
水星记_ 人气:0前言
说到 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
无疑是最好的选择。
加载全部内容