Vue 计算属性与侦听器

侦听器

<div id="app">
{{msg}}
</div>
<script>
var app = new Vue({
el: '#app',
data: {
msg: 'hello vue'
},
watch: {
msg: function (newval,oldval){
console.log('newval is:' + newval)
console.log('oldval is:' + oldval)
}
},
})
</script>

当msg中的值发生变化时，侦听器就会侦听到，同时则会执行侦听器中的事件
watch 只能监听当前或这个指定值的变化
computed 只要是包含在function中变量值任意一个值，对应返回的值都会发生变化

计算属性

<div id="app">
{{msg}}
<p>
{{msg1}}
</p>
</div>
<script>
var arr = 'new test'
var app = new Vue({
el: '#app',
data: {
msg: 'hello vue',
another: 'another hello vue!!'
},
watch: {
msg: function (newval,oldval){
console.log('newval is:' + newval)
console.log('oldval is:' + oldval)
}
},
computed: {
msg1: function() {
return 'computed:' + this.msg + ',' + this.another + ',' + arr
}
},
})
</script>

watch和computed的区别：
watch：监听一个变量或一个常量的变化，单一的一个或一个数组
computed：监听多个变量，前提是在vue的实例中
使用场景介绍，watch（异步场景），computed（数据联动）