API-computed 基本使用
前些章节讲了一些常用的 api 如 setup, ref, reactive, toRef ... 等, 并以一个 todoList 的小案例来体现在 vue3 中如何进行解耦逻辑, 以 setup 函数作为调度的这种后端编程思想. 其实我个人觉得没啥, 就比较符合大众的编程习惯而已啦. 本篇继续来介绍计算属性 computed 是如何在 api 中应用的.
computed 的简单使用
<!DOCTYPE html>
<html lang="en">
<head>
<title>computed</title>
<script src="https://unpkg.com/vue@3"></script>
</head>
<body>
<div id="root"></div>
<script>
// computed 计算属性
const app = Vue.createApp({
setup () {
const { ref, computed } = Vue
const count = ref(0)
const dealClick = () => {
count.value += 1
}
// 其实就是定义一个变量, 给它写上逻辑, 自动计算啦
const countAddFive = computed(() => {
return count.value + 5
})
return { count, countAddFive, dealClick }
},
template: `
<div>
<span @click="dealClick">{{count}}</span> -- {{countAddFive}}
</div>
`,
})
const vm = app.mount('#root')
</script>
</body>
</html>
对简单的 computed 的使用流程则是:
- 从 vue 中引入 computed
- 定义一个属性变量 = computed(( ) => { 逻辑 })
- return 该属性变量即可在 template 中使用啦
更复杂的一些用法, 则是能在 computed 的函数中去传入对象的操作, 如设置 get 和 set 的方法.
<!DOCTYPE html>
<html lang="en">
<head>
<title>computed</title>
<script src="https://unpkg.com/vue@3"></script>
</head>
<body>
<div id="root"></div>
<script>
// computed 计算属性
const app = Vue.createApp({
setup () {
const { ref, computed } = Vue
const count = ref(0)
const dealClick = () => {
count.value += 1
}
// 传入一个对象, 编写 get 和 set 的方法
let countAddFive = computed({
get: () => {
return count.value + 5
},
set: () => {
count.value = 666
}
})
setTimeout(() => {
countAddFive.value = 111
}, 3000);
return { count, countAddFive, dealClick }
},
template: `
<div>
<span @click="dealClick">{{count}}</span> -- {{countAddFive}}
</div>
`,
})
const vm = app.mount('#root')
</script>
</body>
</html>
set 方法当值发生变化时候就会自动调用, 然后 get 方法则再进行处理啦. 总之在这个 computed 的使用, 在通过 api 的方式也是非常简单的, 这里就不在探索啦, 咱只要知道它的基本使用流程就行, 在实际应用中还是能用到的, 比如算根据单价和数量, 自动算营业额呀, 算打分呀这些场景, 用 computed 则会让 code 看起来非常清晰和优雅呢.
耐心和恒心, 总会获得回报的.