Vue.js 观察者(watch)

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

用法

实例 1

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>Vue.js 观察者(watch)</title>

    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">

    <meta name="apple-mobile-web-app-capable" content="yes">

    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <link rel="stylesheet" href="css/mui.min.css">

    <title>Vue.js 观察者(watch)</title>

    <script src="http://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>

</head>

<body>

    <div id="app">

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

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

            <p>我的名字是：{{fullName}}</p>

        </div>

    <script>

       var em = new Vue({

            el: '#app',

            data: {

                firstName: 'stephen',

                lastName: 'curry',

                fullName: 'stephen curry'

            },

            watch: {

                firstName: function (curVal, oldVal) {

                    this.fullName = curVal + ' ' + this.lastName

                },

                lastName: function (curVal, oldVal) {

                    this.fullName = this.firstName + ' ' + curVal

                }

            }

        })

    </script>

</body>

</html>

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

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

实例 2

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>Vue.js 观察者(watch)</title>

    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">

    <meta name="apple-mobile-web-app-capable" content="yes">

    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <link rel="stylesheet" href="css/mui.min.css">

    <title>Vue.js 观察者(watch)</title>

    <script src="http://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>

</head>

<body>

    <div id="app">

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

        <p>result：{{result}}</p>

    </div>

    <script>

        var app = new Vue({

            el: '#app',

            data: {

                number: 1,

                result: 1

            },

            watch: {

                number: function(curVal, oldVal) {

                    this.result = curVal*1 + oldVal*1

                }

            }

        })

    </script>

</body>

</html>

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

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

Watch deep 选项

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

实例 3

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>Vue.js 观察者(watch)</title>

    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">

    <meta name="apple-mobile-web-app-capable" content="yes">

    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <link rel="stylesheet" href="css/mui.min.css">

    <title>Vue.js 观察者(watch)</title>

    <script src="http://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>

</head>

<body>

    <div id="app">

        <input type="text" v-model="fruits.count"/>

        <input type="text" v-model="fruits.name"/>

        <p>fruits：{{message}}</p>

    </div>

    <script>

        new Vue({

            el: '#app',

            data: {

                fruits: {

                    name: "香蕉",

                    count: 5

                },

                message: '5条香蕉'

            },

            watch: {

                fruits: {

                    handler(obj){

                        this.message = obj.count + '条' + obj.name

                    },

                    deep: true

                }

            }

        })

    </script>

</body>

</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. [办公自动化]PPT文件太大，如何压缩？

    如果你经常需要制作PPT,文件太大的确是个问题. 那么应该如何压缩呢? 以office 2007为例 第一.可以选中图片,然后双击,在弹出的菜单栏中,选择压缩图片. 然后选择选项, 有三种比例可选,建 ...

  2. 实时人工智能：微软发布Project Brainwave预览版 现场可编程门阵列（Field Programmable Gate Array，简称FPGA） 硬件设计可以迅速演进

    https://mp.weixin.qq.com/s/bAPiPURZd-YsbV5PbzwpQQ 编者按:随着各大公司对于数据计算的要求越来越高,实时AI成为了研究者们关注的重点.在美国西雅图举行的 ...

  3. 编译android framework的例子【转】

    本文转载自:http://blog.csdn.net/brucexu1978/article/details/7610358 在开发过程中,尤其是Framework相关开发时,有时候需要重新编译资源文 ...

  4. Android默认系统声音/大小修改及配置【转】

    本文转载自:http://blog.csdn.net/a8316124/article/details/60574859 在做定制需求的时候,需要修改系统通知的声音,将其禁用掉,避免第三方应用发送通知 ...

  5. bzoj3262 陌上花开——CDQ分治

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=3262 第一道CDQ分治题! 看博客:https://www.cnblogs.com/Narh ...

  6. 杂项：MySQL

    ylbtech-杂项:MySQL 1.返回顶部   2.返回顶部   3.返回顶部   4.返回顶部   5.返回顶部 0. https://www.mysql.com/ 1. https://bai ...

  7. bzoj2338

    计算几何 我们先把所有的线段求出来,我们发现只有两个线段等长且中点重合时才能构成矩形,那么线段有n*n条,我们按中点,长度排序,然后对于一条线段扫描所有符合条件的线段计算答案,这样看起来是O(n^3) ...

  8. 移动前端第一弹：viewport详解

    前言 这次想聊聊移动开发相关的事.是的,你没有看错,一句话就可以开始你的移动前端开发. 你心里一定在想,什么话这么酷,能够瞬间带入到移动前端开发的世界. 但其实它一点也不新奇,不复杂. viewpor ...

  9. TI BLE STACK - OSAL

    TI 的OSAL做的很不错,不过看起来也挺费劲可能自己水平太差吧,网上买的谷雨的开发板觉得确实挺不错的. 做点学习笔记,首先是记录OSAL里执行的顺序流程,主要是task ,event,message ...

  10. 06_锅炉压力案例_progressbar实现

    相关的native方法可以用javah来生成一个头文件.拿着这个的MainActivity,用它来生成一个头文件. Signature是当前这个方法的方法签名.() V全空参数返回的是void. /* ...