一. Vue3 计算属性computed函数 语法 与 介绍
语法:
// 第一种语法get方法 （没有set）
const 函数名 = computed(() => { return })
// 第二种语法 get set 方法 带有set参数 可以设置
const 函数名 = computed(() => {
get() { return 结果 },
set( val ){ }
})
触发场景:
- 如果要访问计算属性 会自动执行 get
- 如果要修改计算属性 会自动执行 set
简介:
- get函数就等同于简单写法的函数胡 计算属性必须要有 get 而且需要 return 来返回结果
- set方法第一个参数 可以监听用户输入 新值 与 旧值
注意:
- 修改计算属性时需要使用完整写法也就是上面语法内第二种写法
- 修改时会自动执行set函数
- 获取数据时会自动执行get函数
二. Vue3 Vue2computed计算属性 能不能传参 怎么传参
传参结构:
<div>{{ selfAge(2025, '20k') }}</div> <div>{{ selfAge(2027, '25k') }}</div> <div>{{ selfAge(2030, '35k') }}</div>
const selfAge = computed(() => { return function(a, b) { return a + '年我' + age.value + '希望月薪' + b } })
总结:
- 计算属性可以传参 是通过函数返回一个函数的形式 可以自定义各种数据显示
- 计算属性Vue2 Vue3都可以传参 只要依赖的数据不发生改变 依然有缓存 可以按需做一些动态的数据显示
Vue3 和 Vue2 的去区别:
- Vue是通过 computed 选项 配置写的
- Vue3 需要导入一个函数
文章来源地址https://www.toymoban.com/news/detail-785318.html
文章来源：https://www.toymoban.com/news/detail-785318.html
到了这里，关于Vue3/ Vue3 计算属性computed函数 语法 与 介绍 、Vue3 Vue2computed计算属性 能不能传参 怎么传参的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
