Vue的watch属性监控

痛定思痛。 2022-04-18 03:48 163阅读 0赞

### 文章目录 ###

*  示例
 *   *  监听data中属性的变化
     *   *  源码
         *  结果
         *  分析
     *  监听路由中的属性变化
     *   *  源码
         *  结果
         *  分析

`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>

### 结果 ###

![在这里插入图片描述][20181108095225813.gif]

### 分析 ###

上图中实现的功能是通过`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>

### 结果 ###

![在这里插入图片描述][20181108095905104.gif]

### 分析 ###

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

[20181108095225813.gif]: /images/20220418/86a93902feea4da9996e225da9714d6e.png
[20181108095905104.gif]: /images/20220418/e35ca53949264d62ab754fd1220895d9.png
[Vue]: https://blog.csdn.net/ZZY1078689276/article/details/83827530