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. House Robber(动态规划)

    思路: 代码: class Solution { public: int rob(vector<int> &num) { ; int size=num.size(); ) ]; v ...

  2. layui-时间选择器-时间范围选择

    HTML: JS: layui.use(['laydate'],function{ }); start:就为你选择的开始日期; end:就为你选择的结束日期 此方式可选择任意范围的时间,时间格式可任意 ...

  3. rocketMQ--搭建demo的坑

    果然不出所料,搭建起来就有坑 ,客户端经典的connection 11911的错误 在我的环境上解决方法加一行配置 brokerClusterName = DefaultClusterbrokerNa ...

  4. spring aop提供了两种实现方式jdk和cglib

    Spring AOP使用了两种代理机制:一种是基于JDK的动态代理:另一种是基于CGLib的动态代理.之所以需要两种代理机制,很大程度上是因为JDK本身只提供接口的代理,而不支持类的代理. Sprin ...

  5. Handler处理机制

    handler缺点:如果要运送两种类型的数据(比如一个Bitmap,一个Object)就不能运送,但可以用Bunder来传输  *    使用handler的步骤:  *    1.创建一个handl ...

  6. Git 的使用Git Bash和Git GUI

    使用Github也有一年的时间了,之前一直都是使用的Github客户端,对提交,更新,克隆,合并,分支有一定的了解和实践.一直都想试试命令行的形式,但是感觉可能桌面版的方便就没有做. 可是Github ...

  7. PS 基础知识 CMYK全称是什么

    已解决 请问谁知道CMYK四色的英文全称? 悬赏分:20 - 解决时间:2006-9-6 16:23 C代表什么颜色?英文全称是什么? M代表什么颜色?英文全称是什么? Y代表什么颜色?英文全称是什么 ...

  8. 简单理解 ES7 Decorator（装饰器）

    如何使用ES7 Decorator给你的游戏人物开挂? // 预告: 本文有点小难度,对js不太熟的人可能比较懵逼 // 本文的目的是让你们知其然 // ======================= ...

  9. Java序列化算法

    Serialization(序列化)是一种将对象以一连串的字节描述的过程:反序列化deserialization是一种将这些字节重建成一个对象的过程.java序列化API提供一种处理对象序列化的标准机 ...

  10. gulp是用来干什么的？（概念）

    当我们在使用gulp的时候,gulp到底用来干什么呢? 编译 sass 合并优化压缩 css 校验压缩 js 优化图片 添加文件指纹(md5) 组件化头部底部(include html) 实时自动刷新 ...