计算属性
概述
计算属性是vue实例中的一个配置选项:computed
通常里面都是一个个计算相关的函数,函数里头可以写大量的逻辑,最后返回
计算出来的值
即我们可以把这些计算的过程写到一个计算属性中去,然后让它动态的计算。
优点:相比methods,不用调用方法,而是直接访问计算后的属性,可读性强些。计算属性有缓存所以性能比methods高
例如:
<body>
<div class="app">
<h2>{{message}}</h2>
</div>
<script src="./vue.js"></script>
<script>
const app = new Vue({
el : '.app' ,
data : {
firstName : 'Stephen',
lastName : 'Curry'
},
computed : {
message () {
return this.firstName + ' ' + this.lastName
}
}
})
</script>
</body>
setter 和 getter (内部原理)
'计算属性的内部实现原理是通过getter和setter,如下:'
'计算属性一般是获取属性,所以setter也不常用,以下,是计算属性内部原理'
<body>
<div class="app">
<h2>{{message}}</h2>
</div>
<script src="./vue.js"></script>
<script>
const app = new Vue({
el : '.app' ,
data : {
firstName : 'Stephen',
lastName : 'Curry'
},
computed : {
// message () {
// return this.firstName + ' ' + this.lastName
// }
// 这里message当作属性,这样符合内部的原理
message : {
set (value) {
let newValue = value.split(' ')
this.firstName = newValue[0]
this.lastName = newValue[1]
},
get () {
return this.firstName + ' ' + this.lastName
}
}
}
})
</script>
</body>
与methods对比 (缓存)
计算属性是基于它们的响应式依赖进行缓存的。
只在相关响应式依赖发生改变时它们才会重新求值。
这就意味着只要 message 还没有发生改变,多次访问,计算属性会立即返回之前的计算结果,而不必再次执行函数。
而methods不会缓存,每次都会调用一次函数来重新计算
1、计算属性比methods性能高
2、计算属性对相同的过程做了一次缓存,而methods每次都要重新计算过程
代码如下:
<body>
<div class="app">
<h2>computed:{{message}}</h2>
<h2>computed:{{message}}</h2>
<h2>computed:{{message}}</h2>
<h2>methods:{{view()}}</h2>
<h2>methods:{{view()}}</h2>
<h2>methods:{{view()}}</h2>
</div>
<script src="./vue.js"></script>
<script>
const app = new Vue({
el : '.app' ,
data : {
num1 : 30 ,
num2 : 24
},
computed : {
message(){
console.log('computed...')
return this.num1 + ' ' + this.num2
}
},
methods : {
view(){
console.log('methods...')
return this.num1 + ' ' + this.num2
}
}
})
</script>
</body>
图片结果如下:
监听属性
虽然计算属性在大多数情况下更合适,但有时也需要一个自定义的侦听器。这就是为什么 Vue 通过 watch 选项提供了一个更通用的方法,来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时,这个方式是最有用的。
例如:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="app">
<h2>计数器:{{message}}</h2>
<button @click='message++'>点击</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el : '.app' ,
data : {
message : 0
}
})
app.$watch('message',function(nval,oval){
alert('计数器值的变化 :' + oval + ' 变为 ' + nval + '!');
})
</script>
</body>
</html>