Vue框架学习笔记——计算属性

逃离我推掉我的手 2024-02-17 10:32 61阅读 0赞

#### 文章目录 ####

*  前文提要
 *  代码需求描述
 *   *  插值语法实现
     *  methods实现
 *  计算属性
 *   *   *  getter执行时间：
         *  setter
 *  计算属性简写形式（只读不改，才能如此简写）
 *  slice截取元素，限制输入字符数量

--------------------

## 前文提要 ##

本人仅做个人学习记录，如有错误，请多包涵

--------------------

## 代码需求描述 ##

输入姓和名，能够将二者结合起来输出，姓和名之间使用’-'符号分隔

### 插值语法实现 ###

<body>
      <div id="box">
        姓：<input type="text" placeholder="姓" v-model:value="firstName"><br/><br/>
        名：<input type="text" placeholder="名" v-model:value="secondName"><br/><br/>
        姓名：{
       {firstName}}-{
       {secondName}}
      </div>
      <script type="text/javascript">
        Vue.config.productionTip = false
        const vm = new Vue({
          
          el: '#box',
          data: {
          
            firstName:'张',
            secondName:'三',
          }
        })
      </script>
    </body>

其中`v-model:value=`可以简写为`v-model=`，也就是’:value’可以省略掉  
实现效果如下：  
![在这里插入图片描述][110e49fb17cf484ea093f5b9df3738b8.png]  
![在这里插入图片描述][0fdb81a51a5941e699c2b5859d0f51e3.png]

### methods实现 ###

代码如下：

methods中的函数会被添加到Vue实例中，因此可以直接在插值语法中调用。  
**data中的任何数据发生变化的时候，Vue的模版都会被重新解析**，模版中含有methods中的name函数，**methods不管函数返回值有没有变化，都会调用一次函数**，因此会多次调用name函数。  
所以每次查看和修改姓和名，都会调用一次该函数。  
method中的函数，没有写成箭头函数，则可以从this指针这里访问Vue实例，Vue实例中因为数据代理添加了data中的数据，因此可以如此写。

呈现效果：  
![在这里插入图片描述][775160a9a27a49508045502b3acf94e4.png]

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

每在名中添加、删除一次字符，都会调用一次函数，在控制台输出一次1。

就算修改的不是和函数返回值有关的属性，也会调用函数  
![在这里插入图片描述][3dc27aa585574a839abd3a51c6fcd132.png]

## 计算属性 ##

将上文的代码修改为这样，使用计算属性computed也可以起到上文的效果，而且效率更高。

<body>
      <div id="box">
        姓：<input type="text" placeholder="姓" v-model:value="firstName"><br /><br />
        名：<input type="text" placeholder="名" v-model:value="secondName"><br /><br />
        姓名：{
       {name_}}<br /><br />
        测试：<input type="text" placeholder="测试" v-model:value="nn"><br /><br />
      </div>
      <script type="text/javascript">
        Vue.config.productionTip = false
        const vm = new Vue({
          
          el: '#box',
          data: {
          
            firstName: '张',
            secondName: '三',
            nn:"yi"
          },
          methods: {
          
            name(){
          
              return this.firstName+'-'+this.secondName
            }
          },
          computed:{
          
            name_:{
          
              get(){
          
                console.log('调用了get')
                return this.firstName+'-'+this.secondName
              },
              set(value){
          
                console.log('调用了set')
                const arr=value.split('-')
                this.firstName=arr[0]
                this.secondName=arr[1]
              }
            }
          }
        })
      </script>
    </body>

呈现效果：  
![在这里插入图片描述][56118b1d13fc465e952021a4814c8732.png]  
代码解释：  
computed中的属性不能和methods中的函数名一致，会出错。  
set函数中无法直接通过firstName访问到data中的firstName，必须通过this指针锁定Vue实例，再进一步锁定firstName

计算属性中的属性是不存在的，是使用其他的属性计算出来的，这也是为什么叫做计算属性的原因。  
原理：底层借助了Object.defineproperty提供的getter和setter。

#### getter执行时间： ####

（1）初次读取时，会执行一次。  
（2）当依赖的数据被改变时会再次调用。

**注意点：不要使用vm.data\_.get()调用函数，这是错误的**

和methods方法不同，当返回的数据没有发生变化的时候，methods是会继续执行一遍了，而computed内部含有缓存机制（复用），当没有触发get函数执行的时候，有用到该计算属性的时候，会直接从缓存中提取，效率更高，调试更加方便。

示例图片：  
![在这里插入图片描述][9f2d3a544423497587b6bc02a08c4491.png]  
当你修改的属性，和计算属性中包含的属性全无关系的时候，就算整个模版被重新解析，methods中的函数重新执行，computed中的计算属性也只会执行最开始的那次（因为相关data属性没有发生变化）

#### setter ####

![在这里插入图片描述][97763e7a75d445deb8845a285393df68.png]  
当你对计算属性进行更改的时候，会调用setter，而和计算属性有关的属性发生变化的时候，会触发调用get函数，因此控制台会如此输出

## 计算属性简写形式（只读不改，才能如此简写） ##

当你规定的计算属性只读不写，则可以通过修改上文代码，写成这样应用：

computed:{
        
      name_:function(){
        
          console.log('调用了get')
          return this.firstName+'-'+this.secondName
      }
    }

注意：要求只读不写，别修改计算属性。  
不过这还不是最简形式，还可以进一步简化：

computed:{
        
      name_(){
        
          console.log('调用了get')
          return this.firstName+'-'+this.secondName
      }
    }

注意name\_不是函数，依旧是属性。

## slice截取元素，限制输入字符数量 ##

可以将getter中的代码改为下述样式：

return this.firstName.slice(0,3)+'-'+this.secondName

从而限制字符个数，最少为0，最多3个

示例图片：  
![在这里插入图片描述][052ca29076c443ea847b2e6186d9be38.png]  
超过3个字符的无法记录到计算属性中。

--------------------

至此，结束。

`如果你觉得这篇文章写的不错，多多点赞~收藏吧！`

[110e49fb17cf484ea093f5b9df3738b8.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/06/b24b3be8d7c64404955c247cd9f1ea8f.png
[0fdb81a51a5941e699c2b5859d0f51e3.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/06/4c1d1b601a78440ca32a1d11b47484f3.png
[775160a9a27a49508045502b3acf94e4.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/06/aa0086a6dc944ee1b4812d4d4fe73425.png
[a8ffaa487f7f4c94bf1231f66bfac905.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/06/7cdfd0a4ccf4488b9cccd2f1ab4bfd59.png
[3dc27aa585574a839abd3a51c6fcd132.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/06/fd05aa6c93c943b8804e52af1e6fd169.png
[56118b1d13fc465e952021a4814c8732.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/06/ed91fc56ae4e4064be8abd8a17c6316f.png
[9f2d3a544423497587b6bc02a08c4491.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/06/07f726fe7a814e838b38a3170815c5c6.png
[97763e7a75d445deb8845a285393df68.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/06/fb135e24e90c42e3b77fe3484d6bad45.png
[052ca29076c443ea847b2e6186d9be38.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/06/9d845a059b624f348bf0fde2ae9dba96.png