【 Vue全家桶 · Vue（六）】Vue框架中的监听机制之二 —— 侦听器watch

最新推荐文章于 2024-08-25 21:14:37 发布

原创

最新推荐文章于 2024-08-25 21:14:37 发布 · 744 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue #javascript

文章目录

上一篇中详细介绍了Vue框架中的计算属性computed，我们说它常用来做数据监听，比如典型的多对一情况 —— 多数据监听和深度监听。

一. watch适用场景

但这并不代表着计算属性computed可以胜任所有的监听场景。其实Vue框架中还有一种更通用，更正统的监听方式 —— 监听器watch。理论上他可以完成所有的监听工作。

监听器watch的监听适用于一对多的场景，即某个组件内的一个数据的改变会影响其他多个数据。

在这里插入图片描述

❀ 拓展一下❀

区别于计算属性computed的多对一场景，有关计算属性computed的讲解请看上一篇：

【Vue学习笔记 · 基础篇(五)】Vue框架中的监听机制之一 —— 计算属性computed

侦听器watch有两种书写形式，分别为：

Vue实例内部属性watch
Vue实例方法vm.$watch

这两种写法本质上是等价的，需要的参数也一模一样，唯一的区别就是书写位置不同而带来的格式上的差别。所以接下来的讲解就重点以Vue实例内部属性watch 形式为例，之后vm.$watch那一部分会给出对应的等价形式，可以对比选择。

二. Vue实例内部属性 watch

2.1 基础形式

watchObject（监听对象 —— data中的属性（Number / String / Boolean / Array））
callback —— 回调函数
- newVal（非必须）—— 改变后的新值（可单选此项）
- oldVal（非必须）—— 改变前的旧值

new Vue({
   
   
    el:"#app",
    data:{
   
   
        watchObject:''
    },
    watch:{
   
   
        watchObject:function(newVal,oldVal){
   
   
        // something...
        }
    }
})

来看几个简单的例子：

① 拿到改变前后的值：

比如我们在页面中添加一个输入框，使用v-model指令双向绑定username属性。我们希望监听该输入框的输入情况：每次输入一个字符，就在控制台打印出本次输入前后的值。

<div id="app">
    <input type="text" v-model="userName">
</div>

let vm = new Vue({
   
   
    el:"#app",
    data:{
   
   
        username:''
    },
    watch:{
   
   
        username:function(newName,oldName){
   
   
            console.log(newName,oldName)
        }
    }
})

在这里插入图片描述
② 调用methods中的方法：

根据实际需求不同，我们也可以选择不同的参数配置。比如拿到当前变化之后的值，作为参数调用methods中的方法func：

new Vue({
   
   
    el:"#app",
    data:

最低0.47元/天解锁文章