Vue computed计算属性
<body>
<script src="../libs/vue.js"></script>
<div id="app">
<!--可读性不强-->
{{message.split("").reverse().join("")}}
<br>
<!--每次都需要计算-->
{{reverseMessage()}}
{{reverseMessage()}}
<br>
<!--响应式依赖进行缓存-->
{{reverseMsg}}
{{reverseMsg}}
<br>
{{calculate}}
{{getFullName}}
{{getFullName = 'Alice Xiaosu'}}
</div>
<script>
new Vue({
el: '#app',
data: {
message: 'Hello Vue.js',
array: [1, 3, 4, 6, 7, 10, 3, 5]
},
computed: {
reverseMsg() {
console.log('=====reverseMsg=====')
return this.message.split('').reverse().join('')
},
calculate() {
var list = this.array.filter((item) => {
return item % 2 === 0
})
return list
},
getFullName: {
//getter
get() {
return this.firstName + this.lastName;
},
//setter
set(val) {
//Alice Xiaosu
//分割
var value = val.split(' ')
this.firstName = value[0];
this.lastName = value[1];
}
}
},
methods: {
/*方法写在methods*/
reverseMessage() {
console.log("=====reverseMessage=====")
//methods里拿data的数据
/*
* item 数组里的数据
* index 索引
* data 数据源
* */
// return 如果是true 放到数组里， false 从数组里移除
const result = this.array.filter((item, index, data) => {
console.log(item)
console.log(index)
console.log(data)
return item >= 5
})
console.log('array', this.array)
console.log('result', result)
this.array.filter((item) =>
item >= 5
)
return this.message.split('').reverse().join('')
}
},
})
</script>
</body>
点击侦听器属性
计算和方法的区别：
我们可以将同一函数定义为一个方法而不是一个计算属性。两种方式的最终结果确实是完全相同的。然而，不同的是计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。
