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. CMake使用技巧

    前面有提到使用CMake.很多朋友提到也用过一下,没感觉它有什么好用,不知道怎么用之类. 我必要来说明一下. CMake的语法比较差,不是很优美,不是它不能用一个更好的语法,而是有一个关键优势:简单. ...

  2. jQuery事件（持续更新中）

    方法 描述 bind() 向匹配元素附加一个或更多事件处理器 blur() 触发.或将函数绑定到指定元素的 blur 事件 change() 触发.或将函数绑定到指定元素的 change 事件 cli ...

  3. Hackfive 使用TextSwitcher和ImageSwitcher实现平滑过渡

    1. 应用场景: 通过向左和向右的导航按钮浏览日期列表 在日期选择空间中改变日期 倒计时始终 新闻刚要 2.用到的知识点是:     TextSwitcher和ImageSwitcher     Te ...

  4. LSI Storcli 工具使用

    查看RAID卡ID 命令功能 查看LSI SAS3108RAID卡的ID. 命令格式 storcli64 show 使用实例 # 查看LSI SAS3108RAID卡的ID. [root@localh ...

  5. Vue 父组件向子组件传值，传方法，传父组件整体

    父子组件传值 1.父组件调用子组件时绑定属性,例如-> :title="title" 2.子组件中在props中声明title:props:['title','msg'] 3 ...

  6. WinForm中获取Listbox、DataGridView等控件某行对应的数据

    Listbox:listbox.SelectedItem as XXX DataGridView:dataGridView1.Rows[i].Cells[1].Value.ToString()

  7. 加密模块（md5）

    一.md5加密 import hashlib s = ' print(s.encode()) m = hashlib.md5(s.encode())# 必须得传一个bytes类型的 print(m.h ...

  8. pg_basebackup命令解析

    pg_basebackup命令首先解析输入的参数,再调用BaseBackup()函数进行备份处理. 在BaseBackup()函数内部,会首先传送WAL日志(如果指定了-x选项的话).随后依次遍历所有 ...

  9. Python第四次作业

    设计题1: 设计一个本月份日历,输出格式如下: 要求: 1.初始化start_day,end_day两个日期 from datetime import datetime start_day=datet ...

  10. 在Ninject 向构造参数中注入具有相同类型的参数

    实际上这个有多种解决方法,加自定义Attribute,或Named(),但这些方式有一些侵入性,Named,要引用Ninject, 自定义Attribute,还要还要再写几行代码吗,所以使用下面的方法 ...