5、如果一个属性不能完成需要的功能时可以考虑转成计算
1.5.2、watch计算属性
一个对象，键是需要观察的表达式，值是对应回调函数。值也可以是方法名，或者包含选项的对象。Vue 实例将会在实例化时调用 ＄watch()，遍历 watch 对象的每一个属性。
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>vue2实例</title>
</head>
<body>
<div id="app1">
<p>
a:
<input type="text" v-model="a" />{{a}}<br/> b:
<input type="text" v-model="b" />{{b}}<br/> c:
<input type="text" v-model="c.x.y.z" />{{c.x.y.z}}<br/> d:
<input type="text" v-model="d" />{{d}}<br/>
</p>
<p>
n:<input type="text" v-model="c.x.y.n" />{{c.x.y.n}}
</p>
</div>
<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var app1 = new Vue({
el: "#app1",
data: {
a: 1,
b: 2,
c: {
x: {
y: {
z: 3,
n: 3
}
}
},
d: 4
},
watch: {
a: function(val, oldVal) {
console.log('a新: %5s, 原: %5s', val, oldVal);
},
// 方法名
b: 'watchb',
//对象，深度监视
c: {
handler: function(val, oldVal) {
console.log('c新: %5s, 原: %5s', JSON.stringify(val),JSON.stringify(oldVal));
},
deep:true
},
//立即监视
d: {
handler: function(val, oldVal) {
console.log('c新: %5s, 原: %5s', val,oldVal);
},
immediate:true //设置初始值时也将调用
}
},
methods: {
watchb: function(val, oldVal) {
console.log('b新: %5s, 原: %5s', val, oldVal);
}
}
});
var watchb = function(val, oldVal) {
console.log('b新: %5s, 原: %5s', val, oldVal);
}
</script>
</body>
</html>结果：
注意：不应该使用箭头函数来定义 watcher 函数、对象类型时并非深拷贝的，只是引用。
1.5.3、方法methods
methods 将被混入到 Vue 实例中。可以直接通过 VM 实例访问这些方法，或者在指令表达式中使用。方法中的 this 自动绑定为 Vue 实例。
var vm = new Vue({
data: { a: 1 },
methods: {
plus: function () {
this.a++
}
}
})
vm.plus()
vm.a // 2示例：
