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. js-jquery 中$.ajax -浅显接触

    工作了将近2年,终于开始自己写ajax了!!!真紧张的! 当年培训时就没有学ajax,就让我们自己看看,我是那种主动学习的人吗?不是!!!所以搞不懂ajax!!!!! 在工作中,数据的绑定我们之前都是 ...

  2. 在centos7环境下建立MariaDB多实例

    环境全部基于vmware player 12 os: centos7 mariadb: mariadb-10.1.12-linux-x86_64.tar.gz 主要根据MariaDB给出的帮助文档,以 ...

  3. 对农行金e顺k令的一些猜测

    手上有一个未激活的农行金e顺k令 开机后要求输入12位的激活码,随机输入多次,均告失败 花了点时间猜想k令的工作模式: 已知: k令无法联网,出厂后除了输入激活码的机会外,无法获取任何信息 k令内部有 ...

  4. 小W计树

    排列组合思想. 先跑一遍最短路, 再从1节点开始搜索, 假如搜到一个点的路径长度等于最短路, 则记录到达该点的路径数 + 1. 最后遍历一遍, ans *= rec[i] 输出答案即可. 关键在于想到 ...

  5. Ubuntu 16.04下使用Wine安装PowerDesigner15

    说明: 1.关于没有.wine文件夹的解决方法:在命令行上运行winecfg: 2.使用的Wine版本是深度出品(Deepin),已经精简了很多没用的配置,使启动能非常快,占用资源小. 下载: (链接 ...

  6. 将压缩包文件（rar/zip）伪装成图片（jpg/gif/png/ico）

    1.在Windows上使用copy命令,缺点是只能是jpg文件,gif不支持,命令如下: copy in1.jpg+in2.rar out.jpg 2.网上说使用UEdit方式可以制作gif,但是测试 ...

  7. 强大的开源网络侦查工具：IVRE

    IVRE简介 IVRE(又名DRUNK)是一款开源的网络侦查框架工具,IVRE使用Nmap.Zmap进行主动网络探测.使用Bro.P0f等进行网络流量被动分析,探测结果存入数据库中,方便数据的查询.分 ...

  8. Projective Texture的原理与实现 【转】

              Projective Texture是比较常见的一种技术,实现起来代码也就区区的不过百行,了解其原理及技术细节是我们的重点,知其然,知其所以然.        粗略的说就是想象场景 ...

  9. Android——通过Intent传递一些二进制数据的方法有哪些

    1.方法 (1)使用Serializable接口实现序列化.利用Bundle.putSerializable(Key, Object);这里objec对象需要实现serializable接口. (2) ...

  10. One usage of recurison: the tower of Hanoi

    Statements: This blog was written by me, but most of content  is quoted from book[Data Structure wit ...