Vue学习—选项(三)watch

原创 2018年04月16日 16:11:39
  1. watch:{ [key: string]: string | Function | Object | Array } ,一个对象,键是需要观察的表达式,值是对应回调函数。值也可以是方法名,或者包含选项的对象。Vue 实例将会在实例化时调用 $watch(),遍历 watch 对象的每一个属性。
    <body>
    <h1>watch</h1>
    <div id="app">
    <p>苹果</p>
    <p>购买数量:{{n}}</p>
    <p>
    <button @click="del">-</button>
    <button @click="add">+</button>
    </p>

    </div>
    <script>
    var app = new Vue({
    el: "#app",
    data: {
    n: 1
    },
    methods: {
    add: function () {
    this.n++;
    },
    del: function () {
    this.n--;
    }
    },
    watch: {
    n: function (newVal, oldVal) {
    if (newVal < 1) {
    this.n = 1;
    }
    console.log(newVal);
    console.log(oldVal);
    }
    }
    })
    </script>
    </body>
  2. 注意,不应该使用箭头函数来定义 watcher 函数 (如searchQuery: newValue => this.updateAutocomplete(newValue))。理由是箭头函数绑定了父级作用域的上下文,所以 this 将不会按照期望指向 Vue 实例,this.updateAutocomplete 将是 undefined。
  3. vm.$watch:观察 Vue 实例变化的一个表达式或计算属性函数,也就是将watch方法外置成为Vue的实例属性。回调函数得到的参数为新值和旧值。表达式只接受监督的键路径。对于更复杂的表达式,用一个函数取代。
    <body>
    <h1>watch</h1>
    <div id="app">
    <p>苹果</p>
    <p>购买数量:{{n}}</p>
    <p>
    <button @click="del">-</button>
    <button @click="add">+</button>
    </p>

    </div>
    <script>
    var app = new Vue({
    el: "#app",
    data: {
    n: 1
    },
    methods: {
    add: function () {
    this.n++;
    },
    del: function () {
    this.n--;
    }
    }
    })
    //将watch方法外置成为Vue的实例属性
    app.$watch('n', function (newVal, oldVal) {
    if (newVal < 1) {
    app.n = 1;
    }
    })
    </script>
    </body>

  4. vm.$watch的选项:deep为了发现对象内部值的变化,可以在选项参数中指定 deep: true 。注意监听数组的变动不需要这么做。immediate在选项参数中指定 immediate: true 将立即以表达式的当前值触发回调
    vm.$watch('someObject', callback, {
    deep: true,
    immediate: true
    })
    vm.someObject.nestedValue = 123;
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_41581499/article/details/79959587

Vue顶级视频课程,学习Vue和web开发必备

本课程包括Vue的基础知识,vue模板,vue指令,vue事件处理,列表渲染、过度和动画、自定义指令等技术。 本课程是《JavaScript:王的语言》系列课程的重要组成部分。这一系列课程的主要目的是让学员学会如何只是用JavaScript实现所有类型的应用程序,包括Android App 、iOS App、Web、微信小程序、微信公众号、桌面应用)、服务端等。
  • 2017年10月29日 22:49

VUE整理(三)

  • 2017年12月05日 17:17
  • 21KB
  • 下载

Vue.js - watch对象的属性在IE9下失效

公司项目有IE9的需求,今天一测试发现好多bug。 第一个问题就是:有一个输入框,watch这个输入框里的值,当值匹配到手机格式时相向后台发送请求,执行一系列操作。代码长这样: 实际问题就是监...
  • Echo601
  • Echo601
  • 2017-07-25 18:41:10
  • 1098

VueJs探索之watch用法详解

Vue.js 提供了一个方法 watch,它用于观察Vue实例上的数据变动。对应一个对象,键是观察表达式,值是对应回调。值也可以是方法名,或者是对象,包含选项。具体的用法可以直接看下面的示例,简单直接...
  • itKingOne
  • itKingOne
  • 2017-04-07 16:10:53
  • 53877

vue之watch用法

对应一个对象,键是观察表达式,值是对应回调。值也可以是方法名,或者是对象,包含选项。在实例化时为每个键调用 $watch() ; //使用官方vue-cli脚手架书写   //观察数据为字符...
  • u012878818
  • u012878818
  • 2017-06-15 10:30:17
  • 1635

vue中watch的理解小记

通过路由id的变化使组件重组,可以用watch来监听id,watch的使用方法。
  • wangxiaoxiaosen
  • wangxiaoxiaosen
  • 2017-11-09 10:58:00
  • 5672

VueJs $watch()方法总结!!

最近公司用vue框架写交互,之前没怎么写过,但是很多数据双向绑定的东东跟angular很像!所以上手很快!哈哈 今天就碰到一个vue的问题啊!!产品需求是,datetimepick时间选择器一更改时...
  • lemon_zhao
  • lemon_zhao
  • 2016-08-12 14:43:43
  • 33155

vue2 中 computed 和 watch 的异同?

今天我来总结一下vue中computed 和 watch的异同!一、computed 和 watch 都可以观察页面的数据变化。当处理页面的数据变化时,我们有时候很容易滥用watch。 而通常更好的办...
  • webxiaoma
  • webxiaoma
  • 2017-05-22 15:10:57
  • 10172

Vue.js学习 Item5 -- 计算属性computed与$watch

在模板中绑定表达式是非常便利的,但是它们实际上只用于简单的操作。模板是为了描述视图的结构。在模板中放入太多的逻辑会让模板过重且难以维护。这就是为什么 Vue.js 将绑定表达式限制为一个表达式。如果需...
  • i10630226
  • i10630226
  • 2016-07-07 23:58:54
  • 12402

vue---watch用法

对应一个对象,键是观察表达式,值是对应回调。值也可以是方法名,或者是对象,包含选项。在实例化时为每个键调用 $watch() ; //使用官方vue-cli脚手架书写  //观察数据为字符串...
  • qq_21439971
  • qq_21439971
  • 2017-09-08 17:52:20
  • 1084
收藏助手
不良信息举报
您举报文章:Vue学习—选项(三)watch
举报原因:
原因补充:

(最多只允许输入30个字)