Vue computed计算属性 vs 方法（曾经面试时问过两者之间的区别，就自己总结记录下）

一、computed计算属性

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

<template>
  <p>Has published books:</p>
  <span>{{ publishedBooksMessage }}</span>
</template>

vue的计算属性会自动追踪响应式依赖，它会检测到计算属性publishedBooksMessage 依赖于author.books，当author.books改变时，任何依赖于publishedBooksMessage的绑定同样也会更新。

计算属性传递参数：computed返回一个函数，函数接收传递过来的参数然后return即可，代码如下

<div>
    <h3>computed 传值: 使用computed返回一个方法</h3>
    <button>{{ testVal("123") }}</button>
</div>

// computed 传值
let testVal = computed(() => (val) => val);

二、使用js方法调用实现

<p>{{ calculateBooksMessage() }}</p>

// 组件中
function calculateBooksMessage() {
  return author.books.length > 0 ? 'Yes' : 'No'
}

我们通过方法调用的方式也能实现和computed同样的结果。

三、两者之间的不同

        1、计算属性值会基于其响应式依赖被缓存，一个计算属性会在其响应式依赖更新时才会重新计算。这就意味着只要author.books不改变，无论多少次访问calculateBooksMessage都会立即返回之前计算好的结果，而不用重复执行getter函数（getter是一个隐藏函数，会在获取对象属性值时调用）

        比如下面的计算属性永远不会更新，因为Date.now()不是一个响应式依赖，没有触发更新机制，在第一次获取值就不会再更新。        

const now = computed(() => Date.now())

        2、方法调用总是会在重新渲染发生时再次执行函数

         比如下面的getNowDate在不同的时机调用，返回的值也就不同

const getNowDate = function(){
    return Date.now();
}

四、我们为什么需要缓存，什么时候使用computed，什么时候使用方法调用的方式

        假如我们有一个非常消耗性能的计算属性A，需要循环一个巨大的数组并做许多计算逻辑，并且也有可能其它计算属性依赖于计算属性A，如果没有缓存的话，我们会重复执行非常多次A的getter 然而这非常没有必要，如果你确定不需要缓存，那就可以使用方法调用，其余情况都可以使用computed计算属性。