标签：cdn his 重要 第一个 style 不能 change new www
vue中的watch是一个比较重要的概念，通过他我们可以检测data的变化，下面进行详细的介绍。
watch定义方式如下：
{[key: string]: string | Function | Object }
即在watch中，
举例如下：
<!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: 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。
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-属性
标签：cdn his 重要 第一个 style 不能 change new www
原文地址：http://www.cnblogs.com/zhuzhenwei918/p/6921053.html
