一.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计算属性 能不能传参 怎么传参

传参结构:

{{ selfAge(2025, ’20k’) }}
{{ selfAge(2027, ’25k’) }}
{{ selfAge(2030, ’35k’) }}

const selfAge = computed(() => {
return function(a, b) {
return a + ‘年我’ + age.value + ‘希望月薪’ + b
}
})

总结:

  • 计算属性可以传参 是通过函数返回一个函数的形式 可以自定义各种数据显示
  • 计算属性Vue2 Vue3都可以传参 只要依赖的数据不发生改变 依然有缓存 可以按需做一些动态的数据显示

Vue3 和 Vue2 的去区别:

  • Vue是通过 computed 选项 配置写的
  • Vue3 需要导入一个函数