Vue之计算属性(computed)

简介: Vue之计算属性(computed)



前言

计算属性


一、计算属性

  1. 定义:要用的属性不存在,要通过已有的属性来计算。
  2. 原理:底层借助了Object.defineproperty方法提供的getter和setter。(如果不了解getter和setter可以看一下我数据代理那篇文章的讲解)
  3. get函数的执行:
    (1)初次读取时会执行一次。
    (2)当依赖的数据发生变化时会再次调用。
  4. 优势:与methods实现相比,内部有缓存机制(复用),效率更高,调试方便。
  5. 备注:
    (1)计算属性最终会出现在Vue实例上,直接读取使用即可。
    (2)如果计算属性要被修改,那必须写set函数去响应修改,且set中要引起计算时依赖的数据发生改变。

如果不太明白请继续往下看

二、实例

1.缓存优势

计算属性内部的属性,在第一次访问时会读取它的值,然后存入缓存

代码如下(示例):

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <div id="root">
        姓:<input type="text" v-model="name1"><br> 名:
        <input type="text" v-model="name2"><br> 全称:
        <input type="text" v-model="fullname">
        <input type="text" v-model="fullname">
        <input type="text" v-model="fullname">
    </div>
    <script>
        var vm = new Vue({
            el: "#root",
            data: {
                name1: '王',
                name2: '五'
            },
            computed: {
                fullname: {
                    get() {
                        console.log("有人读取了fullname");
                        return this.name1 + '-' + this.name2
                    },
                    set(value) {
                        arr = value.split("-")
                        this.name1 = arr[0]
                        this.name2 = arr[1]
                    }
                }
            }
        })
    </script>
</body>
</html>

由上面代码和控制台图片分析:代码中有三个input框都绑定了fullname的值,但是在控制台就打印了一次‘有人读取了fullname’(注:get函数在属性被访问时触发),正常逻辑应该调用get三次、读取三次,实际上是因为计算属性内部有缓存,第一次访问后,后面的都直接访问缓存内的数据,节约时间,复用高。但是又有疑问了,有了缓存,但是当fullname发生改变,那是否还是读取的原缓存的值呢?

我在输入框内输入了123这三个数,输入过程中下面的控制台每输入一个数字,就有个‘有人读取了fullname’。

其实这个例子就想告诉大家,计算属性内属性的get在第一次读取时,和所依赖的数据发生改变时都会调用。大家可以改变姓、名发现是一样的会被调用

2.简写

简写其实就是当确定计算属性内的属性只读不更改,即只有get函数没有写set函数时简写的方式

代码如下(示例):

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <div id="root">
        姓:<input type="text" v-model="name1"><br> 名:
        <input type="text" v-model="name2"><br> 全称:
        <input type="text" v-model="fullname">
        <input type="text" v-model="fullname">
        <input type="text" v-model="fullname">
    </div>
    <script>
        var vm = new Vue({
            el: "#root",
            data: {
                name1: '王',
                name2: '五'
            },
            computed: {
                fullname() {
                    console.log("有人读取了fullname");
                    return this.name1 + '-' + this.name2
                }
            }
        })
    </script>
</body>
</html>

需要注意一下,上诉fullname并不是函数,所以在容器内书写的时候不能带括号,fullname在Vue实例身上仍然是一个属性

3.补充

最后补充一下,computed内的属性最后是在Vue实例身上,并不在Vue实例的_data身上,只有data内的属性才在Vue的_data上。


总结

以上就是计算属性的大致讲解。

目录
打赏
0
2
2
0
11
分享
相关文章
|
16天前
|
vue实现任务周期cron表达式选择组件
vue实现任务周期cron表达式选择组件
75 4
Vue实现动态数据透视表(交叉表)
Vue实现动态数据透视表(交叉表)
177 13
属性描述符初探——Vue实现数据劫持的基础
属性描述符还有很多内容可以挖掘,比如defineProperty与Proxy的区别,比如vue2与vue3实现数据劫持的方式有什么不同,实现效果有哪些差异等,这篇博文只是入门,以后有时间再深挖。 博客不应该只有代码和解决方案,重点应该在于给出解决方案的同时分享思维模式,只有思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
Vue2+VueRouter2+webpack 构建项目
1). 安装Node环境和npm包管理工具 检测版本 node -v npm -v 图1.png 2). 安装vue-cli(vue脚手架) npm install -g vue-cli --registry=https://registry.
1112 0
|
5月前
|
vue使用iconfont图标
vue使用iconfont图标
226 1
极致的灵活度满足工程美学:用Vue Flow绘制一个完美流程图
本文介绍了使用 Vue Flow 绘制流程图的方法与技巧。Vue Flow 是一个灵活强大的工具,适合自定义复杂的流程图。文章从环境要求(Node.js v20+ 和 Vue 3.3+)、基础入门案例、自定义功能(节点与连线的定制、事件处理)到实际案例全面解析其用法。重点强调了 Vue Flow 的高度灵活性,虽然预定义内容较少,但提供了丰富的 API 支持深度定制。同时,文中还分享了关于句柄(handles)的使用方法,以及如何解决官网复杂案例无法运行的问题。最后通过对比 mermaid,总结 Vue Flow 更适合需要高度自定义和复杂需求的场景,并附带多个相关技术博客链接供进一步学习。
Vue Router 核心原理
Vue Router 是 Vue.js 的官方路由管理器,用于实现单页面应用(SPA)的路由功能。其核心原理包括路由配置、监听浏览器事件和组件渲染等。通过定义路径与组件的映射关系,Vue Router 将用户访问的路径与对应的组件关联,支持哈希和历史模式监听 URL 变化,确保页面导航时正确渲染组件。
ry-vue-flowable-xg:震撼来袭!这款基于 Vue 和 Flowable 的企业级工程项目管理项目,你绝不能错过
基于 Vue 和 Flowable 的企业级工程项目管理平台,免费开源且高度定制化。它覆盖投标管理、进度控制、财务核算等全流程需求,提供流程设计、部署、监控和任务管理等功能,适用于企业办公、生产制造、金融服务等多个场景,助力企业提升效率与竞争力。
178 12