Vue3/ Vue3 计算属性computed函数 语法 与 介绍 、Vue3 Vue2computed计算属性 能不能传参 怎么传参

一. 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 需要导入一个函数