Vue组件的计算属性和普通属性的区别说明
小猫虎儿~ 人气:0计算属性和普通属性的区别说明
计算属性关键词: computed
计算属性模板：
computed:{
type:{
get(){
//getter
},
set(value){
//setter
}
}
}1.计算属性本质是包含getter和setter的方法。
2.当获取计算属性时，实际上是在调用getter方法。vue会收集计算属性的依赖，并缓存计算属性返回的结果。只有当依赖变化的时候才会重新进行计算。
3.方法没有缓存，每次调用方法都会导致重新执行。
4.计算属性的getter和setter参数固定：getter没有参数，setter只有一个参数。而方法的参数不限。
5.最重要的区别是含义上面的区别：计算属性也是一个数据，可以读取也可以赋值。而方法含义上是一个操作用于处理一些事情。
计算属性在处理一些复杂逻辑时是很有用的。
可以看下以下反转字符串的例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>例子</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app">
{{ message.split('').reverse().join('') }}
</div>
<script>
const app = {
data() {
return {
message: 'ILOVEVUE!!'
}
}
}
Vue.createApp(app).mount('#app')
</script>
</body>
</html>运行结果：
！！EUVEVOLI
上例中模板变的很复杂起来，也不容易看懂理解。
接下来我们看看使用了计算属性的实例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>例子</title>
<script src="https://cdn.staticfile.org/vue/3.0.5/vue.global.js"></script>
</head>
<body>
<div id="app">
<p>原始字符串: {{ message }}</p>
<p>计算后反转字符串: {{ reversedMessage }}</p>
</div>
<script>
const app = {
data() {
return {
message: 'ILOVEVUE!!'
}
},
computed: {
// 计算属性的 getter
reversedMessage: function () {
// `this` 指向 vm 实例
return this.message.split('').reverse().join('')
}
}
}
Vue.createApp(app).mount('#app')
</script>
</body>
</html>运行结果：
原始字符串: ILOVEVUE!!
计算后反转字符串: !!EUVEVOLI
computed vs methods
我们可以使用 methods 来替代 computed，效果上两个都是一样的，但是 computed 是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值。
而使用 methods ，在重新渲染的时候，函数总会重新调用执行。
可以说使用 computed 性能会更好，但是如果你不希望缓存，你可以使用 methods 属性。
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持。
加载全部内容