Vue——计算属性 computed 与方法 methods 区别探究

news2024/11/9 10:24:37

文章目录

  • 前言
  • 计算属性的由来
  • 方法实现 计算属性 同样的效果
  • 计算属性缓存 vs 方法

前言

在官方文档中,给出了计算属性的说明与用途,也讲述了计算属性与方法的区别点。本篇博客只做自己的探究记录,以官方文档为准。

vue 计算属性 官方文档

计算属性的由来

正常来说,使用模板语法也能实现一些判断操作,并将判断后的数据值进行展示。如下:

<template>
    <h1>计算属性与方法实现探究</h1>
    <p>Has published books:</p>
    <span>{{ author.books.length > 0 ? 'Yes' : 'No' }}</span>
</template>
<script>
export default {
    data(){
        return{
            author: {
                name: 'John Doe',
                books: [
                    'Vue 2 - Advanced Guide',
                    'Vue 3 - Basic Guide',
                    'Vue 4 - The Mystery'
                ]
            }
        }
    }
}
</script>

效果展示如下所示:
在这里插入图片描述
但正常开发来说,在模板语法中,只会用来做基本的数据展示,数据的处理需要使用放入计算属性 computed中进行实现。
如下所示:

<template>
    <h1>计算属性与方法实现探究</h1>
    <p>Has published books:</p>
    <span>{{ author.books.length > 0 ? 'Yes' : 'No' }}</span>
    <hr>
    <span>计算属性:{{ checkBooks }}</span> <br>
</template>
<script>
export default {
    data(){
        return{
            author: {
                name: 'John Doe',
                books: [
                    'Vue 2 - Advanced Guide',
                    'Vue 3 - Basic Guide',
                    'Vue 4 - The Mystery'
                ]
            }
        }
    },
    computed:{
        checkBooks(){
            console.log("=====计算属性=====");
            return this.author.books.length > 0 ? 'Yes' : 'No';
        }
    }
}
</script>

在这里插入图片描述

由于计算属性,属于属性,所以在标签中采取{{ }}包含时,不能带有()

方法实现 计算属性 同样的效果

由于methods中,用来存放函数、方法,所以在计算属性computed中的方法依旧可以用methods实现。如下所示:

<template>
    <h1>计算属性与方法实现探究</h1>
    <p>Has published books:</p>
    <span>{{ author.books.length > 0 ? 'Yes' : 'No' }}</span>
    <hr>
    <span>计算属性:{{ checkBooks }}</span> <br>
    <hr>
    <span>方法实现:{{ checkBooks1() }}</span> <br>
</template>
<script>
export default {
    data(){
        return{
            author: {
                name: 'John Doe',
                books: [
                    'Vue 2 - Advanced Guide',
                    'Vue 3 - Basic Guide',
                    'Vue 4 - The Mystery'
                ]
            }
        }
    },
    computed:{
        checkBooks(){
            console.log("=====计算属性=====");
            return this.author.books.length > 0 ? 'Yes' : 'No';
        }
    },
    // methods 中存放函数
    methods:{
        checkBooks1(){
            console.log("*****方法实现*****");
            return this.author.books.length > 0 ? 'Yes' : 'No';
        }
    }
}
</script>

在这里插入图片描述
由于是采取methods进行数据的计算,所以数据的展示,需要使用()标识调用方法。

【注意】计算属性与方法,名称不能相同,否则会出现报错!
在这里插入图片描述

计算属性缓存 vs 方法

虽然在methods中编写一个方法调用,与计算属性中抛出一个计算结果值,能达到一样的效果。
但两者本身有很大的区别。不同之处在于计算属性值会基于其响应式依赖被缓存

这句话如何理解呢,看下面的案例:

<template>
    <h1>计算属性与方法实现探究</h1>
    <p>Has published books:</p>
    <span>{{ author.books.length > 0 ? 'Yes' : 'No' }}</span>
    <hr>
    <span>计算属性:{{ checkBooks }}</span> <br>
    <span>计算属性:{{ checkBooks }}</span> <br>
    <span>计算属性:{{ checkBooks }}</span> <br>
    <span>计算属性:{{ checkBooks }}</span> <br>
    <hr>
    <span>方法实现:{{ checkBooks1() }}</span> <br>
    <span>方法实现:{{ checkBooks1() }}</span> <br>
    <span>方法实现:{{ checkBooks1() }}</span> <br>
    <span>方法实现:{{ checkBooks1() }}</span> <br>
</template>
<script>
export default {
    data(){
        return{
            author: {
                name: 'John Doe',
                books: [
                    'Vue 2 - Advanced Guide',
                    'Vue 3 - Basic Guide',
                    'Vue 4 - The Mystery'
                ]
            }
        }
    },
    computed:{
        checkBooks(){
            console.log("=====计算属性=====");
            return this.author.books.length > 0 ? 'Yes' : 'No';
        }
    },
    // methods 中存放函数
    methods:{
        checkBooks1(){
            console.log("*****方法实现*****");
            return this.author.books.length > 0 ? 'Yes' : 'No';
        }
    }
}
</script>

查看浏览器控制台中的打印信息:
在这里插入图片描述
【发现】
当初始数组中的数据并未变化的时候,如果采取计算属性,在第一次做调用处理,并将第一次计算的结果值做缓存;后面多次重复调用,直接读取的是缓存中的数据值,而不是重复计算

方法中,每次的调用都会重新执行一次计算逻辑。

相比之下,方法调用总是会在重渲染发生时再次执行函数。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1714488.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

彻底理解浏览器的进程与线程

彻底理解浏览器的进程与线程 什么是进程和线程&#xff0c;两者的区别及联系浏览器的进程和线程总结浏览器核心进程有哪些浏览器进程与线程相关问题 什么是进程和线程&#xff0c;两者的区别及联系 进程和线程是操作系统中用于管理程序执行的两个基本概念进程的定义及理解 定义…

PHPSTOM配置Laradock,xdebug,phpunit

原理图&#xff1a; 片面理解&#xff1a; phpstorm启用一个9000端口&#xff0c;这个端口用来接收到信息后&#xff0c;启用xdebug功能。服务器端(docker), 当客户端访问laravel项目域名后, 并读取xdebug.ini的配置, 把调试的请求数据, 向配置里面的端口发送消息, 配置里面的端…

QGIS开发笔记(三):Windows安装版二次开发环境搭建(下):将QGis融入QtDemo,添加QGis并加载tif遥感图的Demo

若该文为原创文章&#xff0c;转载请注明原文出处 本文章博客地址&#xff1a;https://hpzwl.blog.csdn.net/article/details/139136356 长沙红胖子Qt&#xff08;长沙创微智科&#xff09;博文大全&#xff1a;开发技术集合&#xff08;包含Qt实用技术、树莓派、三维、OpenCV…

如何在phpMy管理对Joomla后台的登录密码进行重置

本周有一个客户&#xff0c;购买Hostease的虚拟主机&#xff0c;询问我们的在线客服&#xff0c;如何在phpMy管理对Joomla后台的登录密码进行重置&#xff1f;我们为用户提供相关教程&#xff0c;用户很快解决了遇到的问题。在此&#xff0c;我们分享这个操作教程&#xff0c;希…

​用 ONLYOFFICE 宏帮你自动执行任务:介绍与教程

使用 ONLYOFFICE 宏&#xff0c;可以来自动实现一些操作节省更多时间和精力。在本文中&#xff0c;我们集合了一些关于宏的教程&#xff0c;带您了解宏的工作原理&#xff0c;以及一些实例展示。 什么是 ONLYOFFICE 宏 如果您是一名资深 Microsoft Excel 用户&#xff0c;那么…

大数据报告有什么作用?查询方式一般有几种?

随着互联网金融的飞速发展&#xff0c;网络借贷已经成为了一种常见的融资方式。然而&#xff0c;如何在众多的平台中做出正确的选择&#xff0c;避免风险并实现最大利益&#xff0c;这就需要一份具有参考价值的大数据报告。本文将详细阐述大数据报告的作用及查询方式的几种方式…

ROS2贪吃龟练习工程

本文是ROS2基础知识的综合小应用&#xff0c;练习如何创建工作包&#xff0c;创建Node&#xff0c;定义Topic和Service&#xff0c;以及通过LaunchFile启动多个节点。基础知识可以参考&#xff1a;ROS2基础编程&#xff0c;ROS2 Topics和Services&#xff0c;ROS2 LaunchFile和…

模拟集成电路(5)----单级放大器(共栅级)

模拟集成电路(5)----单级放大器&#xff08;共栅级&#xff09; 有一些场合需要一些小的输入电阻&#xff08;电流放大器&#xff09; 大信号分析 − W h e n V i n ≥ V B − V T H ∙ M 1 i s o f f , V o u t V D D − F o r L o w e r V i n I d 1 2 μ n C o x W L ( V…

matlab安装及破解

一、如何下载 软件下载链接&#xff0c;密码&#xff1a;98ai 本来我想自己生成一个永久百度网盘链接的&#xff0c;但是&#xff1a; 等不住了&#xff0c;所以大家就用上面的链接吧。 二、下载花絮 百度网盘下载速度比上载速度还慢&#xff0c;我给充了个会员&#xff0c…

java调用远程接口下载文件

在postman中这样下载文件 有时下载文件太大postman会闪退&#xff0c;可以通过代码下载&#xff0c;使用hutool的http包

中华活页文选高中版投稿发表

《中华活页文选&#xff08;高中版&#xff09;》创刊于1960年&#xff0c;是中宣部所属中国出版传媒股份有限公司主管、中华书局主办的国家级基础教育期刊&#xff0c;曾获得“中国期刊方阵双效期刊”、国家新闻出版广电总局推荐的“百种优秀报刊”等荣誉称号。本刊以高中学科…

WAMP无法启动mysql

一种原因是原来安装过mysql,mysql默认是自启动的&#xff0c;而WAMP内置mysql会发生冲突&#xff0c;所以 解决方法&#xff1a; winR 输入 services.msc 将mysql关闭&#xff0c;并设为手动模式

扒出秦L三个槽点,我不考虑买它了

文 | Auto芯球 作者 | 雷慢 比亚迪的有一个王炸“秦L”&#xff0c;再一次吸引了我注意力&#xff0c; 我上一辆车刚卖不久&#xff0c;最近打算买第二辆车&#xff0c; 二手车和新车都有在看&#xff0c; 我又是一个坚定的实用主义者&#xff0c; 特别是现在的经济环境不…

深入解析 JSONPath:从入门到精通

码到三十五 &#xff1a; 个人主页 在数据处理和交换领域&#xff0c;JSON已经成为了一种广泛使用的数据格式&#xff0c; 如何有效地查询和操作这些数据也变得越来越重要。在这种情况下&#xff0c;JSONPath 应运而生&#xff0c;成为了一种在JSON数据中定位和提取信息的强大工…

老师如何对付挑事儿的家长?

身为老师&#xff0c;你有没有遇到过这样的家长&#xff1a;孩子在学校里闹点小矛盾&#xff0c;或者作业分数有点争议&#xff0c;他们就气势汹汹地来找你&#xff0c;说你偏心&#xff0c;甚至在其他家长面前说三道四&#xff1f;面对这种爱“挑事”的家长&#xff0c;老师们…

Nacos 2.x 系列【12】配置加密插件

文章目录 1. 前言2. 安装插件2.1 编译2.2 客户端2.3 服务端 3. 测试 1. 前言 为保证用户敏感配置数据的安全&#xff0c;Nacos提供了配置加密的新特性。降低了用户使用的风险&#xff0c;也不需要再对配置进行单独的加密处理。 前提条件&#xff1a; 版本:老版本暂时不兼容&…

AI在肿瘤学临床决策中的应用:一种多模态方法

在临床肿瘤学领域&#xff0c;多模态人工智能&#xff08;AI&#xff09;系统通过解读各类医学数据&#xff0c;展现出提升临床决策的潜力。然而&#xff0c;这些模型在所有医学领域中的有效性尚未确定。本文介绍了一种新型的多模态医疗AI方法&#xff0c;该方法利用大型语言模…

maven自建的两个模块怎么相互引用

【背景】 我们平时用Maven仓库都是引用外部别人写好的jar包&#xff0c;今天我需要自己在同一个Project下&#xff0c;在一个模块引用另一个模块中的类。案例展示如下&#xff1a; 【操作】 每个模块都有个自己的pom.xml文件&#xff0c;项目下也有个自己的pom.xml文件&#…

20240529瑞芯微官方Toybrick TB-RK3588开发板的Debian11安装iperf并测试网速

20240529瑞芯微官方Toybrick TB-RK3588开发板的Debian11安装iperf并测试网速 2024/5/29 15:09 服务器端&#xff1a;瑞芯微官方Toybrick TB-RK3588开发板&#xff1a;Debian11 客户端&#xff1a;笔记本电脑&#xff1a;Ubuntu20.04 两者通过千兆交换机连接&#xff01; toybr…

使用Java Swing制作一个飞翔的小鸟游戏

文章目录 一、需求分析二、技术介绍2.1相关技术2.2开发环境 三、功能实现1、开始2、运动3、死亡 四、部分代码实现获取源码 文章最下方获取源码&#xff01;&#xff01;&#xff01; 文章最下方获取源码&#xff01;&#xff01;&#xff01; 文章最下方获取源码&#xff01;&…