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. IPMITOOL命令支持列表V2.0

    命令集 命令行格式 命令行说明 User ipmitool -H <IP地址> -I lanplus -U <用户名> -P <密码> user summary 查 ...

  2. SQL Server 根据关键字和结束符提取字符串子串

    /* @info-待截取的字符串 @indexStr-截取子串的起始字符串 @split-截取子串的结束符号 列入依次传入 胸片:正常.心电图:异常,需要注意.血常规检查:正常. 心电图 '.' 返回 ...

  3. JVM锁实现探究2：synchronized深探

    本文来自网易云社区 作者:马进 这里我们来聊聊synchronized,以及wait(),notify()的实现原理. 在深入介绍synchronized原理之前,先介绍两种不同的锁实现. 一.阻塞锁 ...

  4. 修改Tomcat主目录

    在默认安装后,tomcat的主目录是webapps/root目录,如果我们想改变tomcat的主目录的话可以这样做: 1 %TOMCAT_HOME%/webapps/下直接创建,这种方法有一个缺点,就 ...

  5. java关键字（更新）

    1.final: ①final修饰类:该类不能被继承: ②final修饰方法:该方法不能被子类重写: ③final修饰变量:一.修饰基本数据类型变量,必须初始化,且值不能被改变:二.修饰引用数据类型变 ...

  6. NSURLConnection 网络请求

    前言 DEPRECATED: The NSURLConnection class should no longer be used. NSURLSession is the replacement f ...

  7. Codeforces Round #549 (Div. 2)A. The Doors

    A. The Doors time limit per test 1 second memory limit per test 256 megabytes input standard input o ...

  8. 【转】 spring context解惑

    转自:http://blog.csdn.net/c289054531/article/details/9196149?utm_source=tuicool&utm_medium=referra ...

  9. postgresql中的各种scan的比较

    最近在看postgresql的查询计划,在查询中对表的扫描计划大概有如下几种: Seq Scan Index Scan Bitmap Heap Scan Index Only Scan 这里就把自己的 ...

  10. 如何查看Centos版本

    使用命令 cat /etc/centos-release 查看效果如下图 当然,你也可以查看红帽的版本 cat /etc/redhat-release 郴州软件开发培训 郴州软件培训 郴州java培训 ...