Vue.js 观察者(watch)

watch 属性用于监视 vue 实例上的数据变动，并相应的改变其他变量的值。

用法

实例 1

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <title>Vue.js 观察者(watch)</title>
  6.     <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
  7.     <meta name="apple-mobile-web-app-capable" content="yes">
  8.     <meta name="apple-mobile-web-app-status-bar-style" content="black">
  9.     <link rel="stylesheet" href="css/mui.min.css">
  10.     <title>Vue.js 观察者(watch)</title>
  11.     <script src="http://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
  12. </head>
  13. <body>
  14.     <div id="app">
  15.             <input type="text" v-model="firstName"/>
  16.             <input type="text" v-model="lastName"/>
  17.             <p>我的名字是：{{fullName}}</p>
  18.         </div>
  20.     <script>
  21.        var em = new Vue({
  22.             el: '#app',
  23.             data: {
  24.                 firstName: 'stephen',
  25.                 lastName: 'curry',
  26.                 fullName: 'stephen curry'
  27.             },
  28.             watch: {
  29.                 firstName: function (curVal, oldVal) {
  30.                     this.fullName = curVal + ' ' + this.lastName
  31.                 },
  32.                 lastName: function (curVal, oldVal) {
  33.                     this.fullName = this.firstName + ' ' + curVal
  34.                 }
  35.             }
  36.         })
  37.     </script>
  38. </body>
  39. </html>

上述代码中，监视了firstName和lastName这两个变量，当用户输入新的数据改变其值时，watch就会执行对应的函数，返回处理后的值并赋值给fullName变量。

注释：curVal 表示当前数据，oldVal 表示前一步数据（或默认数据），可参考实例2的代码。

实例 2

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <title>Vue.js 观察者(watch)</title>
  6.     <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
  7.     <meta name="apple-mobile-web-app-capable" content="yes">
  8.     <meta name="apple-mobile-web-app-status-bar-style" content="black">
  9.     <link rel="stylesheet" href="css/mui.min.css">
  10.     <title>Vue.js 观察者(watch)</title>
  11.     <script src="http://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
  12. </head>
  13. <body>
  14.     <div id="app">
  15.         <input type="text" v-model="number"/>
  16.         <p>result：{{result}}</p>
  17.     </div>
  19.     <script>
  20.         var app = new Vue({
  21.             el: '#app',
  22.             data: {
  23.                 number: 1,
  24.                 result: 1
  25.             },
  26.             watch: {
  27.                 number: function(curVal, oldVal) {
  28.                     this.result = curVal*1 + oldVal*1
  29.                 }
  30.             }
  31.         })
  32.     </script>
  33. </body>
  34. </html>

上述代码中，result 结果为当前输入数据和前一步数据之和。另外，oldVal 参数可缺省。

注意：当监视的数据是一个数组或者对象时，curVal 和 oldVal 是相等的，因为这两个形参指向的是同一个数据对象。

Watch deep 选项

类型是对象的变量，当键值发生变化时，为了监听到数据变化，需要设置deep选项为true，如下：

实例 3

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <title>Vue.js 观察者(watch)</title>
  6.     <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
  7.     <meta name="apple-mobile-web-app-capable" content="yes">
  8.     <meta name="apple-mobile-web-app-status-bar-style" content="black">
  9.     <link rel="stylesheet" href="css/mui.min.css">
  10.     <title>Vue.js 观察者(watch)</title>
  11.     <script src="http://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
  12. </head>
  13. <body>
  14.     <div id="app">
  15.         <input type="text" v-model="fruits.count"/>
  16.         <input type="text" v-model="fruits.name"/>
  17.         <p>fruits：{{message}}</p>
  18.     </div>
  20.     <script>
  21.         new Vue({
  22.             el: '#app',
  23.             data: {
  24.                 fruits: {
  25.                     name: "香蕉",
  26.                     count: 5
  27.                 },
  28.                 message: '5条香蕉'
  29.             },
  30.             watch: {
  31.                 fruits: {
  32.                     handler(obj){
  33.                         this.message = obj.count + '条' + obj.name
  34.                     },
  35.                     deep: true
  36.                 }
  37.             }
  38.         })
  39.     </script>
  40. </body>
  41. </html>

计算属性 与 watch

计算属性在大多数情况下更合适，但有时也需要一个自定义的 watcher 。这是为什么 Vue 提供一个更通用的方法通过 watch 选项，来响应数据的变化。当你想要在数据变化响应时，执行异步操作或开销较大的操作，这是很有用的。

Vue.js 观察者(watch)的更多相关文章

  1. 从Vue.js窥探前端行业

    近年来前端开发趋势 1.旧浏览器逐渐淘汰,移动端需求增加: 旧浏览器主要指的是IE6-IE8,它是不支持ES5特性的:IE9+.chrome.sarafi.firefox对ES5是完全支持的,移动端大 ...

  2. Vue.js双向绑定的实现原理

    Vue.js最核心的功能有两个,一是响应式的数据绑定系统,二是组件系统.本文仅探究几乎所有Vue的开篇介绍都会提到的hello world双向绑定是怎样实现的.先讲涉及的知识点,再参考源码,用尽可能少 ...

  3. Vue.js双向绑定的实现原理和模板引擎实现原理（##########################################）

    Vue.js双向绑定的实现原理 解析 神奇的 Object.defineProperty 这个方法了不起啊..vue.js和avalon.js 都是通过它实现双向绑定的..而且Object.obser ...

  4. 从template到DOM(Vue.js源码角度看内部运行机制)

    写在前面 这篇文章算是对最近写的一系列Vue.js源码的文章(https://github.com/answershuto/learnVue)的总结吧,在阅读源码的过程中也确实受益匪浅,希望自己的这些 ...

  5. 从Vue.js源码角度再看数据绑定

    写在前面 因为对Vue.js很感兴趣,而且平时工作的技术栈也是Vue.js,这几个月花了些时间研究学习了一下Vue.js源码,并做了总结与输出.文章的原地址:https://github.com/an ...

  6. Vue.js依赖收集

    写在前面 因为对Vue.js很感兴趣,而且平时工作的技术栈也是Vue.js,这几个月花了些时间研究学习了一下Vue.js源码,并做了总结与输出.文章的原地址:https://github.com/an ...

  7. Vue.js响应式原理

      写在前面 因为对Vue.js很感兴趣,而且平时工作的技术栈也是Vue.js,这几个月花了些时间研究学习了一下Vue.js源码,并做了总结与输出. 文章的原地址:answershuto/learnV ...

  8. vue源码分析—Vue.js 源码目录设计

    Vue.js 的源码都在 src 目录下,其目录结构如下 src ├── compiler # 编译相关 ├── core # 核心代码 ├── platforms # 不同平台的支持 ├── ser ...

  9. Vue.js的安装及简单使用

    一.Vue简介 二.Vue.js的安装 2.1.npm安装 2.1.1.node.js介绍及安装 简介: 简单的说 Node.js 就是运行在服务端的 JavaScript. Node.js 是一个基 ...

随机推荐

  1. 稀疏表示 Sparse Representation

    稀疏表示_百度百科 https://baike.baidu.com/item/%E7%A8%80%E7%96%8F%E8%A1%A8%E7%A4%BA/16530498 信号稀疏表示是过去近20年来信 ...

  2. 远程查看日志-linux

    ssh 连接服务器 ssh user@www.xxx.com -p60022 用户名@ip 端口 进入日志所在目录 cat FILENAME 查看文本文件,P.S. 在查较大文件时为了避免刷屏,请使用 ...

  3. luogu 3371 【模板】单源最短路径

    我太菜了 今天才学会堆优化的dij #include<iostream> #include<cstdio> #include<algorithm> #include ...

  4. SPI操作flash MX25L64读写数据

    STM32F10X SPI操作flash MX25L64读写数据 简单的一种应用,ARM芯片作为master,flash为slaver,实现单对单通信.ARM主控芯片STM32F103,flash芯片 ...

  5. ubuntu/linuxmint更换163源及常用软件PPA源记录

    一.163源使用说明 (具体见:http://mirrors.163.com/,不推荐linuxmint更换源!!!) 以Wily(15.10)为例, 编辑/etc/apt/sources.list文 ...

  6. bzoj 1652: [Usaco2006 Feb]Treats for the Cows【区间dp】

    裸的区间dp,设f[i][j]为区间(i,j)的答案,转移是f[i][j]=max(f[i+1][j]+a[i](n-j+i),f[i][j-1]+a[j]*(n-j+i)); #include< ...

  7. 统一微信公众号、小程序、APP的用户信息

     上次接手一个项目需要整合公众号.小程序以及APP的用户,查阅了微信文档以及一些作者的文章,中间踩了不少坑,在此记录一下解决的流程. 要点  实现统一信息的有以下几点:  1. 在微信开放平台绑定需要 ...

  8. “仿QQ局域网聊天软件”项目-常用编程技巧总结

    1 信号槽篇 qqLogin loginDialog; QQ mainDialog; loginDialog.show(); //连接登陆窗口和主窗口 QObject::connect(&lo ...

  9. [Qt Creator 快速入门] 第8章 界面外观

    一个完善的应用程序不仅应该有实用的功能,还要有一个漂亮的外观,这样才能使应用程序更加友好,更加吸引用户.作为一个跨平台的UI开发框架,Qt提供了强大而灵活的界面外观设计机制.这一章将学习在Qt中设计应 ...

  10. 模拟 URAL 1149 Sinus Dances

    题目传送门 /* 模拟:找到规律分别输出就可以了,简单但是蛮有意思的 */ #include <cstdio> #include <algorithm> #include &l ...