vue中watch的使用

　　vue中的watch是一个比较重要的概念，通过他我们可以检测data的变化，下面进行详细的介绍。

　　watch定义方式如下：

{[key: string]: string | Function | Object  }

　　即在watch中，

  • 键是一个字符串，它是被观测的对象。
  • 值可以是一个字符串，这个字符串是方法名。
  • 值还可以是一个函数，但不能使用箭头函数的形式，this会出现问题。
  • 值也可以是一个对象，其中包含回调函数可以其他一些选项：比如是否深度遍历。

　　举例如下：

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>vue</title>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.3/vue.js"></script>

</head>

<body>

    <script>

      var vm = new Vue({

        data: {

          a: ,

          b: ,

          c: {

            name: "JohnZhu"

          }

        },

        watch: {

          a: function (val, oldVal) {

            console.log('new a: %s, old a: %s', val, oldVal)

          },

          // 方法名

          b: 'someMethod',

          // 深度 watcher， 检测到变化，并打印出c.name变化前后的结果

          // 'c.name': {

          //   handler: function (val, oldVal) {

          //     console.log('new c: %s, old c: %s', val, oldVal);

          //   },

          //   deep: true

          // },

          // 报错 必须用c.name，否则在data下不能直接找到name

          // name: function () {

          //   console.log('new c: %s, old c: %s', val, oldVal);

          // }

          // 报错，键值必须是一个字符串，所以用引号括起来

          // c.name: {

          //   handler: function (val, oldVal) {

          //     console.log('new c: %s, old c: %s', val, oldVal);

          //   },

          //   deep: true

          // }

          // 这里未检测到变化

          // c : {

          //   handler: function (val, oldVal) {

          //     console.log('new c: %s, old c: %s', val, oldVal);

          //   },

          //   deep: false

          // },

          // 成功检测到变化

          // c : {

          //   handler: function (val, oldVal) {

          //     console.log('new c: %s, old c: %s', val, oldVal);

          //   },

          //   deep: true

          // },

          // 检测不到变化，因为参数 deep 的默认值是false

          // c : {

          //   handler: function (val, oldVal) {

          //     console.log('new c: %s, old c: %s', val, oldVal);

          //   },

          // },

        },

        methods: {

          someMethod: function () {

            alert("b is changed");

          }

        }

      })

      vm.a = ; // new: 2, old: 1

      vm.b = ; // alert 666

      vm.c.name = "HTT";

    </script>

</body>

</html>

函数执行之后，分别在控制台中打印出new: 2, old:1 以及 alert 666。

  • 可以看出， watch函数的参数中，第一个是改变之前的值，第二个是改变之后的值， 这两个参数非常有用。
  • 这里分别使用了 三种定义函数（或option）的方法。
  • 如果要观察data下一个对象的属性，我们可以使用 '对象.属性' 的方式， 注意： 一定要要引号。
  • 如果改变了一个对象的属性，就必须使用 deep: true， 否则检测不到变化。 

举例：

这样的一个组件，当我想要同级输入的字数并希望在字数达到一定的数目时，给出提示，就可以watch字数， 即v-model实现，当字数的length改变时，我们判断， 然后给出相应的提示：

最后贴出完整的代码：

<template>

  <div class="add-remark">

    <div class="input">

      <textarea maxlength="" placeholder="请输入备注，最多50个字哦" v-model="message"></textarea>

      <span class="font-number" >{{message.length}}/</span>

    </div>

    <div class="hint-content" v-on:click="handleHint($event)">

      <span class="hint">不吃辣</span>

      <span class="hint">少放辣</span>

      <span class="hint">多放辣</span>

      <span class="hint">不吃蒜</span>

      <span class="hint">不吃香菜</span>

      <span class="hint">不吃葱</span>

    </div>

    <div class="btn" v-on:click="goback">完成</div>

  </div>

</template>

<style scoped lang="less">

  @main-color: #51B1B0;

  @sub-color: #eeefef;

  div.add-remark {

    div.input {

      position: relative;

      padding: .2rem .5rem;

      textarea {

        box-sizing: border-box;

        width: %;

        height: 4rem;

        font-size: .4rem;

        padding: .3rem;

        border: .0294rem solid @sub-color;

        &:focus {

          box-shadow:   .0417rem @main-color;

        }

      }

      span.font-number {

        position: absolute;

        font-size: .4rem;

        color: #aaa;

        bottom: .5rem;

        right: .7rem;

      }

    }

    div.hint-content {

      padding: .2rem;

      span.hint {

        display: inline-block;

        margin: .2rem .3rem .2rem .3rem;

        padding: .25rem;

        border: .02rem solid @sub-color;

        border-radius: .1rem;

        &:active {

          background-color: @sub-color;

        }

      }

    }

    div.btn {

      width: 9rem;

      height: 1rem;

      margin: .3rem auto;

      line-height: 1rem;

      text-align: center;

      background-color: @main-color;

      font-size: .45rem;

      font-weight: bold;

      color: white;

      border-radius: .2rem;

    }

  }

</style>

<script>

  export default {

    data () {

      return {

        message: ""

      }

    },

    watch: {

      message: function (val, oldValue) {

        if (val.length == ) {

          this.$toast("备注最多输入50字哦");

        }

      }

    },

    methods: {

      handleHint: function (e) {

        if (e.target.nodeName.toLowerCase() == "span") {

          this.message += ("  " + e.target.innerHTML )

        }

      },

      goback () {

        this.$router.back();

      }

    }

  }

</script>

https://cn.vuejs.org/v2/api/#watch

http://www.jianshu.com/p/ffe50c5e3368

http://www.cnblogs.com/dupd/p/5887907.html

https://cn.vuejs.org/v2/guide/computed.html#Computed-属性-vs-Watched-属性、

仰天大笑出门去，我辈岂是蓬蒿人。

vue中watch的使用的更多相关文章

  1. vue中如何不通过路由直接获取url中的参数

    前言:为什么要不通过路由直接获取url中的参数? vue中使用路由的方式设置url参数,但是这种方式必须要在路径中附带参数,而且这个参数是需要在vue的路由中提前设置好的. 相对来说,在某些情况下直接 ...

  2. vue中的重要特性

    一.vue中的自定义组件 html的代码: <!DOCTYPE html> <html lang="en"> <head> <meta c ...

  3. Vue中comoputed中的数据绑定

    Vue中的数据实现响应式绑定是在初始化的时候利用definePrototype的定义set和get过滤器,在进行组件模板编译时实现water的监听搜集依赖项,当数据发生变化时在set中通过调用dep. ...

  4. vue中使用stompjs实现mqtt消息推送通知

    最近在研究vue+webAPI进行前后端分离,在一些如前端定时循环请求后台接口判断状态等应用场景用使用mqtt进行主动的消息推送能够很大程度的减小服务端接口的压力,提高系统的效率,而且可以利用mqtt ...

  5. Vue中应用CORS实现AJAX跨域，及它在 form data 和 request payload 的小坑处理

    基本概念部分(一):理解CORS 说道Vue的跨域AJAX,我想先梳理一遍CORS跨域,"跨域资源共享"(Cross-origin resource sharing),它是一个W3 ...

  6. vue中watched属性

    watched属性,vue中的观察属性,可用来监听一个值的变化 默认有两个参数,新值,旧值 data (){ return { currentCity: "深圳" } } watc ...

  7. 七、vue中v-for有时候对页面不会重新渲染，数组变化后如何到渲染页面

      v-for不能进行双向数据绑定,页面渲染完成后,再次更改v-for遍历的数据,js里面打印的数据看到数据值已经更改,但是页面的数据就是没有渲染,这是为什么呢? vue中v-for和angularj ...

  8. 【Vue】Vue中的父子组件通讯以及使用sync同步父子组件数据

    前言: 之前写过一篇文章<在不同场景下Vue组件间的数据交流>,但现在来看,其中关于“父子组件通信”的介绍仍有诸多缺漏或者不当之处, 正好这几天学习了关于用sync修饰符做父子组件数据双向 ...

  9. vue中数据双向绑定的实现原理

    vue中最常见的属v-model这个数据双向绑定了,很好奇它是如何实现的呢?尝试着用原生的JS去实现一下. 首先大致学习了解下Object.defineProperty()这个东东吧! * Objec ...

  10. Vue中之nextTick函数源码分析

    Vue中之nextTick函数源码分析 1. 什么是Vue.nextTick()?官方文档解释如下:在下次DOM更新循环结束之后执行的延迟回调.在修改数据之后立即使用这个方法,获取更新后的DOM. 2 ...

随机推荐

  1. 20169219 实验一 Java开发环境的熟悉(Linux + IDEA)

    实验内容 1.使用JDK编译.运行简单的Java程序: 2.使用IDEA 编辑.编译.运行.调试Java程序. 如条件断点设置:我们在第14行左边断点处单击鼠标右键,弹出断点属性框,我们设置条件&qu ...

  2. 四则运算(Java) 陈志海 邓宇

    目录 Github项目地址 PSP表格 功能要求 题目 功能(已全部实现) 效能分析 设计实现过程 数值生成 算式生成 问题集生成 设计实现过程 代码说明 测试运行 代码覆盖率 项目小结 Github ...

  3. 关于CS0016: Could not write to output file ‘c:\WINDOWS\Microsoft.NET\Framework\v4.0.30319\Temporary AS

    1.添加用户"Network Service” 和 “IIS_IUSERS” 读下面目录的读写权限 a) C:\Windows\Temp b) C:\Windows\Microsoft.NE ...

  4. 自己总结的，输出到前端JSON的几种方法

    第一种:利用MODEL拼成要输出JSON的对象.再用JSON.NET转成JSON输出到前端(这种常用,就不举例了.) 第二种:利用table拼成JSON数据格式,再用JSON.NET转成JSON输出到 ...

  5. 「BZOJ 3209」花神的数论题

    Title Link 戳我 Title Solution 这道题可以运用组合数的思想啊,数位dp也可以,随便你怎么做,这里就讲一讲组合数的做法吧,要小于n,所以我们可以枚举n二进制下1的位置,在i-1 ...

  6. Kubernetes 集群部署（2） -- Etcd 集群

    Kubenetes 集群部署规划: 192.168.137.81  Master 192.168.137.82  Node 192.168.137.83  Node 以下在 Master 节点操作. ...

  7. Java面向对象之关键字super 入门实例

    一.基础概念 (一)super关键字 super关键字的用法和this相似.this代表的是当前对象.super代表的是父类中内存空间. 子父类中是不会出现同名属性的情况. (二)继承中.成员变量问题 ...

  8. Python——零基础向-四行代码下载网页上的一张图片

    一.确保安装了requests模块 还没安装的可以百度一下如何安装,很简单的. 这里简单的说一下方法:win+R,输入cmd,打开命令行窗口,输入命令:pip install requests ,即可 ...

  9. 简述ref与out区别

    1.相同点:两者都是按地址(引用)传递的,使用后都将改变原来参数的数值. 2.区别:ref可以把参数的数值传递进函数,但是out是要把参数清空(声明时不必显示初始化),就是说你无法把一个数值从out传 ...

  10. ARKit的使用

    //创建场景 let scene = SCNScene() /* //1.几何 let box = SCNBox.init(width: 0.1, height: 0.1, length: 0.1, ...