Vue(Vue2+Vue3)——11.计算属性(computed)

简介: Vue(Vue2+Vue3)——11.计算属性(computed)

11 计算属性(computed)


学习vue的计算属性之前,我们先写一个案例,我们先用插值语法实现,然后再使用vue的计算属性实现,经过对比,我们就能掌握计算属性的精髓和原理


11.1 插值语法编写案例


写一个简单的例子,姓和名分别用两个输入框控制,最后通过一个span标签拼接成一个全名

首先通过简单的插值语法实现,需要注意,输入框需要使用v-model进行绑定

看下页面,基本功能已经实现了

这时候我又有个需求,就是不管输入框输入多少内容,我只截取前两个

这个时候,我们可以直接在插值语法哪里截取,使用silce函数(start,num)从哪里开始截取,截取几位

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>初始vue</title>
    <!-- 引入vue.js -->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <div id="root">
        姓:<input type="text" v-model="firstName"><br/><br/>
        名:<input type="text" v-model="lastName"><br/><br/>
        全名:<span>{{firstName.slice(0,2)}}-{{lastName.slice(0,2)}}</span>
    </div> 
    <script type="text/javascript">
        const vm=new Vue({
            el:'#root',
            data:{
                firstName:'张',
                lastName:'三'
            }
        }) 
    </script>
</body>
</html>

这样看,我们的需求确实实现了,但是随着而来的有一个新问题,如果我的需求在改变,我要求截取完之后转成大写再排序,那么我们的插值语法再写更多的操作,就会变得很复杂,本来就是一个很简单的获取值,现在却要做这么多操作,不符合vue的初衷

我们查看vue的官网文档,可以清楚的看到:组件模板应该只包含简单的表达式,复杂的表达式则应该重构为计算属性或方法。

我们改造下代码,减少插值语法的工作量,使用methods优化代码


11.2 methods函数编写案例


插值语法调用methods函数,我们可以自定义一个函数,然后由函数进行逻辑处理并且返回结果,我们直接通过插值语法去调用函数获取返回值

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>初始vue</title>
    <!-- 引入vue.js -->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <div id="root">
        姓:<input type="text" v-model="firstName"><br/><br/>
        名:<input type="text" v-model="lastName"><br/><br/>
        全名:<span>{{fullName()}}</span>
    </div> 
    <script type="text/javascript">
        const vm=new Vue({
            el:'#root',
            data:{
                firstName:'张',
                lastName:'三'
            },methods:{
                fullName(){
                    // 截取姓 使用slice函数 从0开始截取两位,也就是前两位
                    let subFirstName=this.firstName.slice(0,2)
                     // 截取名 使用slice函数 从0开始截取两位,也就是前两位
                    let subLastName=this.lastName.slice(0,2)
                    // 返回拼接好的内容
                   return  subFirstName+'-'+subLastName
                }
            }
        }) 
    </script>
</body>
</html>

结果也是一样的,这种方式对比上面的方式,更容易维护,只需要在函数里面去处理业务返回,然后插值语法直接调用函数获取返回值即可,这也是vue推荐的方式


11.3 注意项


我们上面写的插值语法调用函数,可以发现函数后面使用有括号的 ,我们必须得加上这个括号,不然就获取不到返回值

以下为在插值语法加上函数括号

没有问题,正常获取到函数的返回值

以下为在插值语法没有加上函数括号

发现只是获取到了这个函数,并没有获取到返回值,所以我们用的时候必须要加上括号


11.4 计算属性编写案例


下面我们使用计算属性编写案例

所谓计算属性就是拿着现有的属性进行操作,已经有的属性操作之后的结果就是计算属性,在vue中是把属性和计算属性分开放的,data里面放的是属性,计算属性需要放在computed里面

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>初始vue</title>
    <!-- 引入vue.js -->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <div id="root">
        姓:<input type="text" v-model="firstName"><br/><br/>
        名:<input type="text" v-model="lastName"><br/><br/>
        全名:<span>{{fullName}}</span>
    </div> 
    <script type="text/javascript">
        const vm=new Vue({
            el:'#root',
            data:{
                firstName:'张',
                lastName:'三'
            },computed:{
                fullName:{
                    //当有人读fullName时,get就会被调用,且返回值就是fullName的值
                    get(){
                        // 此处的this就是vue实例对象
                        return this.firstName+'-'+this.lastName
                    }
                }
            }
        }) 
    </script>
</body>
</html>

代码貌似写完了,我们研究一个问题,那就是get什么时候被调用

更新代码,注意我写一个5个全名,按理来说我们的get应该调用五次,但是实际上只调用了一次

为什么呢?这里就要说下get其实是有一个缓存的操作的,当它读取到第一个fullName的时候,解析到结果,那么以后再读到fullName就不会重新解析,而是看看有没有被解析过,直接复用,那么就有一个问题,如果后面fullName改了,缓存拿到的数据还是旧数据,那肯定不行的

这时候就要说下get的两个调用时机了


11.5 get调用的两个时机


1 初次读取数据时


就是第一次读取到数据了,会被调用get方法


2 所依赖数据发生变化时


所谓依赖数据就是构成计算属性的条件,比如a+b=c,a和b都是已有的属性,c是计算出来的属性,那么当a和b的值发生得时候,get也会被调用,刷新获取最新数据属性,这样就避免了拿到旧缓存数据的情况


11.6 set方法


get是获取属性,那么set就是修改属性,没有set我们就不能修改计算属性,set不是必写的,如果这个计算属性就是提供给别人用的,那么完全没必要写了,如果这个属性以后可能会被别人改,那么建议写上set

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>初始vue</title>
    <!-- 引入vue.js -->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <div id="root">
        姓:<input type="text" v-model="firstName"><br/><br/>
        名:<input type="text" v-model="lastName"><br/><br/>
        全名:<span>{{fullName}}</span><br/><br/>
    </div>  
    <script type="text/javascript">
        const vm=new Vue({
            el:'#root',
            data:{
                firstName:'张',
                lastName:'三'
            },computed:{
                fullName:{
                    //当有人读fullName时,get就会被调用,且返回值就是fullName的值
                    get(){
                        // 此处的this就是vue实例对象
                        return this.firstName+'-'+this.lastName
                    },
                    // 当fullName有人修改的时候,会被调用,参数就是修改值
                    set(value){
                          //按照指定字符把字符串拆成数组
                          const arr=value.split('-')
                          console.log(arr)
                          this.firstName=arr[0]
                          this.lastName=arr[1]  
                    }
                }
            }
        }) 
    </script>
</body>
</html>

注意:不管是get还是set,都不能写成箭头函数,不然this就不是vue实例对象了!


11.7 计算属性简写形式


简写形式的前提:一旦计算属性只考虑读取展示,不考虑修改数据,才能用简写形式。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>初始vue</title>
    <!-- 引入vue.js -->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <div id="root">
        姓:<input type="text" v-model="firstName"><br/><br/>
        名:<input type="text" v-model="lastName"><br/><br/>
        全名:<span>{{fullName}}</span><br/><br/>
    </div>  
    <script type="text/javascript">
        const vm=new Vue({
            el:'#root',
            data:{
                firstName:'张',
                lastName:'三'
            },computed:{
                // 完整写法
                // fullName:{
                //     //当有人读fullName时,get就会被调用,且返回值就是fullName的值
                //     get(){
                //         // 此处的this就是vue实例对象
                //         return this.firstName+'-'+this.lastName
                //     },
                //     // 当fullName有人修改的时候,会被调用,参数就是修改值
                //     set(value){
                //           //按照指定字符把字符串拆成数组
                //           const arr=value.split('-')
                //           console.log(arr)
                //           this.firstName=arr[0]
                //           this.lastName=arr[1]  
                //     }
                // }
                //简写 这个函数名称就是get方法
                fullName(){
                    return this.firstName+'-'+this.lastName
                }
            }
        }) 
    </script>
</body>
</html>


11.8 总结


计算属性:

1 定义:要用的属性不存在,要通过已有属性计算得来

2 原理:底层借助了Object.defineproperty方法提供的getter和setter

  • 3 get函数什么时候被执行:
  •  (1)初始读取时会执行一次
  •  (2)当依赖的数据发生改变时会被再次调用
  •   4 优势:与methods相比,内部有缓存机制(复用),效率更高
  •   5 备注:
  •  1 计算属性最终会出现在vue实例对象上,直接读取即可
  •  2 如果计算属性要被修改,那必须写set函数去响应修改,且set中要引起计算时依赖的数据发生改变
相关文章
|
1天前
|
JavaScript
vue知识点
vue知识点
12 6
|
4天前
|
存储 JavaScript API
Vue 全局状态管理新宠:Pinia实战指南
 随着Vue.js项目的日益复杂,高效的状态管理变得至关重要。Pinia作为Vue.js官方推荐的新一代状态管理库,以其简洁的API和强大的功能脱颖而出。本文将带您快速上手Pinia,从安装到应用,轻松实现Vue.js项目的全局状态管理,提升开发效率和项目可维护性。
|
10天前
|
存储 缓存 JavaScript
vue代码优化方案
【7月更文挑战第13天】 **Vue.js 优化要点:** 分解大组件以提高复用性和加载速度;利用计算属性与侦听器优化数据处理;使用Object.freeze()减少响应式数据;借助Vuex或Composition API管理状态;实现虚拟滚动和无限加载提升长列表性能;路由懒加载减少初始加载时间;用Vue DevTools检测性能瓶颈;定期代码审查与重构;应用缓存策略;遵循最佳实践与团队规范,提升应用整体质量。
24 2
|
11天前
|
JavaScript
|
13天前
|
JavaScript
【vue】el-dialog 内的tinymce弹窗被遮挡的解决办法 及 tinymce打开弹出菜单后直接关闭对话组件,导致该弹出菜单残留
【vue】el-dialog 内的tinymce弹窗被遮挡的解决办法 及 tinymce打开弹出菜单后直接关闭对话组件,导致该弹出菜单残留
27 6
|
13天前
|
JavaScript 前端开发
【vue】 el-table解决分页不能筛选全部数据的问题
【vue】 el-table解决分页不能筛选全部数据的问题
32 4
|
13天前
|
JavaScript
【vue】 vue2 监听滚动条滚动事件
【vue】 vue2 监听滚动条滚动事件
25 1
|
13天前
|
JavaScript 定位技术
【天地图】vue 天地图 T is not defined
【天地图】vue 天地图 T is not defined
35 1
|
18天前
|
数据采集 JavaScript 前端开发
Vue框架的优缺点是什么
【7月更文挑战第5天】 Vue框架:组件化开发利于重用与扩展,响应式数据绑定简化状态管理;学习曲线平缓,生态系统丰富,集成便捷,且具性能优化手段。缺点包括社区规模相对小,类型支持不足(Vue 3.x改善),路由和状态管理需额外配置,SEO支持有限。随着发展,部分缺点正被克服。
26 1