- 站点信息
- 问题反馈
- 邮箱：[email protected]
- 吐槽一下
关注微信
©2020-2025 ioDraw All rights reserved,
Privacy Policy
<>写在前面
目标：现在vue3的使用越来越普遍了，vue3这方面的学习我们要赶上，今天说一下vue3中computed计算属性的使用。
computed函数在vue2中我们都了解过，当我们需要一个值，这个值随着其他值变化而变化，我们就将其放进computed中，computed是用来定义计算属性的。
<>1. 基本使用：只读
<template> <div> <div>计算属性</div> <hr> <button @click='age=25'>点击</button>
<div>今年：{{age}}岁了</div> <div>明年：{{nextAge}}岁了</div> </div> </template> <script>
import { ref, computed } from 'vue' export default { name: 'App', setup () { //
计算属性：简化模板 // 应用场景：基于已有的数据，计算一种数据 const age = ref(18) // 计算属性基本使用 const nextAge
= computed(() => { // 回调函数必须return，结果就是计算的结果 // 如果计算属性依赖的数据发生变化，那么会重新计算 return
age.value + 1 }) return { age, nextAge } } } </script> <style lang="less">
</style>
总结：Vue3中计算属性也是组合API风格
* 回调函数必须return，结果就是计算的结果
* 如果计算属性依赖的数据发生变化，那么会重新计算
* 不要在计算中中进行异步操作
<>2 高级用法：可读可写
<template> <div> <div>计算属性</div> <hr> <button @click='age=25'>点击</button>
<button @click='nextAge=28'>点击修改</button> <div>今年：{{age}}岁了</div> <div>明年：{
{nextAge}}岁了</div> </div> </template> <script> import { ref, computed } from
'vue' export default { name: 'App', setup () { // 计算属性：简化模板 //
应用场景：基于已有的数据，计算一种数据 const age = ref(18) // // 计算属性基本使用 // const nextAge =
computed(() => { // // 回调函数必须return，结果就是计算的结果 // // 如果计算属性依赖的数据发生变化，那么会重新计算 //
return age.value + 1 // }) // 修改计算属性的值 const nextAge = computed({ get () { //
如果读取计算属性的值，默认调用get方法 return age.value + 1 }, set (v) { // v是计算属性下传递的实参 //
如果要想修改计算属性的值，默认调用set方法 age.value = v - 1 } }) return { age, nextAge } } }
</script> <style lang="less"> </style>
总结：
* 计算属性可以直接读取或者修改
* 如果要实现计算属性的修改操作，那么computed的实参应该是对象
* 读取数据触发get方法
* 修改数据触发set方法，set函数的形参就是你赋给他的值