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. KeyStore和TrustStore

    笔者的这篇文章参考了http://docs.oracle.com/cd/E19509-01/820-3503/ggfgo/index.html KeyStore和TrustStore在很多HTTPS双 ...

  2. FMDB支持的事务类型

    FMDB支持的事务类型   在数据库中,事务可以保证数据操作的完整性.当存在大量并发操作,容易出现死锁问题.在SQLite中,为了解决该问题,提供三种事务模式,分别为DEFFERED.IMMEDIAT ...

  3. 微信小程序提交 webapi FormDataCollection

    /// <returns></returns> [HttpPost] public ShoppingCartModel UpdateCart(FormDataCollectio ...

  4. 牛人写的facebook优化php来龙去脉

    背景 HHVM 是 Facebook 开发的高性能 PHP 虚拟机,宣称比官方的快9倍,我很好奇,于是抽空简单了解了一下,并整理出这篇文章,希望能回答清楚两方面的问题: HHVM 到底靠谱么?是否可以 ...

  5. python设置utf-8为默认编码

    当使用Python编程时,编码问题一直很让人头疼,程序中经常会碰到如下错误提示: UnicodeDecodeError: 'ascii' codec can't decode byte 0x?? in ...

  6. 利用Thinkphp 5缓存漏洞实现前台Getshell

    0×00 背景 网站为了实现加速访问,会将用户访问过的页面存入缓存来减小数据库查询的开销.而Thinkphp5框架的缓存漏洞使得在缓存中注入代码成为可能.(漏洞详情见参考资料) 本文将会详细讲解: 1 ...

  7. 在c++11中你最惊讶的新feature是什么？

    对我来说,我最惊讶竟然把对于多线程的支持加到标准中了.真的想不明确,对于c++这样一种语言.怎么会加进这个东西. 1. 由于各个平台的不同,对于多线程的支持会有很多平台独有的特色.这样c++标准的定义 ...

  8. HDU4126Genghis Khan the Conqueror(最小生成树+并查集)

    Genghis Khan the Conqueror Time Limit: 10000/5000 MS (Java/Others)    Memory Limit: 327680/327680 K ...

  9. 猫猫学iOS之小知识之_xcode插件的删除方法_自己主动提示图片插件KSImageNamed有时不灵_分类或宏之类不能自己主动提示，

    猫猫分享,必须精品 原创文章.欢迎转载. 转载请注明:翟乃玉的博客 地址:http://blog.csdn.net/u013357243 一:解决解决自己主动提示图片插件KSImageNamed有时不 ...

  10. Spring MVC传值乱码解决

    在web.xml中进行配置,加入以下代码: <!-- 乱码解决 --> <filter> <filter-name>characterEncodingFilter& ...