Vue2 与 Vue3 中 Computed 计算属性详解

目录

Vue2 与 Vue3 中 Computed 计算属性详解

一、Vue2 中的 Computed 计算属性

1. 简单写法

2. get 和 set 写法

二、Vue3 中的 Computed 计算属性

1. 简单写法

2. get 和 set 写法

三、总结

---

在 Vue 开发中，计算属性（computed）是一个非常重要的特性，它可以对数据进行二次计算，为我们的开发带来了很大的便利。本文将结合 Vue2 和 Vue3 的特点，深入探讨 computed 计算属性，并附上相关代码示例。

一、Vue2 中的 Computed 计算属性

在 Vue2 中，computed 计算属性有两种常见的写法。

1. 简单写法

以下是一个 Vue2 中计算属性的简单示例：

  
  



  

    
AABC 数据：{{AABC}}
    
计算属性结果：{{changeSTR}}
    点击改变
  
  

在上述代码中，我们定义了一个 Vue 实例，其中包含一个数据属性AABC和ITR，以及一个计算属性changeSTR，它通过对ITR进行切片操作，返回最后一位字符。当我们点击按钮时，尝试直接修改计算属性会报错，因为在 Vue2 中计算属性是只读的。

2. get 和 set 写法

如果我们想要修改计算属性的值，可以使用get和set的写法：

  
  



  

    
AABC 数据：{{AABC}}
    
计算属性结果：{{changeSTR}}
    点击改变
  
  

在这种写法中，我们可以通过get方法获取计算属性的值，通过set方法设置计算属性的值。当我们点击按钮时，调用changeValue方法，修改计算属性changeSTR的值，实际上会通过set方法修改ITR的值，从而触发计算属性的重新计算。

二、Vue3 中的 Computed 计算属性

在 Vue3 中，计算属性的用法与 Vue2 类似，但也有一些细微的变化。

1. 简单写法

以下是一个 Vue3 中计算属性的简单示例：

  
  



  

    
AABC 数据：{{AABC}}
    
计算属性结果：{{changeSTR}}
    点击改变
  
  

2. get 和 set 写法

Vue3 中也可以使用get和set的写法来修改计算属性的值：

  
  



  

    
AABC 数据：{{AABC}}
    
计算属性结果：{{changeSTR}}
    点击改变
  
  

在 Vue3 中，使用get和set写法修改计算属性的值与 Vue2 类似，通过set方法修改数据属性的值，从而触发计算属性的重新计算。

三、总结

无论是 Vue2 还是 Vue3，计算属性都是一个非常强大的特性，可以帮助我们简化代码，提高开发效率。在使用计算属性时，我们需要注意以下几点：

1. 计算属性是基于它们的响应式依赖进行缓存的，只有在它们的依赖发生变化时才会重新计算。
2. 在 Vue2 和 Vue3 中，默认情况下计算属性是只读的，如果想要修改计算属性的值，需要使用get和set的写法。
3. 在面试中，可能会问到关于计算属性的问题，例如计算属性的结果值可以修改吗？答案是可以的，但需要通过特定的写法。