Vue3 computed 赋值

1 // 还是这2个数据源

2 const firstName = ref('Bill')

3 const lastName = ref('Gates')

4

5 // 这里我们配合setter的需要，改成了另外一种写法

6 const fullName = computed({

7 // getter我们还是返回一个拼接起来的全名

8 get() {

9 return `${firstName.value} ${lastName.value}`

10 },

11 // setter这里我们改成只更新firstName，注意参数也定义TS类型

12 set(newFirstName: string) {

13 firstName.value = newFirstName

14 },

15 })

16 console.log(fullName.value) // 输出 Bill Gates

17

18 // 2s后更新一下数据

19 setTimeout(() => {

20 // 对fullName的赋值，其实更新的是firstName

21 fullName.value = 'Petter'

22

23 // 此时firstName已经得到了更新

24 console.log(firstName.value) // 会输出 Petter

25

26 // 当然，由于firstName变化了，所以fullName的getter也会得到更新

27 console.log(fullName.value) // 会输出 Petter Gates

28 }, 2000)

来自于： https://vue3.chengpeiquan.com/component.html#基本格式

查看原文