首页 > 代码库 > vue中watch的使用
vue中watch的使用
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=http://www.mamicode.com/"https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.3/vue.js"></script></head><body> <script> var vm = new Vue({ data: { a: 1, b: 2, 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 = 2; // new: 2, old: 1 vm.b = 666; // alert 666 vm.c.name = "HTT"; </script></body></html>
函数执行之后，分别在控制台中打印出new: 2, old:1 以及 alert 666。
- 可以看出， watch函数的参数中，第一个是改变之前的值，第二个是改变之后的值， 这两个参数非常有用。
- 这里分别使用了 三种定义函数（或option）的方法。
- 如果要观察data下一个对象的属性，我们可以使用 ‘对象.属性‘ 的方式， 注意： 一定要要引号。
- 如果改变了一个对象的属性，就必须使用 deep: true， 否则检测不到变化。
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的使用
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。