1.watch：用来侦听data中已存在的数据的变化（只能监视单个变量） ，对于数组和对象的改变 要用深度监听。
（因为监听的是对象的地址。修改数组或对象时地址并没有改变 改变的是指定地址中的值）
<!DOCTYPE html>
<html>
<head>
<title>计算属性和侦听器(watch和computed)</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
</head>
<body>
<div id="app">dgdgdgsdgg</div>
<script>
var App = {
template:`
<div>
<input type="text" v-model="msg">
<input type="text" v-model="list[0].name">
<input type="text" v-model="list[0].age">
</div>
`,
data() {
return {
msg:665,
list:[{name:'John','age':12}]
}
},
watch: {
msg(newVal,oldVal) {
console.log(this.msg);
console.log(newVal); //返回msg未改变前的值
console.log(oldVal); //返回msg改变后的值
},
list() { //在变异 (不是替换) 对象或数组时，旧值将与新值相同，因为它们的引用指向同一个对象/数组。所以这里完全不会被调用到，需要对对象或数组进行深度观察
console.log(this.list[0].name);
console.log(this.list[0].age);
},
//对数组进行深度观察
list: {
deep:true,
handler:function() {
console.log('深度监视成功!!!!');
console.log(this.list);
console.log(this.list[0].name);
console.log(this.list[0].age);
}
}
}
}
new Vue({
el:document.getElementById('app'),
components: {
App
},
template: '<App />'
})
</script>
</body>
</html>
2.computed：用来侦听data中已存在的数据的变化（侦听多个变量），返回新的变量。
<!DOCTYPE html>
<html>
<head>
<title>计算属性和侦听器(watch和computed)</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
</head>
<body>
<div id="app">dgdgdgsdgg</div>
<script>
var App = {
template:`
<div>
<input type="text" v-model="msg">
<input type="text" v-model="list[0].name">
<input type="text" v-model="list[0].age">
<p>{{result}}</p>
</div>
`,
data() {
return {
msg:665,
list:[{name:'John','age':12}]
}
},
computed: {
result() {
return this.msg + this.list[0].name + this.list[0].age;
}
}
}
new Vue({
el:document.getElementById('app'),
components: {
App
},
template: '<App />'
})
</script>
</body>
</html>