Vue computed方法 计算属性

Vue

Vue computed

梗概

• 一个优化过的get函数（如getName）
• 一个数据处理接口，可以获取处理后的数据
  • 如原有一些响应式变量，经过该computed可以将这个变量进行一定的处理后，再返回结果
• 自动[base::track]用到的的响应式变量
• 实际应用的时候，[child::拆分computed的颗粒度]

适用范围:

场景

• 用来在页面中显示的数据

特点

• 不支持异步操作
• 自带[use::函数缓存] ^8c8728
  • 对对象的判定是基于引用的
• 有一定的computed稳定性
• 支持懒computed ^d7qpea
  • 这个好理解, 用到才去计算

条件

基于Vue 响应式对象进行操作

实例

这样响应式会在中间断掉:

let _count = 0
let count = computed(() => _count);
function increment() {
  _count++;
}

当_count改变时，它只是一个普通的值，不会响应式通知count去获取新的_count值 正确的响应式写法如下：

let _count = ref(0);
let count = computed(() => _count.value);
function increment() {
  _count.value++;
}

1. 带逻辑的变量接口:

模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。 在模板中放入太多的逻辑会让模板过重且难以维护。 例如，有一个嵌套数组对象：

Vue.createApp({
  data() {
    return {
      author: {
        name: 'John Doe',
        books: [
          'Vue 2 - Advanced Guide',
          'Vue 3 - Basic Guide',
          'Vue 4 - The Mystery'
        ]
      }
    }
  }
})

我们想根据 author 是否已经有一些书来显示不同的消息

<div id="computed-basics">
  <p>Has published books:</p>
  <span>{{ author.books.length > 0 ? 'Yes' : 'No' }}</span>
</div>

此时，模板不再是简单的和声明性的。你必须先看一下它，然后才能意识到它执行的计算取决于 author.books。如果要在模板中多次包含此计算，则问题会变得更糟。 所以，对于任何包含响应式数据的复杂逻辑，你都应该使用计算属性。

2. 计算属性与方法的区别:

1. 计算属性会利用上一次计算的缓存, 优化性能
2. 方法每次都是重新计算
3. computed不具备参数，不适用复杂的运算

表现形式

• child::Vue computed选项
• child::Vue computed方法 计算属性

性能优化

child::保持computed复杂数据稳定性

指向原始笔记的链接

语法:

1. 之一: 接受一个 getter 函数

根据 getter 的返回值返回一个不可更改的响应式引用。

const count = ref(1)
const plusOne = computed<value的类型>(() => count.value + 1,响应式钩子对象)//会自动做类型推断
 
console.log(plusOne.value) // 2
 
plusOne.value++ // 错误

2. 之一: 接受一个具有 get 和 set 函数的对象

用来创建可写的 响应式引用。

const count = ref(1)
const plusOne = computed({
  get: () => count.value + 1,
  set: val => {
    count.value = val - 1
  }
},响应式钩子对象)
 
plusOne.value = 1
console.log(count.value) // 0

3. 响应式钩子对象:

• 包含onTrack和onTrigger两个钩子的对象
  • 这两个方法的响应式变量都是计算属性中指定的变量