vue3 computed 练习笔记

相关知识

在学习computed之前，先复习一下前置知识

getter

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Functions/get#description

get 语法将对象属性绑定到查询该属性时将被调用的函数。

基础语法：在对象内部，使用get 函数，在访问对象.属性名时，会触发get对应的方法。

javascript 复制代码

{get prop() { ... } }

{get [expression]() { ... } }

javascript 复制代码

const obj = {
  log: ["example", "test"],
  get latest() {
    if (this.log.length == 0) return undefined;
    return this.log[this.log.length - 1];
  },
};
console.log(obj.latest); // "test".

setter

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Functions/set

当尝试设置属性时，set 语法将对象属性绑定到要调用的函数。

基础语法：在对象内部，使用set 函数，当给对象.属性名赋值时，会触发对应的set函数

javascript 复制代码

{ set prop(val) { /* ... */ } }
{ set [expression](val) { /* ... */ } }

javascript 复制代码

const language = {
  set current(name) {
    this.log.push(name);
  },
  log: [],
};

language.current = "EN";
language.current = "FA";

console.log(language.log);
// Expected output: Array ["EN", "FA"]

计算属性 computed

https://cn.vuejs.org/guide/essentials/computed.html

computed接收一个get函数。返回值是一个ref（ComputedRef）。

javascript 复制代码

const publishedBooksMessage = computed(() => {
  return author.books.length > 0 ? 'Yes' : 'No'
})

computed默认是只读的，如果需要修改computed属性，可以通过给computed设置set和get进行：

官网例子：

javascript 复制代码

<script setup>
import { ref, computed } from 'vue'

const firstName = ref('John')
const lastName = ref('Doe')

const fullName = computed({
  // getter
  get() {
    return firstName.value + ' ' + lastName.value
  },
  // setter
  set(newValue) {
    // 注意：我们这里使用的是解构赋值语法
    [firstName.value, lastName.value] = newValue.split(' ')
  }
})
</script>

computed实际使用练习

会记这篇博客，其实主要是因为在实际项目拆分组件的时候，拆分的是一个dialog，而digloag绑定的v-model来源于父组件，props不能直接作为v-model，且由于传递的v-model是控制dialog是否显示的visiable，如果dialog关闭，visiable的值需要回传给父组件，因此需要用到computed的set和get实现。

父组件把visible传递给子组件之后，子组件通过computed计算新属性，但由于新属性是只读的，关闭dialog之后，组件无法监测到dialog的关闭状态，再次打开dialog时，会造成显示异常（无法再次打开）。

通过把computed设置成可读可写解决这个问题：