学习VUE第四天（VUE之计算属性&侦听器&方法）

清疚 2023-06-07 00:53 6阅读 0赞

# 计算属性简介 #

*  什么是计算属性？  
    通过之前章节，已经可以搭建一个简单的Vue应用，在模板里双向绑定一些数据或者表达式。  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70]
 *  计算属性缘由  
    模板内的表达式是非常便利的，但是它们实际上只用于简单的运算，如果在模板里放入太多的逻辑会让模板过于臃肿且难以维护。

#### 例如将“xiaoming”首字母大写 ####

![在这里插入图片描述][20191012113827442.png]

*  上述案例里，将业务逻辑代码写入了模板里，写法本身没有错误，也能够实现相应功能，但是这样会导致代码过于累赘，不简洁，难以维护
 *  因此在这里引入了计算属性computed来解决此问题。
 *  这里注意：计算属性相关代码需要写到computed选项中。  
    ![在这里插入图片描述][20191012113856893.png]
 *  案例2：表达式如果过长或者逻辑更为复杂时，就会变得臃肿甚至难以阅读和维护，比如  
    ![在这里插入图片描述][20191012113918537.png]
 *  这里的表达式包含3个操作，并不是很清晰，所以在遇到复杂逻辑时应该使用计算属性，使用计算属性对上例进行改写。  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 1]

### 步骤：3部曲 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 2]

# 计算属性用法 #

*  注意：  
    1、this—在构造函数中，访问本身方法时，需要利用this代表自身，去指向对应的方法和数据  
    2、写法上类似于函数，调用时类似于属性，所以起名为计算属性  
    3、顾名思义，首先它是一种属性，其次它有“计算”这个特殊性质。每次取得它的值得时候，它并不像普通属性那样直接返回结果，而是经过一系列的计算之后再返回结果。

## computed vs methods ##

#### 计算属性缓存VS方法 ####

*  除了计算属性，可以通过在表达式中调用方法来达到同样的效果：  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 3]  
    但是接下来再看个案例，将两者调用两次（如下所示），看下区别。  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 4]  
    1、计算属性是基于他们的依赖进行缓存的  
    2、计算属性只有在它的相关依赖发生改变时才会重新计算（改变才会重新计算，如果不改变情况下连续多次调用时，会发现不会再次调用该方法）  
    3、同个方法在不同界面可能调用多次，如果使用方法调用，则每次调用都会将复杂算法执行一次，浪费性能；

##### 使用 methods 来替代 computed，效果上两个是一样的，但是 computed 是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值。而使用 methods ，在重新渲染的时候，函数总会重新调用执行。 #####

##### 可以说使用 computed 性能会更好，但是如果不希望缓存，可以使用 methods 属性。 #####

#### 小结：相比之下，每当触发重新渲染时，调用方法将总会再次执行函数。 ####

### 为什么需要缓存？ ###

*  假设有一个性能开销比较大的计算属性 A，它需要遍历一个巨大的数组并做大量的计算（500万）。
 *  然后我们可能有其他的计算属性依赖于 A 。如果没有缓存，我们将不可避免的多次执行 A ！如果不希望有缓存，可以用方法来替代。
 *  综上所述，计算属性更高效一些，因为是基于依赖进行缓存。

# 侦听器/属性 #

*  简介：  
    除了计算属性，Vue 提供了一种通用的方式来观察和响应 Vue 实例上的数据变动：侦听属性/器、观察者。
 *  通俗理解：  
    当vue实例数据发生变动，watch属性可以快速检测到改变的数据  
    接下来结合具体案例了解下watch侦听器属性。

##### 接下来结合购物车案例了解下 #####

*  首先写个基本的文档结构  
    ![在这里插入图片描述][20191012114715548.png]
 *  需求：只要改动任意一项，总价都会发生更改。

##### 分析： #####

这里首先需要获取输入框的值，此时需要用到双向数据绑定指令v-model，双向数据绑定指令也是VUE框架MVVM设计模式最为明显的一个特征“双向数据绑定”。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 5]

###### 逻辑分析及监听验证： ######

当发现到单价和数量任意一个发生改变时，总价才会发生变动。  
所以首先需要检测数据的变动，此时便可以用到watch侦听器属性。例如要监听单价price，则如下所示  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 6]

###### watch监听器属性参数1： ######

newValue为改动后的新数值  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 7]

###### 改动后重新计算总价： ######

![在这里插入图片描述][20191012114911657.png]

###### 注意： ######

###### 只要监听名字对应上，即可监听任意数据的改动。 ######

*  接下来利用计算属性实现总价的动态更改，对比计算属性与侦听器watch属性区别。

###### 前言： ######

计算属性可以将一些复杂的逻辑封装进去，直接调用属性即可进行计算，且计算完毕后会进行依赖缓存，直到值发生改变时才会再次重新计算  
![在这里插入图片描述][20191012115004487.png]

###### 分析： ######

（1）因为计算属性在计算完毕后会进行依赖缓存，直到值发生改变时才会再次重新计算。  
（2）所以每次单价和数量任意一个发生更改时，即根据依赖而定，只要依赖（单价及数量）改变，总价的计算属性computedSum都会重新计算。  
![在这里插入图片描述][20191012115227493.png]

# 观察者模式 #

*  观察者模式：  
    观察者（观察者模式）  
    vue 框架本身作为调度中心，使得开发者只需要关注两个核心主体——被观察者以及被观察者变化之后所需要采取的操作。  
    ![在这里插入图片描述][20191012150340719.png]
 *  将 price和 number作为被观察者，watch 方法中为二者定义了当它们发生变动时所需要添加的操作，这里只进行了 console.log 打印，开发者可以根据自身需要完成更为复杂的功能。

## 计算属性 VS 观察者(watcher) ##

*  vue.js 官网上面，就计算属性和观察者两个之间的关系和取舍说了很多东西，但是感觉具体其实还是没有说明白。因为两个虽然某些场合下可以实现相同的功能，但如前面所述，二者所代表的核心思想确实截然不同
 *  计算属性是在读写一个属性的时候，添加了一层拦截，使得我们能够在让这个属性变得可以“计算”，虽然一方面它可以像一个普通属性直接取值，但是另一方面，它更像一个函数，可以包含大量计算操作。
 *  观察者则是为一个属性添加了一个监听，当这个属性发生变化的时候，开发者可以得到得知并采取一定的措施。
 *  目前为止，可以发现计算属性并不像方法那样灵活，因为方法使用可以随意传参，如下所示  
    ![在这里插入图片描述][20191012150536186.png]
 *  但计算属性主要用法为获取值，即getter。但没有办法进行传值，但其实也是支持传值的，即setter。

## 计算属性setter与getter ##

*  setter：
 *  注意：计算属性默认只有getter，不过在需要时也可以使用setter  
    案例验证：  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 8]
 *  setter案例：  
    setter写法上稍微有所不同（对象里包含get和set两部分，这里先写个默认getter获取部分，语法为get)  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 9]
 *  setter案例验证：
 *  接下来，在控制台试着修改下myAge值，看看浏览器会不会渲染出来改变之后的内容？  
    1、控制台输入app.myAge = 120;会发现并没有改变，也不能进行设置渲染，还给了个错误信息没有 setter。  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 10]  
    2、接下来修改一下代码，添加一个 set 方法  
    ![在这里插入图片描述][20191012151033952.png]  
    此时，再次在控制台修改测试下，结果如图所示（触发了set设置选项，且获取到了新数值大小）  
    3、接下来再修改一下代码，重新返回新值  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 11]  
    此时，再次在控制台修改测试下，结果如图所示（触发了set设置选项，且获取到了新数值大小，并且重新设置了数值）
 *  至此，在控制台动态更改年纪，会发现除了读取getter外，也可以进行设置setter  
    ![在这里插入图片描述][20191012151124315.png]

#### 触发顺序验证： ####

接下来验证下各个阶段及生命周期更新的触发顺序，修改代码如下  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 12]

*  触发顺序验证：  
    (1)验证后可以得出，在初始化阶段只触发getter属性，读取数据。
    
    (2)当动态变更时会触发setter→getter→updated

# 计算属性技巧 #

*  计算属性有两个实用的小技巧/特点  
    ①计算属性可以依赖其他计算属性；  
    ②计算属性不仅可以依赖当前vue实例的数据，还可以依赖其他实例数据  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 13]
 *  在一个计算属性里可以完成各种复杂的逻辑，包括运算、函数调用等，最终返回计算后的结果。
 *  案例解析：  
    这里创建了两个实例demo1和demo2，在demo2的计算属性reverseName中，依赖的是demo1的数据name，当name变化时，实例demo2的计算属性也会变化。  
    这样的写法在后面的组件和组件化也会用到，尤其在多人协同开发时常用，因为你写的一个组件所用数据可能需要依赖其他人的组件提供。之后会做讲解。
 *  除了上例简单的用法，计算属性还可以依赖多个Vue实例的数据，只要其中任一数据变化，计算属性就会重新执行，视图也会更新。  
    例如：下面实例展示的是在购物车内两个包裹的物品总价（01.html）

#### 01.html案例 ####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 14]

*  01.html案例解析：  
    当package1或者package2中的商品有任何变化，比如购买数量变化或者删除商品时，计算属性money就会自动更新，视图中的总价也会自动变化。
 *  getter与setter  
    计算属性包含getter和setter，上面实例都是计算属性默认用法，只是利用getter读取。此外也可以用setter函数，当手动修改计算属性的值就像修改普通数据时，便会触发setter函数，执行一些自定义操作（02.html、03.html）
 *  02.html案例：  
    该案例也是计算属性的默认用法，只是利用getter读取。  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 15]
 *  02.html案例解析：  
    该案例也是计算属性的默认用法，只是利用getter读取。
 *  03.html案例：  
    getter与setter结合  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 16]
 *  03.html案例解析：  
    当执行demo.fullName = 'Albert Einstein’时，setter就会被调用，数据firstName和lastName都会相对更新，视图也会相应更新。  
    一般用默认的getter方法来读取计算属性，直接使用默认写法，不必将getter和setter都声明。
 *  计算属性除了上述简单的文本插值外，还常用于动态设置元素样式名称class和内联样式style，此外使用组件时，计算属性也常用来动态传递props，这些都在之后课程讲解。

# 计算属性 VS 观察者VS方法 #

计算属性 VS 观察者（watcher）VS方法（methods）  
对比：  
1、计算属性，便捷，可缓存，性能较好；  
2、观察者，需要添加多个监听，较为麻烦；  
3、methods，不能缓存，每次都会计算，性能较差

# 小结 #

（1）使用计算属性还是methods取决于是否需要缓存，当遍历大数组和做大量计算时，应当使用计算属性，除非你不希望得到缓存。  
（2）因为侦听器watch相对繁琐，大多情况下推荐用计算属性computed选项处理即可。  
（3）在 Vue 中，computed 的属性可以被视为是 data 一样，可以读取和设值，因此在 computed 中可以分成 getter（读取） 和 setter（设值），一般情况下是没有 setter 的，computed 预设只有 getter ，也就是只能读取，不能改变设值  
（4）vue.js计算属性默认只有 getter，因为是默认值所以我们也常常省略不写  
（5）注意：vue.js计算属性默认只有 getter，因为是默认值所以我们也常常省略不写

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70]: /images/20230601/1e6ecd49457841fb96a2934f77153118.png
[20191012113827442.png]: /images/20230601/8fe75a28e7a4425982360f075e44ddc4.png
[20191012113856893.png]: /images/20230601/6d8538fbcf6940d4b534dd4445c9d91a.png
[20191012113918537.png]: /images/20230601/b1b76d9157514b06b29d6a7d3c8ddb9f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 1]: /images/20230601/6ae68380e08749aa9ebad36fd93d8165.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 2]: /images/20230601/e8bd55066c684e0daac1c3e1f5b8845a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 3]: /images/20230601/370d3d2b52ef4f41884f1346395e4199.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 4]: /images/20230601/74dacb94615b4aadbb4a61167e83a653.png
[20191012114715548.png]: /images/20230601/beda0276d6cf45e0bbdf6f3fe4082274.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 5]: /images/20230601/4d85d182accd4d1693cdcb8a3f4b257e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 6]: /images/20230601/ead4c009a6914fdc877e6feb5eb5a8ff.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 7]: /images/20230601/3588dbb7ad954b83a8c3c8fd2626011f.png
[20191012114911657.png]: /images/20230601/2b8fe8aadac24b7abc3d53cda904f1af.png
[20191012115004487.png]: /images/20230601/ce4b4829f9ac40609e16070a3fa30ef7.png
[20191012115227493.png]: /images/20230601/0a43644ff94e4212b603b4022aeb84f8.png
[20191012150340719.png]: /images/20230601/b4dc6ffd3934454b881bd773512b4a3f.png
[20191012150536186.png]: /images/20230601/b9f2f7ffb37845b6b552baf9b095bef7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 8]: /images/20230601/ea224f48f3494e539b07eba561686b2c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 9]: /images/20230601/4f0abbd8265f42448139d826a2eed4fc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 10]: /images/20230601/8e55324c036f4020bd8ed9889cee540c.png
[20191012151033952.png]: /images/20230601/1445e234e0e249879e45d57df36746ff.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 11]: /images/20230601/2cf46f561dce4320b9d1cc350c73a765.png
[20191012151124315.png]: /images/20230601/5ec5ae3544a84dc4971c25717c137258.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 12]: /images/20230601/1939826be0b344e8a9a11311fa983035.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 13]: /images/20230601/788b68f6b03e4a67b341297e389c106c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 14]: /images/20230601/322cf56dc56b405c856960c2460134b2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 15]: /images/20230601/bb349c9c103448da918093744b92bc3d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 16]: /images/20230601/dc07027d62254d8aaa85437abc3ccf98.png