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. C# Excel 操作

    Excel数据到datagridview 里面 (流读取) System.Windows.Forms.OpenFileDialog fd = new OpenFileDialog(); if (fd. ...

  2. angular启动过程

    第一步: .angular-cli.json 第二步: 第三步: 第四步: 第五步:

  3. 申请免费通配符证书(Let's Encrypt)并绑定IIS（转载）

    本文转载自https://blog.csdn.net/qq_41608008/article/details/80491447 什么是 Let's Encrypt? 部署 HTTPS 网站的时候需要证 ...

  4. ZooKeeper的部署和测试

    一背景 zookeeper是一个开源的分布式应用程序协调服务,是Apache Hadoop 的一个子项目.它是一个为分布式应用提供一致性服务的软件,提供的功能包括:配置维护.名字服务.分布式同步.组服 ...

  5. Jenkins忘记密码

    当Jenkins密码忘记时,可以去Jenkins的安装目录下的users\用户名_xxxxx\config.conf文件下找下找到<passwordHash></passwordHa ...

  6. 2018数学建模国赛总结（A题/编程选手视角）

    2018数学建模已经告一段落了,先说说基本情况吧,我们队伍专业分别为:金融(A),会计(B),计算机(我),配置还算可以,他们俩会数据分析软件也会写论文,我可以写代码,画图.他们俩打过美赛(M奖),我 ...

  7. JSP页面导出PDF格式文件

    JSP页面导出PDF格式文件基本在前端页面可以全部完成 <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/ ...

  8. python基础之内建函数（二）

    (7)max() 函数:返回列表.元祖或字符串中最大的元素,注意:字母“大于”数字.小写字母“大于”大写字母(字母排序是根据ASCII码表排的) 例如: >>>num = list ...

  9. 获取表单提交的数据getParameter()方法

    请求对象:request public String getParameter(String name); 通过request的getParameter(String name)方法获取 表单里面的n ...

  10. 有关unixODBC:Data source name not found, and no default driver specified的问题

    还是昨天测试postgresql的有关Mirroring Controller的功能时出的问题(真TM是个坑). 首先说下环境: 操作系统平台:RHEL6 x86_64 unixODBC版本:2.3. ...