Vue的watch属性

Vue的watch属性可以用来监听data属性中数据的变化



<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <script src="lib/vue.min.js"></script>

        <script src="lib/vue-router-3.0.1.js"></script>

    </head>

    <body>

        <div id="app">

            <input type="text" v-model="firstname" />

        </div>

        <script type="text/javascript">

            var vm = new Vue({

                el:"#app",

                data:{

                    firstname:"",

                    lastname:""

                },

                methods:{},

                watch:{

                    firstname:function(){

                        console.log(this.firstname)

                    }

                }

            })

        </script>

    </body>

</html>

可以从上述代码中实践得知，输入框内的值变化多少次，控制台就会打印多少次

同时还可以直接在监听的function中使用参数来获取新值与旧值



                watch:{

                    firstname:function(newValue,OldValue){

                        console.log(newValue);

                        console.log(OldValue);

                    }

                }

其中第一个参数是新值，第二个参数是旧值

同时Watch还可以被用来监听路由router的变化，只是这里的监听的元素是固定的



<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <script src="lib/vue.min.js"></script>

        <script src="lib/vue-router-3.0.1.js"></script>

        <style type="text/css">

        </style>

    </head>

    <body>

        <div id="app">

            <!--

                由于Vue-router的hash匹配原则所以我们需要在原定义的路径上加一个#号

            -->

<!--            <a href="#/login">登录</a>

            <a href="#/register">注册</a>-->

            <router-link to="/login" tag="span">登录</router-link>

            <router-link to="/register">注册</router-link>

            <router-view></router-view>

        </div>

    </body>

    <script>

        var login={

            template:'<h1>登录组件</h1>'

        }

        var register={

            template:'<h1>注册组件</h1>'

        }

        var routerObj = new VueRouter({

            routes:[

            //此处的component只能使用组件对象，而不能使用注册的模板的名称

                {path:"/login",component:login},

                {path:"/register",component:register}

            ]

        })

        var vm = new Vue({

            el:'#app',

            data:{

            },

            methods:{

            },

            router:routerObj,//将路由规则对象注册到VM实例上

            watch:{

                '$route.path':function(newValue,OldValue){

                        console.log(newValue);

                        console.log(OldValue);

                }

            }

        })

    </script>

</html>

计算属性Computed的作用

computed属性的作用与watch类似，也可以监听属性的变化



<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <script src="lib/vue.min.js"></script>

        <script src="lib/vue-router-3.0.1.js"></script>

    </head>

    <body>

        <div id="app">

            <input type="text" v-model="firstname" />

            <input type="text" v-model="lastname" />

            <input type="text" v-model="fullname" />

        </div>

        <script type="text/javascript">

            var vm = new Vue({

                el:"#app",

                data:{

                    firstname:"",

                    lastname:""

                },

                methods:{},

/*                watch:{

                    firstname:function(newValue,OldValue){

                        console.log(newValue);

                        console.log(OldValue);

                    }

                }*/

                computed:{

                    fullname:function(){

                        return this.firstname +"-"+this.lastname

                    }

                }

            })

        </script>

    </body>

</html>

只是他会根据他依赖的属性，生成一个属性，让vm对象可以使用这个属性

methods,watch,computed的区别

  1. computed属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算。主要当作属性来使用；
  2. methods方法表示一个具体的操作，主要书写业务逻辑；
  3. watch一个对象，键是需要观察的表达式，值是对应回调函数。主要用来监听某些特定数据的变化，从而进行某些具体的业务逻辑操作；可以看作是computed和methods的结合体；

来源：https://segmentfault.com/a/1190000016285469

Vue的watch和computed属性的更多相关文章

  1. vue中，class、内联style绑定、computed属性

    1.绑定Class ①对象语法 <li :class="{ 'active': activeIdx==0 }" @click="fnClickTab(0)" ...

  2. Vue学习3：计算属性computed与监听器

    下面是计算属性相关代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q ...

  3. Vue computed属性

    computed vs methods 我们可以使用Vue中的method计算出学科的总分,最终得到的总数结果是相同的. 在上例的基础上,我们把computed区块中的totalMarks函数整体移到 ...

  4. 浅尝 Vue 中的 computed 属性 与 watch

    对于 computed 的理解: ①.computed 用来监控自己定义的变量,该变量不在 data 里面声明,直接在 computed里面定义,然后就可以在页面上进行双向数据绑定展示出结果或者用作其 ...

  5. Vue中的computed属性

    阅读Vue官网的过程中,对于计算属于与监听器章节的内容有点理解的不清晰:https://cn.vuejs.org/v2/guide/computed.html. 后来上网查询了资料,结合官网的说明,总 ...

  6. vue的computed属性

    vue的computed属性要注意的两个地方,1,必须有return,2,使用属性不用括号 <div> <input type="text" v-model=&q ...

  7. [vue]计算和侦听属性(computed&watch)

    先看一下计算属性 vue只有data区的数据才具备响应式的功能. 计算和侦听属性 - v-text里可以写一些逻辑 <div id="example"> {{ mess ...

  8. 八、Vue中的computed属性

    看了网上很多资料,对vue的computed讲解自己看的都不是很清晰,今天忙里抽闲,和同事们又闲聊起来,对computed这个属性才有了一个稍微比较清晰的认识,下面的文章有一部分是转自: https: ...

  9. 十三、Vue中的computed属性

    以下抄自https://www.cnblogs.com/gunelark/p/8492468.html 看了网上很多资料,对vue的computed讲解自己看的都不是很清晰,今天忙里抽闲,和同事们又闲 ...

随机推荐

  1. Javascript 限制文本字节数

    文本限制字数的问题,在实际开发中经常用到;主要问题出现在对中文的限制,下面代码就解决关于限制字节数的校验问题 以下是引用片段: /* value: 值: byteLength:数据库字节长度 titl ...

  2. R语言实战读书笔记(七)基本统计分析

    summary() sapply(x,fun,options):对数据框或矩阵中的每一个向量进行统计 mean sd:标准差 var:方差 min: max: median: length: rang ...

  3. VMware虚拟机直连物理网络的两种方式

    VMware虚拟机直连物理网络的两种方式   使用VMware构建虚拟机,通常虚拟机都使用NAT模式.这时,虚拟机有独立的网段.使用NAT模式,虚拟机之间数据都通过虚拟网络传输,不会影响实体机所在的实 ...

  4. DNA的复制

    半保留复制 DNA分子复制时, DNA分子的双螺旋将解开, 互补的碱基之间的氢键断裂, 解开的两条单链作为复制的模板, 游离的脱氧核苷酸依据碱基互补配对的原则, 通过形成氢键结合到作为模板的单链上. ...

  5. Oracle 11g客户端

    资源 下载资源,直接解压进行配置 Oracle官方资源:http://www.oracle.com/technetwork/database/features/instant-client/index ...

  6. C 标准库 - <locale.h>

    C 标准库 - <locale.h> 简介 locale.h 头文件定义了特定地域的设置,比如日期格式和货币符号.接下来我们将介绍一些宏,以及一个重要的结构 struct lconv 和两 ...

  7. 推荐一款免费的SQLsever的备份软件sqlBackupAndFtp

    官方网址  http://sqlbackupandftp.com/ 这个软件不错,蛮方便的.小巧使用,还能够FTP上传数据.

  8. 使用fuser命令kill一个终端(特殊文件)的方法

    /*********************************************************************  * Author  : Samson  * Date   ...

  9. ffmpeg h264编码 extradata 为空

    ffmpeg h264编码的例子前面的文章已经介绍,本来主要讲述影响AVCodecContext extradata是否为 空的配置项.如果要求open编码器以后AVCodecContext extr ...

  10. 工作总结 mvc 调页面传参数 参数值会一直保存 在这个页面上的

    意思是 两个页面均可以 获取到id 和 goodsType 都可以获取 id goodsType post 的 还多带点属性值 form data 页面上带过去的 (新增 编辑)