计算属性:computed 监听多个变量且变量是在vue实例中(依赖某个变量,变量发生改变就会触发)
侦听器: watch 监听一个变量的变化
使用场景:watch(异步场景) computed(数据联动)
demo:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>computed 和 watch</title>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.common.dev.js"></script>
</head>
<body>
<div id="app">
watch:{{msg}}
<div>computed:{{msg1}}</div>
</div>
<script>
var app = new Vue({
el:'#app',
data:{
msg:'message',
other:'word'
},
watch:{
msg(newVal,oldVal){
console.log('msg:' + newVal);
console.log('msg:' + oldVal);
}
},
computed:{
msg1(){
return this.msg +' ' + this.other
}
}
});
app.msg = 'Hello';
app.other = '小红'
</script>
</body>
</html>