Vue 中的计算属性和侦听器
程序员文章站
2022-05-17 07:58:42
...
Vue 中的计算属性，是指某个属性是由其他属性计算而来。只有在它所依赖的属性变化后，它才会重新计算，否则它会使用缓存值。使用它，性能上会更好一点。
computed:
<!DOCTYPE html>
<html>
<head>
<title>计算属性和侦听器</title>
<meta charset="utf-8">
<script src="./vue.js"></script>
</head>
<body>
<div id="root">
姓：<input v-model="firstName">
名：<input v-model="lastName">
<div>{{fullName}}</div>
</div>
<script>
new Vue({
el:"#root",
data: {
firstName: '',
lastName: ''
},
computed: {
fullName: function(){
return this.firstName + ' ' + this.lastName
}
}
})
</script>
</body>
</html>
侦听器，侦听某一个数据的变化，一旦该数据变化，就执行一些操作。
watch:
<!DOCTYPE html>
<html>
<head>
<title>计算属性和侦听器</title>
<meta charset="utf-8">
<script src="./vue.js"></script>
</head>
<body>
<div id="root">
姓：<input v-model="firstName">
名：<input v-model="lastName">
<div>{{fullName}}</div>
<div>{{count}}</div>
</div>
<script>
new Vue({
el:"#root",
data: {
firstName: '',
lastName: '',
count: 0
},
computed: {
fullName: function(){
return this.firstName + ' ' + this.lastName
}
},
watch:{
// firstName: function(){
// this.count++
// },
// lastName: function(){
// this.count++
// }，
fullName: function(){
this.count++
}
}
})
</script>
</body>
</html>
上一篇： vue中侦听器和计算属性的使用
下一篇： Vue侦听器监听对象中的属性