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. android eclipse 报error loading /system/media/audio/ xxx 错的解决办法。

    只针对 报错..error   loading /system/media/audio/ xxx.ogg 一步操作 解决烦恼..把 模拟器声音 关了..所有的错 都没了. 包括 关闭按键声音,触摸声音 ...

  2. 数独·唯一性技巧（Uniqueness）-1

    唯一性技巧基于这样一个事实——各类出版物上发布的数独题目都只有唯一解.事实上,绝大多数数独玩家有这样的共识:即合格的数独题目解应该是唯一的.因此,为了保证题目合格.有效,出题者在制作题目时,会将一些虽 ...

  3. GetPixelAddress()函数Alpha通道会丢失

    CImage类中GetPixelAddress()函数来设置获取对应的颜色值是发现Alpha无效. void CGBImage::Load(){ CImage sourceImage; sourceI ...

  4. C#多线程编程实战1.5检测线程状态

    using System;using System.Collections.Generic;using System.Linq;using System.Text;using System.Threa ...

  5. Weekly Contest 117

    965. Univalued Binary Tree A binary tree is univalued if every node in the tree has the same value. ...

  6. 1442: Neo 的简单字符串(字符串)

    1442: Neo 的简单字符串 时间限制: 10 Sec 内存限制: 128 MB 提交: 9 解决: 3 统计 题目描述 Neo 给你一系列字符串,请你输出字符串中的不同单词个数以及总单词个数. ...

  7. WPF 动态更换模板

    Window x:Class="模板选择器.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml ...

  8. C#委托笔记

    参考: 第一篇:http://www.tracefact.net/tech/009.html 第二篇:http://www.tracefact.net/tech/029.html 1.委托相当于一种参 ...

  9. 洛谷P4014 分配问题（费用流）

    传送门 可以把原图看做一个二分图,人在左边,任务在右边,求一个带权的最大和最小完美匹配 然而我并不会二分图做法,所以只好直接用费用流套进去,求一个最小费用最大流和最大费用最大流即可 //minamot ...

  10. ubtuntu 如何查看内存用量 mongostat详解

    free -h top free或者top或者cat /proc/meminfo mongostat是mongdb自带的状态检测工具,在命令行下使用.它会间隔固定时间获取mongodb的当前运行状态, ...