Vue的watch属性监控

最新推荐文章于 2023-09-27 10:45:48 发布
最新推荐文章于 2023-09-27 10:45:48 发布
阅读量716 收藏
点赞数
分类专栏： Vue Vue 文章标签： Vue vue-router watch
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ZZY1078689276/article/details/83855516
版权
Vue 同时被 2 个专栏收录
39 篇文章 1 订阅
订阅专栏
Vue
39 篇文章 4 订阅
订阅专栏

文章目录

  watch可以用来监控程序员想要监控的对象，当这些对象发生改变以后，可以触发回调函数做一些逻辑处理。

示例

监听data中属性的变化

源码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue-router</title>
</head>
<body>
<div id="app">
    <input type="text" v-model="lastName" placeholder="姓">
    <input type="text" v-model="firstName" placeholder="名">
    <h2>拼接：{{fullName}}</h2>
</div>
</body>
<script src="../../../js/vue/vue/2.0/vue.js"></script>
<script src="../../../js/vue/vue-router/2.3.1/vue-router.js"></script>
<script type="application/javascript">
    new Vue({
        el:'#app'
        ,data:{
            firstName:''
            ,lastName:''
            ,fullName:''
        }
        ,watch:{
            'firstName':function () {
                this.fullName = this.lastName + '·' + this.firstName;
            }
            ,'lastName':function () {
                this.fullName = this.lastName + '·' + this.firstName;
            }
        }
    });
</script>
</html>

结果

在这里插入图片描述

分析

  上图中实现的功能是通过watch关键字来监控data中的lastName与firstName属性，由于我们在输入文本框中通过v-model双向数据绑定了该属性，因而当上述属性的值发生变化时，其会自动的触发watch中的回调函数，而上述两个回调函数所执行的功能都是相同的，就是在所监控的属性值发生变化时，重新生成新的fullName属性值，于是结果就如上图中所示。

监听路由中的属性变化

源码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue-router</title>
</head>
<body>
<template id="root">
    <div>
        <!--路由占位-->
        <router-view></router-view>
    </div>
</template>
<template id="register">
    <div>
        <h2>注册页面</h2>
        <input type="text" v-model="uname">
        <button @click="registerMethod">注册</button>
    </div>
</template>
<template id="login">
    <div>
        <h2>登录页面</h2>
        <input type="text" placeholder="请输入登录账号" v-model="loginName">
        <button @click="loginMethod">登录</button>
    </div>
</template>
<template id="welcome">
    <div>
        <h2>欢迎界面</h2>
        <h3 v-show="currentUser != ''">{{currentUser}}</h3>
    </div>
</template>
<div id="app">
    <router-link to="/root/register">注册</router-link> |
    <router-link to="/root/login">登录</router-link>
    <!--路由占位-->
    <router-view></router-view>
</div>
</body>
<script src="../../../js/vue/vue/2.0/vue.js"></script>
<script src="../../../js/vue/vue-router/2.3.1/vue-router.js"></script>
<script type="application/javascript">
    //定义路由根组件
    var App = Vue.extend({});
    //根页面
    var root = Vue.extend({
        template:'#root'
    });
    //欢迎页面
    var welcome = Vue.extend({
        template:'#welcome'
        ,data(){
            return {
                uname:''
                ,currentUser:''
            }
        }
        ,created(){
            //接收传过来的参数，将其存放到本地数据域uname中
            this.uname = this.$route.query.uname;
            //排除非空可能
            if(this.uname != '' && this.uname != 'undefined' && this.uname != undefined){
                this.currentUser = '欢迎您:' + this.uname + "！"
            }
        }
    });
    //定义register页面
    var register = Vue.extend({
        template:'#register'
        ,data(){
            return {
                uname:''
            }
        }
        ,methods:{
            registerMethod(){
                alert('注册成功！用户名为：' + this.uname);
                //跳转到登录页面
                this.$router.push({path:'/root/login',query:{uname:this.uname}});
            }
        }
    });
    //定义login页面
    var login = Vue.extend({
        template:'#login'
        ,data(){
            return {
                uname:''
                ,loginName:''
            }
        }
        ,created(){
            //接收传过来的参数，将其存放到本地数据域uname中
            this.uname = this.$route.query.uname;
        }
        ,methods:{
            loginMethod(){
                //如果没有输入任何信息，则提示输入账号。
                if(this.loginName.trim() == ''){
                    alert('请输入登录账号！');
                    return;
                }
                //如果填写的登录名与注册的账号相一致，则登录成功！
                if(this.uname == this.loginName){
                    alert('登录成功！');
                    //登录成功后跳转到欢迎界面
                    this.$router.push({path:'/root/welcome',query:{uname:this.loginName}});
                } else {
                    alert('登录失败！');
                }
            }
        }
    });
    //设定路由规则
    var router = new VueRouter({
        routes:[
            {
                path:'/'
                ,redirect:'/root/welcome'
            }
            ,{
                path:'/root'
                ,component:root
                ,children:[
                    {
                        path:'register'
                        ,component:register
                    }
                    ,{
                        path:'login'
                        ,component:login
                    }
                    ,{
                        path:'welcome'
                        ,component:welcome
                    }
                ]
            }
        ]
    });
    //开启路由
    new Vue({
        el:'#app'
        ,router:router
        ,watch:{
            '$route':function (newroute,oldroute) {
                console.log('跳转前：' + newroute.path + '      跳转后：' + oldroute.path);
            }
        }
    });
</script>
</html>

结果

在这里插入图片描述

分析

  这里的路由监控代码和上一篇文章中的Vue中路由的传参代码大体相同，只是在上一篇的基础上加上了watch路由监控功能，在watch的回调函数中实现的功能是将变化的路由打印在控制台上。置于其它部分的解说，直接看上一篇文章就可以了。

张侦毅
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue组件watch属性实例讲解
12-29
本文实例为大家分享了vue组件watch属性的具体代码，供大家参考，具体内容如下 <!doctype html> <html> <head> <meta charset=UTF-8> <title>wacth属性</title> [removed]...
Vue.js 中的 watch 属性详解
IT徐师兄
06-07 7048
在 Vue.js 中，watch属性被定义为一个对象，它可以用来监听 Vue 实例中的数据变化。当监听的数据发生变化时，watch属性可以执行指定的回调函数，从而实现对数据变化的响应。watch// 监听一个数据的变化 watch : {// 数据发生变化时执行的操作 } , deep : true , // 是否深度监听 immediate : true , // 是否在组件创建时立即执行回调函数 } , } ,在上述代码中，targetData表示要监听的数据，handler。
watch监听属性和计算属性的区别及用法
m0_46641774的博客
03-28 1126
watch监听属性和计算属性的区别及用法
vue——watch深度监听
weixin_44732078的博客
07-20 1万+
文章目录watch 的方法和属性【1】handler 方法【2】immediate 属性【3】deep 属性深度监听的方法有哪些？【1】使用 deep 属性【2】使用 computed 计算属性监听 watch 的方法和属性 【1】handler 方法 举个????，代码如下：其实我们平时写的 watch 方法都是会去默认执行这个 handler 方法的 watch: { name: { handler(newVal, oldVal) { console.log(newVal, o
Vue-监视属性(watch)简单说明和使用
见证自己学习,成长的记录
03-25 1595
可以先使用技术属性的方式编写天气案例，然后使用监视属性，通过对比，更加清晰明了我们可以使用三木运算符实现对天气的更换，如果属性为真就是炎热，为假就是寒冷但是不建议在插值语法里面做复杂操作，可以使用技术属性操作，利用插值语法获取计算属性的结果使用计算属性完善案例，同时给按钮绑定单击事件去升级案例改变天气代码到这对于这个案例基本就写完了，但是我想分享一个坑和一个使用技巧我们改下代码，注意看，现在已经不用info这个计算属性和isHot这个属性了我们单击按钮，发现vue开发工具对应的数据并没有改变，其实已经改变了
Vue中的数据监视（Watch）
m0_67318246的博客
05-14 197
【代码】Vue中的数据监视（Watch）
详解Vue中watch对象内属性的方法
10-17
主要介绍了详解Vue中watch对象内属性的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue watch关于对象内的属性监听
10-17
主要介绍了vue watch关于对象内的属性监听的相关知识，非常不错，具有一定的参考借鉴价值 ,需要的朋友可以参考下
【Vue3中watch属性详解】
小田是个程序员的博客欢迎你的到来呀~
04-25 2万+
当被监视的属性变化时，回调函数自动调用，进行相关操作，所谓监视属性，就是监测指定的属性是否发生变化，如果发生了，则进行一系列操作，如果没发生变化，则监视属性也不会被触发。
【Vue】监控路由与路由参数, 刷新当前页面数据的几种方法
最新发布
慕白Lee的博客
09-27 8749
在这个示例中，我们在组件的`data`选项中定义了一个`monitoredParam`属性，用于存储监控的参数值。当监控的参数发生变化时，`watch`函数会被触发，将新的参数值保存到组件的`monitoredParam`属性中。在这个示例中，我们在组件的`data`选项中定义了一个`monitoredRoute`属性，用于存储监控的路由信息。当路由发生变化时，`watch`函数会被触发，将新的路由信息保存到组件的`monitoredRoute`属性中。
vue中watch属性(详细)
精通前端技术，了解后端接口
03-06 440
vue中watch属性
‍手把手实现监控实时直播视频流 接入数字大屏 - Vue+乐橙云开放平台
一枚技术小白的博客
09-01 1859
监控实时 直播视频流 web播放 - Vue+乐橙云开放平台
vue数据监测
薛定谔的猫
03-05 1744
{{student.age}} 这个不会报错，因为会去找data中的student，而这个student是一个对象，对象中没有这个属性，只会返回undefined，而vue是不会渲染到页面中的。因为如果你获取到了属性，就要去修改，你要去修改，就要获取值，这样就进入死循环了。1.使用这些API:push()、pop()、shift()、unshift()、splice()、sort()、reverse()特别注意：Vue.set() 和 vm.$set() 不能给vm 或 vm的根数据对象 添加属性！
Vue之watch
热门推荐
qq_46772005的博客
05-16 6万+
一、什么是watch watch:用于监听data里面的数据是否被修改，一旦修改就可以执行一些其他的操作【也是方法】 二、解析watch watch在监听的时候，可以有二次参数，第一次参数为更新的数据，第二个参数为之前的旧数据 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> &l
Vue3监视属性watch详解(附带详细代码与讲解!!!)
m0_67212141的博客
01-30 6791
watch()默认是懒侦听的，即仅在侦听源发生变化时才执行回调函数。第一个参数是侦听器的源。这个来源可以是以下几种：一个函数, 一个返回值 一个ref 一个响应式对象(reactive定义的) ...或是由以上类型的值组成的数组 第二个参数是一个回调函数, 这个回调函数可接收三个参数: 新值(newValue)、旧值(oldValue)、以及一个副作用清理的回调函数 第三个参数是一个可选的参数是一个对象构成, 如:deep(深度监视)、immediate(创建时立即监听一次)等等...
浅谈Vue中监听属性(watch)
He_9a9的博客
09-07 2083
浅谈一下关于vue中watch的作用，使用方法，使用场景以及需要注意的一些细节
Vue中的数据监测
荣山的博客
06-24 261
Vue中的数据监测
Vue中的watch监视
qq_39321234的博客
03-22 249
选项的重要组成部分，用于定义在数据发生变化时要执行的操作。当监听的数据发生变化时，handler() 方法会被自动调用。// 监视message的属性值，若message属性值有变化，执行{}中的操作。watch类似于onchange事件，可以在属性值修改的时候，执行某些操作。watch可以监视简单属性值及其对象中属性值的变化。// 获取到对象的最新属性数据(无法获得旧数据)// 当需要检测对象中属性时才需要开启深度检测。// 开启深度监测，监控对象中的属性值变化。// 监视person对象的值。
十六、vue 中watch属性的使用
快乐de馒头
12-20 186
一、watch的使用 使用watch这个 属性，可以监视 data 中指定数据的变化，然后触发这个 watch 中对应的 function 处理函数。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" cont...
vue的watch属性
09-02
Vue的watch属性是Vue.js框架提供的一种响应式机制，用于监听数据的变化并执行相应的操作。...总之，通过使用watch属性，我们可以轻松地实现数据的监控和相应操作，以便更好地控制和管理Vue组件中的数据流动。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值