Vue计算属性与侦听器

刺骨的言语ヽ痛彻心扉 2023-06-07 03:17 14阅读 0赞

# 计算属性简介 #

**什么是计算属性？**

*  通过之前章节，已经可以搭建一个简单的Vue应用，在模板里双向绑定一些数据或者表达式。
 *  ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70]
 *  但是，表达式如果过长或者逻辑更为复杂时，就会变得臃肿甚至难以阅读和维护，比如  
    ![在这里插入图片描述][20191012150453747.png]  
    这里的表达式包含3个操作，并不是很清晰，所以在遇到复杂逻辑时应该使用计算属性，使用计算属性对上例进行改写。  
    所有的计算属性都以 **函数**的形式写在vue实例内的**computed选项内**，最终**return**返回计算后的结果。  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 1]

## 计算属性用法 ##

*  在一个计算属性里可以完成各种复杂的逻辑，包括运算、函数调用等，最终返回计算后的结果。
 *  除了上例简单的用法，计算属性还可以依赖多个Vue实例的数据，只要其中任一数据变化，计算属性就会重新执行，视图也会更新。
 *  例如：下面实例展示的是在购物车内两个包裹的物品总价
 *  **案例如图01：**  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 2]  
    **上图案例解析：**
 *  当package1或者package2中的商品有任何变化，比如购买数量变化或者删除商品时，计算属性money就会自动更新，视图中的总价也会自动变化。  
    **getter与setter**
 *  计算属性包含getter和setter，上面实例都是计算属性默认用法，只是利用getter读取。此外也可以用setter函数，当手动修改计算属性的值就像修改普通数据时，便会触发setter函数，执行一些自定义操作（图02，图03）
 *  **案例如图02：**
 *  该案例也是计算属性的默认用法，只是利用getter读取。
 *  ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 3]
 *  \-**案例如图03：**
 *  getter与setter结合  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 4]

## 计算属性用法 ##

*  计算属性除了上述简单的文本插值外，还常用于动态设置元素样式名称class和内联样式style，此外使用组件时，计算属性也常用来动态传递props，这些都在之后课程讲解。

## 计算属性技巧 ##

*  计算属性有两个实用的小技巧（图04）
    
     *  ①计算属性可以依赖其他计算属性：
     *  ②计算属性不仅可以依赖当前vue实例的数据，还可以依赖其他实例数据  
        **图04如下：**  
        ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 5]  
        **图4**案例解析：
 *  这里创建了两个实例demo1和demo2，在demo2的计算属性reverseName中，依赖的是demo1的数据name，当name变化时，实例demo2的计算属性也会变化。
 *  这样的写法在后面的组件和组件化也会用到，尤其在多人协同开发时常用，因为你写的一个组件所用数据可能需要依赖其他人的组件提供。之后会做讲解。

# computed vs methods #

*  **计算属性缓存VS方法**
 *  除了计算属性，可以通过在表达式中调用方法来达到同样的效果：  
    ![在这里插入图片描述][20191012152101400.png]
 *  但是接下来再看个案例（Date.now() 不是响应式依赖）  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 6]  
    **计算属性缓存VS方法**
 *  使用 methods 来替代 computed，效果上两个是一样的，但是 computed  
    是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值。而使用 methods ，在重新渲染的时候，函数总会重新调用执行。
 *  可以说使用 computed 性能会更好，但是如果不希望缓存，可以使用 methods 属性。
 *  **小结**：相比之下，每当触发重新渲染时，调用方法将总会再次执行函数。  
    **为什么需要缓存？**
 *  假设有一个性能开销比较大的计算属性 A，它需要遍历一个巨大的数组并做大量的计算。
 *  然后我们可能有其他的计算属性依赖于 A 。如果没有缓存，我们将不可避免的多次执行 A ！如果不希望有缓存，可以用方法来替代。  
    **再来个案例体验下 computer 属性“依赖缓存”的概念以及与 method 的差别（图5）**  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 7]  
    **图5 案例分析：**
 *  num是独立于app对象的变量。在使用 reverseInfo\_com这个计算属性的时候，第一次会执行代码，得到一个值，以后再使用  
    reverseInfo\_com这个计算属性，因为 app对象没有发生改变，于是界面渲染就直接用这个值，不再重复执行代码。
 *  而 reverseInfo\_met没有这个缓存，只要用一次，函数代码就执行一次，于是每次返回值都不一样。

# 侦听器/属性 #

**除了计算属性Vue 提供了一种通用的方式来观察和响应 Vue 实例上的数据变动：侦听属性/器。**

*  *侦听器代码是命令式且重复的。将它与计算属性的版本进行比较*

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 8]

# 小结 #

*  （1）使用计算属性还是methods取决于是否需要缓存，当遍历大数组和做大量计算时，应当使用计算属性，除非你不希望得到缓存。
 *  （2）因为侦听器watch相对繁琐，大多情况下推荐用计算属性computed选项处理即可。

以上是小编对**计算属性与侦听器**的一点见解，有问题留言小编，嘿嘿

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70]: /images/20230601/fe73d1bf3b494defb9858e640d191c91.png
[20191012150453747.png]: /images/20230601/b8cb9da353b34dbaadedb86475fa2a70.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 1]: /images/20230601/837fcd92e10d42d0aa44629337311298.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 2]: /images/20230601/cf1f34ff7d6d42e7b55aeb182b67a827.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 3]: /images/20230601/2326dee01e364f37ab9e0a8bc8e9c208.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 4]: /images/20230601/528e1dc1b98f467cb691367ae04e4b1b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 5]: /images/20230601/14090a2bcbe74007b095ec0921fdddef.png
[20191012152101400.png]: /images/20230601/954541787ca04c5f8ae9a665cc8ce499.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 6]: /images/20230601/8ae77e465af64710adb8067e08a485ec.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 7]: /images/20230601/545b326226584980b4b1294f9a5c9194.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 8]: /images/20230601/2ba01351b7d149efb2358e7bddccc075.png