Vue计算属性&侦听器&方法

谁践踏了优雅 2023-06-07 03:24 4阅读 0赞

# 字符串截取操作 #

*  js中字符串方法操作有很多:concat、indexOf…. 等等，本节主要介绍两种经常混淆的字符串截取方法:**substring**和**substr**

## （1）substring ##

- 作用：用于提取字符串中介于两个指定下标之间的字符
     - 语法：substring(start,end)
     - 语法解析：start开始和end结束的位置，从零开始的索引，**包头不包尾**

*  定义：提取指定字符串中介于两个指定参数下标之间的字符
 *  **参数描述：**  
    定义：提取指定字符串中介于两个指定参数下标之间的字符  
    参数描述：  
    ![在这里插入图片描述][20191012162403450.png]  
    **substring验证**
 *  1、只有一个参数（自动输出后面所有字符）  
    ![在这里插入图片描述][20191012162508532.png]
 *  2、start > end  
    ![在这里插入图片描述][2019101216252437.png]  
    **当读取位置大于结束位置的时候，substring会自动调整位置**
 *  3、start = end  
    ![在这里插入图片描述][20191012162648671.png]
 *  4、start<0 或者 end<0  
    ![在这里插入图片描述][20191012162700716.png]
 *  5、正常取值start<end（包头不包尾）  
    ![在这里插入图片描述][20191012162717890.png]

## （2）substr ##

*  定义：返回字符串的一个子串，传入参数是起始位置和长度
 *  注意：substr是根据长度取值
 *  语法：substr(start,length)
 *  语法解析：返回从start位置开始length长度的字串，参数描述  
    ![在这里插入图片描述][20191012162832250.png]  
    **substr验证**
 *  1、只有一个参数，正整数（自动输出后面所有字符）  
    ![在这里插入图片描述][20191012162905149.png]
 *  2、只有一个参数，正整数且start为负数  
    ![在这里插入图片描述][20191012162921978.png]  
    **如果start为负数，则start=str.length+start**
 *  3、两个参数，length 为 0 或负数  
    ![在这里插入图片描述][20191012162954644.png]  
    **返回一个空字符串**
 *  4、两个参数，length为正整数（包头包尾）  
    ![在这里插入图片描述][20191012163014868.png]

# 计算属性简介 #

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

**通过之前章节，已经可以搭建一个简单的Vue应用，在模板里双向绑定一些数据或者表达式。**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70]

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

## **计算属性**简介 ##

**步骤：3部曲**

*  调用
 *  computed选项
 *  方法返回值  
    **如下图：**  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 2]
 *  **注意：**
    
     *  1、this—在构造函数中，访问本身方法时，需要利用this代表自身，去指向对应的方法和数据。
     *  2、写法上类似于函数，调用时类似于属性，所以起名为计算属性

# computed vs methods #

*  计算属性缓存VS方法
    
     *  除了计算属性，可以通过在表达式中调用方法来达到同样的效果：  
        ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 3]
 *  **但是接下来再看个案例，将两者调用两次**
 *  **（如下所示），看下区别。**
 *  计算属性调用一次
 *  普通方法调用两次  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 4]  
    **计算属性缓存VS方法**
 *  1、计算属性是基于他们的依赖进行缓存的
 *  2、计算属性只有在它的相关依赖发生改变时才会重新计算（改变才会重新计算，如果不改变情况下连续多次调用时，会发现不会再次调用该方法）
 *  3、同个方法在不同界面可能调用多次，如果使用方法调用，则每次调用都会将复杂算法执行一次，浪费性能；
 *  使用 methods 来替代 computed，效果上两个是一样的，但是 computed  
    是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值。而使用 methods ，在重新渲染的时候，函数总会重新调用执行。
 *  可以说**使用 computed 性能会更好**，但是如果不希望缓存，可以使用 methods 属性。
 *  **小结**：相比之下，每当触发重新渲染时，调用方法将总会再次执行函数。  
    **为什么需要缓存？**
 *  假设有一个性能开销比较大的计算属性 A，它需要遍历一个巨大的数组并做大量的计算。
 *  然后我们可能有其他的计算属性依赖于 A 。如果没有缓存，我们将不可避免的多次执行 A ！如果不希望有缓存，可以用方法来替代。
 *  综上所述，计算属性更高效一些，因为是基于依赖进行缓存。

# 侦听器/属性 #

## 简介： ##

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

## 通俗理解： ##

*  当vue实例数据发生变动，watch属性可以快速检测到改变的数据
 *  接下来结合具体案例了解下watch侦听器属性。
 *  **接下来结合购物车案例了解下**
    
     *  首先写个基本的文档结构  
        ![在这里插入图片描述][20191012165326819.png]  
        **需求：只要改动任意一项，总价都会发生更改。**
 *  **分析：**
 *  这里首先需要获取输入框的值，此时需要用到双向数据绑定指令v-model，双向数据绑定指令也是VUE框架MVVM设计模式最为明显的一个特征“双向数据绑定”。  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 5]
 *  **逻辑分析及监听验证：**
 *  当发现到单价和数量任意一个发生改变时，总价才会发生变动。  
    所以首先需要检测数据的变动，此时便可以用到watch侦听器属性。例如要监听单价price，则如下所示  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 6]
 *  **watch监听器属性参数1：**
 *  newValue为改动后的新数值  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 7]
 *  **分析：**
    
     *  因为计算属性在计算完毕后会进行依赖缓存，直到值发生改变时才会再次重新计算。
     *  所以每次单价和数量任意一个发生更改时，即根据依赖而定，只要依赖（单价及数量）改变，总价的计算属性computedSum都会重新计算。  
        **对比后发现，计算属性写法相对于watch侦听器属性简洁了很多 如图：**

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

# 计算属性setter与getter #

*  **目前为止，可以发现计算属性并不像方法那样灵活，因为方法使用可以随意传参，如下所示**  
    ![在这里插入图片描述][20191012170327862.png]
 *  但计算属性主要用法为获取值，即getter。但没有办法进行传值，但其实也是支持传值的，即setter。
 *  **setter：**
 *  注意：计算属性默认只有getter，不过在需要时也可以使用setter
 *  案例验证：  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 8]  
    该案例只是简单的获取，即计算属性默认只有getter获取。  
    如果想进行设置，需要用到setter。
 *  **setter写法上稍微有所不同，对象里包含get和set两部分。**  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 9]
 *  接下来打开控制台，在控制台动态更改年纪，会发现除了读取getter外，也可以进行设置setter  
    ![在这里插入图片描述][20191012170606118.png]

## 计算属性有两个实用的小技巧/特点 ##

*  ①计算属性可以依赖其他计算属性；
 *  ②计算属性不仅可以依赖当前vue实例的数据，还可以依赖其他实例数据  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 10]

# 计算属性用法 #

*  在一个计算属性里可以完成各种复杂的逻辑，包括运算、函数调用等，最终返回计算后的结果。
 *  除了上例简单的用法，计算属性还可以依赖多个Vue实例的数据，只要其中任一数据变化，计算属性就会重新执行，视图也会更新。
 *  **例如：下面实例展示的是在购物车**内两个包裹的物品总价（01.html）  
    **01.html案例**  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 11]
 *  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_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 12]  
        *02.html案例解析：*
        
         *  *该案例也是计算属性的默认用法，只是利用getter读取。*
 *  **03.html案例**
 *  getter与setter结合  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 13]  
    \**03.html案例解析：*
 *  *当执行demo.fullName = 'Albert  
    Einstein’时，setter就会被调用，数据firstName和lastName都会相对更新，视图也会相应更新。*
 *  *一般用默认的getter方法来读取计算属性，直接使用默认写法，不必将getter和setter都声明。*  
    **计算属性除了上述简单的文本插值外，还常用于动态设置元素样式名称class和内联样式style，此外使用组件时，计算属性也常用来动态传递props，这些都在之后课程讲解。**

# 小结 #

*  （1）使用计算属性还是**methods**取决于是否需要缓存，当遍历大数组和做大量计算时，应当使用计算属性，除非你不希望得到缓存。
 *  （2）因为侦听器watch相对繁琐，大多情况下推荐用计算属性**computed**选项处理即可。  
    ***好啦，今天发了两篇，这一篇比较全面一点，有问题留言小编，嘿嘿***

[20191012162403450.png]: /images/20230601/c728914de3da48b0b3b99ca8d9f9ce83.png
[20191012162508532.png]: /images/20230601/1cc12a8b069145998569ad5d0df21671.png
[2019101216252437.png]: /images/20230601/0b006e74cec2494386f4a175d22a6e77.png
[20191012162648671.png]: /images/20230601/77146431a65542479143238c34bdebad.png
[20191012162700716.png]: /images/20230601/ab8adea43882469bb443908f9a2ff0b7.png
[20191012162717890.png]: /images/20230601/987bbd1f35e146a19837d4868a186756.png
[20191012162832250.png]: /images/20230601/14691c2cc55b4b81b24a2a704a28bc54.png
[20191012162905149.png]: /images/20230601/825d07a540f543c5b8cee350bfdd8085.png
[20191012162921978.png]: /images/20230601/2ec1bd7eb8af4d498737387b8a87df7a.png
[20191012162954644.png]: /images/20230601/6b2d84c21dbc45fea26ba40563ca9f3f.png
[20191012163014868.png]: /images/20230601/dffe654f91bd4279897973b98535eb01.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70]: /images/20230601/ae8d862d4ae14e6f8d4195eff01a62c1.png
[20191012163308971.png]: /images/20230601/bde51b998bd84b85aace0424c19b7260.png
[20191012163432362.png]: /images/20230601/5f793f026914410d95019b52b3966dc0.png
[2019101216352261.png]: /images/20230601/48166724ed3841daa3cf7f355077bcc3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 1]: /images/20230601/04197027e6c24594b28b8cf9aa0bd9ba.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 2]: /images/20230601/eb9883e00b03455d9806e98b77b3e1be.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 3]: /images/20230601/aedb6cb0682f439e864ac3bb359f6404.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 4]: /images/20230601/9172ce932e3c4816bef7c95a428c08ed.png
[20191012165326819.png]: /images/20230601/f9a7aca212b2427e80fd1da89be767fe.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 5]: /images/20230601/7b13819dd2f446b7903e1b7546a2d47e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 6]: /images/20230601/99228556a2ad401688d2a298342f074b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 7]: /images/20230601/62c6a3a6d55c46fe8b19c1c25c9fe7c9.png
[20191012170218724.png]: /images/20230601/1c20f22096c447ce918d1813bcb7600d.png
[20191012170327862.png]: /images/20230601/9450ff2bb91d49618eca7d0ecc72fb77.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 8]: /images/20230601/a6c23d0d1dcb45829c1cde3d998e6d93.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 9]: /images/20230601/7a7d110bcaa74534bc4e800590d49d4d.png
[20191012170606118.png]: /images/20230601/f0f5551752744e4fa10d512e9b38e62c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 10]: /images/20230601/d5de817fe3ce4ef7b028b1b19166bcf4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 11]: /images/20230601/add358e9a2c2448bb2a39bcac6599442.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 12]: /images/20230601/85bf380856db4ef8ae3ec38566db8619.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 13]: /images/20230601/8fd03a3562594164b46e6adea78f00e2.png