零基础学习Vue:第11课 watch侦听属性、计算属性缓存computed、方法methods的区别
零基础学习Vue:第11课 计算属性缓存computed、方法methods、侦听属性watch的区别
计算属性缓存computed：
当页面内需要显示computed内的属性时，则其中某一计算属性的值变化，其他属性不会重新执行计算，只执行改变属性的方法，因为计算属性存在缓存。
方法methods：
当页面内需要使用methods内的方法时，则其中某一个方法内的属性变化，则其他方法都需要执行，计算出新的结果，因为方法内不存在缓存。
侦听属性watch:
监控data中属性的变化，当需监控的属性变化时才会触发该监控函数
下面来看看侦听属性watch：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
</head>
<body>
<div id="app">
<div>___{{bbb}}___{{aaa}}__</div>
<div>{{fullName}}___{{ccc}}</div>
</div>
<script>
let vm = new Vue({
el:"#app",
data: {
firstName:"小",
lastName:"明",
fullName:"",
bbb:"1",
aaa:"2",
ccc:""
},
watch:{
bbb(){
console.log(11111)
this.fullName = this.firstName + this.lastName;
},
aaa(){
console.log(22222)
this.ccc = this.bbb + this.aaa;
}
}
})
</script>
</body>
</html>
运行结果如下：
当改变bbb值时运行结果如下：