<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<p>这里是data里默认title<span style="color:red;margin-left:20px;">{{title}}</span></p>
<p>这里是使用computed反转的title<span style="color:red;margin-left:20px;">{{changeTitle}}</span></p>
<p>这里是使用watch监听器反转的title<span style="color:red;margin-left:20px;">{{watchTitle}}</span></p>
</div>
<script>
let vm = new Vue({
el: '#app',
data: {
title: '默认文字',
watchTitle: 'watch文字',
obj: {
a: 'aa'
}
},
computed: {
// computed本来就是用来返回计算后的值得，是需要马上得到的，而不是要等一段时间才能得到的 ,所以不能使用异步
// 同步/多个数据影响一个数据时，尽量考虑使用
changeTitle() {
// 1.这里的属性都是新属性，不能跟data中的属性重复
return this.title.split('').reverse().join('')
}
},
watch: {
// 这个属性监听data已经存在的属性
immediate: true, // 如果是true，进入页面执行watch，不写或者为false，进入页面不自动执行，title发生改变，这个函数就会执行
deep: true, // 引用数据类型数据发生改变时，也能出发当前函数。 adj： f12 输入 vm.obj = {}时候， （新值老值不相等，oldV不等于 newV）；当vm.obj.a = 'bb'时候，（新值老值相等，oldV等于 newV）
title(oldV, newV) { // 异步/一个数据影响多个数据时，尽量考虑使用
// 1.只要data里的title发生改变，这个函数就会执行
// 函数里爱写啥写啥，不受限制
this.watchTitle = this.title.split('').reverse().join('')
}
}
})
</script>
</body>
</html>
计算属性computed和监听器watch区别？
1.能使用计算属性computed的尽量使用计算属性，但是计算属性不能使用异步(computed本来就是用来返回计算后的值的，是需要马上得到的，而不是要等一段时间才能得到的 ,所以不能使用异步)
2.原则上多个数据影响一个数据的时候，考虑使用计算属性computed，当一个数据影响多个数据时候，考虑使用watch监听器
3.计算属性里面放置的属性都要是新的属性，不能和data里的属性重名，监听器watch里面监听的属性都是已经存在的属性
网友评论