Vue教学6（侦听属性-watch）

已于 2024-03-05 13:46:38 修改
阅读量502 收藏 11
点赞数 12
分类专栏： Vue 文章标签： html 前端 vue
于 2024-03-04 16:11:09 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/HJERSON/article/details/136453660
版权

二、侦听属性 

        1.天气案例

                在学监视属性前，首先我们来做个小案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.0/vue.js"></script>
</head>
<body>
<div id="root">
    <h2>今天天气很{{info}}</h2>
</div>

<script type="text/javascript">
    const vm = new Vue({
        el: "#root",
        data: {
            ishot:true
        },
        computed: {
            info() {
                // ishot ? "炎热" : "凉爽"  （三元表达式，如果ishot为true，则是炎热，否则为凉爽）
                return this.ishot ? "炎热" : "凉爽"
                }
        }
    })
</script>
</body>
</html>

                         接下来我们再设置一个小按钮进行切换天气的状态

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.0/vue.js"></script>
</head>
<body>
<div id="root">
    <h2>今天天气很{{info}}</h2>
<!--    当点击这个按钮时会调用changeWeather这个函数-->
    <button @click="changeWeather">切换天气</button>
</div>

<script type="text/javascript">
    const vm = new Vue({
        el: "#root",
        data: {
            ishot: true
        },
        computed: {
            info() {
                // ishot ? "炎热" : "凉爽"  （三元表达式，如果ishot为true，则是炎热，否则为凉爽）
                return this.ishot ? "炎热" : "凉爽"
            }
        },
        methods: {
            changeWeather() {
                // 改变ishot为false
                this.ishot = !this.ishot
            }
        }
    })
</script>
</body>
</html>

点按钮后

         2.天气案例_侦听属性

        接下来我们就可以结合刚刚那个案例来做一个监视属性的案例，并运用配置对象watch：{}           注：{} 里要输入的是要侦听的对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.0/vue.js"></script>
</head>
<body>
<div id="root">
    <h2>今天天气很{{info}}</h2>
    <button @click="changeWeather">切换天气</button>
</div>

<script type="text/javascript">
    const vm = new Vue({
        el: "#root",
        data: {
            ishot: true
        },
        computed: {
            info() {
                // ishot ? "炎热" : "凉爽"  （三元表达式，如果ishot为true，则是炎热，否则为凉爽）
                return this.ishot ? "炎热" : "凉爽"
            }
        },
        methods: {
            changeWeather() {
                this.ishot = !this.ishot
            }
        },
        watch:{
            ishot:{
                // handler什么时候调用呢？ 当ishot发生改变时。
                // 并且会把ishot修改前和修改后的值给你，靠参数newValue（修改后的值）和oldValue（修改前的值）
                handler(newValue,oldValue){
                    console.log("ishot被修改了，", newValue, oldValue)
                }
            }
        }
    })
</script>
</body>
</html>

         除了这种写法还有另外一种 vm.$watch 写法来监视：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.0/vue.js"></script>
</head>
<body>
<div id="root">
    <h2>今天天气很{{info}}</h2>
    <button @click="changeWeather">切换天气</button>
</div>

<script type="text/javascript">
    const vm = new Vue({
        el: "#root",
        data: {
            ishot: true
        },
        computed: {
            info() {
                // ishot ? "炎热" : "凉爽"  （三元表达式，如果ishot为true，则是炎热，否则为凉爽）
                return this.ishot ? "炎热" : "凉爽"
            }
        },
        methods: {
            changeWeather() {
                this.ishot = !this.ishot
            }
        },
        // watch:{
        //     ishot:{
        //         // imeediate 默认为false， 初始化时让handler调用一下
        //         // immediate:true,
        //         // handler什么时候调用呢？ 当ishot发生改变时。
        //         // 并且会把ishot修改前和修改后的值给你，靠参数newValue（修改后的值）和oldValue（修改前的值）
        //         handler(newValue,oldValue){
        //             console.log("ishot被修改了，", newValue, oldValue)
        //         }
        //     }
        // }
    })
    vm.$watch("ishot", {
        handler(newValue, oldValue) {
            console.log("ishot被修改了，", newValue, oldValue)
        }
    })
</script>
</body>
</html>

总结：监视属性watch：

        1.当被监视的属性发生变化时，回调函数会自动调用，进行相关操作。

        2.监视的属性必须存在，才能进行监视！！！

        3.监视两种写法：

                （1）new Vue时传入watch这个配置对象

                （2）通过vm.$watch监视 

        3.天气案例_深度监视（deep）

 讲了基础的监视属性后，接下来我们开始来学习深度监视的运用，这次来监视多层级关系。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.0/vue.js"></script>
</head>
<body>
<div id="root">
    <h2>今天天气很{{info}}</h2>
    <button @click="changeWeather">切换天气</button>
    <br>
    <!--    新设置一个容器，并用watch来监视-->
    <h3>今天的温度为{{numbers.a}}</h3>
    <button @click="numbers.a++">点击加1度</button>
</div>

<script type="text/javascript">
    const vm = new Vue({
        el: "#root",
        data: {
            ishot: true,
            numbers: {
                a: 30,
                b: 20
            }
        },
        computed: {
            info() {
                // ishot ? "炎热" : "凉爽"  （三元表达式，如果ishot为true，则是炎热，否则为凉爽）
                return this.ishot ? "炎热" : "凉爽"
            }
        },
        methods: {
            changeWeather() {
                this.ishot = !this.ishot
            }
        },
        watch: {
            ishot: {
                handler(newValue, oldValue) {
                    console.log("ishot被修改了，", newValue, oldValue)
                }
            },
            // 监视 a 的值是否改变
            a: {
                handler(newValue, oldValue) {
                    console.log("a被修改了，", newValue, oldValue)
                }
            }
        }
    })
</script>
</body>
</html>

         由于a再numbers内层，那会不会是watch要检测的值有问题呢？那我们将a改为numbers后再看看

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.0/vue.js"></script>
</head>
<body>
<div id="root">
    <h2>今天天气很{{info}}</h2>
    <button @click="changeWeather">切换天气</button>
    <br>
    <!--    新设置一个容器，并用watch来监视-->
    <h3>今天的温度为{{numbers.a}}</h3>
    <button @click="numbers.a++">点击加1度</button>
</div>

<script type="text/javascript">
    const vm = new Vue({
        el: "#root",
        data: {
            ishot: true,
            numbers: {
                a: 30,
                b: 20
            }
        },
        computed: {
            info() {
                // ishot ? "炎热" : "凉爽"  （三元表达式，如果ishot为true，则是炎热，否则为凉爽）
                return this.ishot ? "炎热" : "凉爽"
            }
        },
        methods: {
            changeWeather() {
                this.ishot = !this.ishot
            }
        },
        watch: {
            ishot: {
                handler(newValue, oldValue) {
                    console.log("ishot被修改了，", newValue, oldValue)
                }
            },
            // 监视 a 的值是否改变
            numbers: {
                handler(newValue, oldValue) {
                    console.log("a被修改了，", newValue, oldValue)
                }
            }
        }
    })
</script>
</body>
</html>

         这个时候就要使用 deep 这个配置项就可以搞定了

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.0/vue.js"></script>
</head>
<body>
<div id="root">
    <h2>今天天气很{{info}}</h2>
    <button @click="changeWeather">切换天气</button>
    <br>
    <!--    新设置一个容器，并用watch来监视-->
    <h3>今天的温度为{{numbers.a}}</h3>
    <button @click="numbers.a++">点击加1度</button>
    <h3>今天这个温度有{{numbers.b}}人出门</h3>
    <button @click="numbers.b++">点击加1度</button>
</div>

<script type="text/javascript">
    const vm = new Vue({
        el: "#root",
        data: {
            ishot: true,
            numbers: {
                a: 30,
                b: 20
            }
        },
        computed: {
            info() {
                // ishot ? "炎热" : "凉爽"  （三元表达式，如果ishot为true，则是炎热，否则为凉爽）
                return this.ishot ? "炎热" : "凉爽"
            }
        },
        methods: {
            changeWeather() {
                this.ishot = !this.ishot
            }
        },
        watch: {
            ishot: {
                handler(newValue, oldValue) {
                    console.log("ishot被修改了，", newValue, oldValue)
                }
            },
            numbers: {
                // 监视多级结构中所有属性的变化
                deep:true,
                handler(newValue, oldValue) {
                    console.log("numbers被修改了，", newValue, oldValue)
                }
            }
        }
    })
</script>
</body>
</html>

        如若我只想监视numbers下a或者b，则可以用  "numbers.a":{}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.0/vue.js"></script>
</head>
<body>
<div id="root">
    <h2>今天天气很{{info}}</h2>
    <button @click="changeWeather">切换天气</button>
    <br>
    <!--    新设置一个容器，并用watch来监视-->
    <h3>今天的温度为{{numbers.a}}</h3>
    <button @click="numbers.a++">点击加1度</button>
    <h3>今天这个温度有{{numbers.b}}人出门</h3>
    <button @click="numbers.b++">点击加1度</button>
</div>

<script type="text/javascript">
    const vm = new Vue({
        el: "#root",
        data: {
            ishot: true,
            numbers: {
                a: 30,
                b: 20
            }
        },
        computed: {
            info() {
                // ishot ? "炎热" : "凉爽"  （三元表达式，如果ishot为true，则是炎热，否则为凉爽）
                return this.ishot ? "炎热" : "凉爽"
            }
        },
        methods: {
            changeWeather() {
                this.ishot = !this.ishot
            }
        },
        watch: {
            ishot: {
                handler(newValue, oldValue) {
                    console.log("ishot被修改了，", newValue, oldValue)
                }
            },
            // 监视多级结构中某个属性的变化
            "numbers.a": {
                handler(newValue, oldValue) {
                    console.log("a被修改了，", newValue, oldValue)
                }
            }
        }
    })
</script>
</body>
</html>

 总结：

        1.Vue中的watch默认不监视内部值的改变（一层）

        2.配置deep:true可以监视对象内部值改变（多层）

备注：

        （1）Vue自身可以检测对象内部值的改变（“numbers.a”:{}），而Vue提供的watch默认不可以

        （2）使用watch时根据数据的具体结构，决定是否采用采用深度监视

鸠桉
关注
  • 12
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
Vue 侦听属性
彳亍
09-09 329
简介 构造器的 watch 选项，用于定义 Vue 实例的侦听属性。 侦听属性可以用来观察和响应 Vue 实例上的数据变动。 当你有一些数据需要随着其它数据变动而变动时，你很容易滥用 watch——特别是如果你之前使用过 AngularJS。然而，通常更好的做法是使用计算属性而不是命令式的 watch 回调。 细想一下这个例子： <div id="demo">{{ full...
Vue 2.0 侦听器 watch属性代码详解
10-16
主要介绍了Vue 2.0 侦听器 watch属性代码详解，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值 ,需要的朋友可以参考下
Vue中的侦听器 --watch
qq_45954420的博客
03-06 305
一、侦听器 虽然计算属性在大多数情况下更合适，但有时也需要一个自定义的侦听器。这就是为什么 Vue 通过 watch 选项提供了一个更通用的方法，来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。 二、监视的两种写法 1.new vue时传入watch配置 2.通过vm.$watch监视 <div id="root"> <h1>今天天气很{{info}}</h1> <button @cli
Vue-watch 侦听对象属性
qq_45050686的博客
11-30 9527
Vue、watch、对象属性变化
Vue 侦听属性(watch)
半夏_2021的博客
06-16 625
Vue 侦听属性(watch)
Vue中的侦听属性watch
m0_59345890的博客
09-04 404
要侦听那个数据，就在watch内写方法，方法名必须与数据名相同，在方法内就写对应的处理程序；当数据发生变化时就触发；这一点与计算属性（computed）相似，只有数据发生变化时才触发，但是侦听器属性，比计算属性计算效率消耗大。方法名msg就是监听的data内的msg属性，a1接收每次msg改变时的那个值，a2为未改变时msg的值。特殊：当data内的数据是个对象时，侦听这个对象但是修改的是对象内的值是否会触发侦听呢？需求：当我们在一个框内输入金额时，另一个框内对应的显示对应货币的转换的金额。
Vue3----watch函数
weixin_52053631的博客
06-29 3721
侦听一个或多个响应式数据的变化，数据变化时执行回调函数两个额外参数：1. immediate（立即执行） 2.deep（深度监听）：在侦听器创建时立即触发回调，响应式数据变化之后继续执行回调默认机制：通过watch监听的ref对象默认是浅层监听的，，需要开启deep选项1.导入watch函数2. 执行watch函数传入要侦听的响应式数据（ref对象）和回调函数。
Vue-watch 侦听器
qq_40792800的博客
11-01 609
定义 在官方文档里面是这么定义的 就是说当属性变化的时候，我们能通过 watch 来监听到属性的变化，从而来执行异步操作或者是耗费性能的操作 常见使用 1、首先，侦听器也是一个配置对象，可以监听多个属性的改变。 2、键就是需要监听的属性，值也同时是一个对象，既可以是data中的属性，也可以是计算属性。 3、对象内部存在几个常用的属性和方法( handler () {} 、deep、immediate) 4、handler () {} ：就是监听函数，能接收两个参数，一个是 newV...
Vue中的事件监听--watch
weixin_51473175的博客
06-06 915
vue中的事件监听watch、watchEffect
Vue----watch 侦听器
emmmm.....
04-25 1223
文章目录1 watch 侦听器2 watch 侦听器的基本语法3 使用 watch 检测用户名是否可用安装axios出现报错：代码4 immediate 选项5 deep 选项未加deep加deep6 监听对象单个属性的变化7 计算属性 vs 侦听器 1 watch 侦听器 watch 侦听器允许开发者监视数据的变化，从而针对数据的变化做特定的操作。 例如，监视用户名的变化并发起请求，判断用户名是否可用。 2 watch 侦听器的基本语法 开发者需要在 watch 节点下，定义自己的侦听器。 <te
Vue2-02 computed计算属性、watch侦听器
01-18
在Vue.js框架中，`computed`属性和`watch`侦听器是两个非常重要的概念，它们主要用于处理数据的动态变化并实现复杂的逻辑。在Vue2中，这两个特性为开发者提供了强大的响应式数据处理能力。 首先，我们来深入理解`...
深入浅析Vue.js计算属性和侦听器
10-18
在Vue.js中，计算属性和侦听器是两个重要的概念，它们帮助我们处理数据的复杂逻辑和响应性。让我们深入探讨这两个特性。 **一、计算属性** 计算属性是Vue.js中用于处理和组合现有数据的便捷方式。它们提供了一个在...
解决vue无法侦听数组及对象属性的变化问题
10-15
然而，对于数组和对象属性的某些特定操作，Vue可能无法正确地侦听到这些变化，导致视图不更新。本文将详细介绍如何解决这个问题。 ### 一、数组的变化 1. **可监听的情况**： - 使用`push()`、`splice()`、整体...
Web前端：HTML篇（一）
sjb2274540432的博客
07-22 1042
超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。您可以使用 HTML 来建立自己的 WEB 站点，HTML 运行在浏览器上，由浏览器来解析。
html实现酷炫美观的可视化大屏(十种风格示例，附源码)
最新发布
xcLeigh
07-25 2316
html实现酷炫美观的可视化大屏(十种风格示例，附源码)，大屏源码，可视化大屏模板源码，html可视化大屏源码下载，内含十种不同风格的大屏可视化代码，详细的讲解，酷炫的线条，美观的设计，让图文图表结合的更融洽。兼容各种大屏，调整页面到合适的分辨率，F12全屏观看。各种风格都有，代码上手简单，代码独立，可以直接使用。也可直接预览效果。
Html在图片上划一个矩形区域，并且获取区域坐标
zxb11c的博客
07-25 205
【代码】Html在图片上划一个矩形区域，并且获取区域坐标。
HTML常见标签——超链接a标签
weixin_64294248的博客
07-23 707
a>标签用于做跳转、导航，是双标签，记作，它是行内标签，不可以直接设置宽度高度，特殊的是，作为行内标签，它可以嵌套文本、行内元素、块级元素。
前端开发知识(一)-html
modi000的博客
07-24 600
2.前端开发的三剑客：html、css、javascript。Element（饿了么开发的） ：前端组件库。Vue可以简化JavaScpript流程。Ngix：前端服务器。
vue的侦听属性和计算属性
08-12
Vue.js中的侦听属性（Watch）和计算属性（Computed）都是用于响应数据变化的机制，但它们的使用场景和实现方式略有不同。 侦听属性（Watch）用于监听数据的变化，并在数据变化时执行相应的操作。你可以监听一个或多...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值