【Vue】computed 和 methods 的区别

概述

  1. 在使用时,computed 当做属性使用,而 methods 则当做方法调用
  2. computed 可以具有 getter 和 setter,因此可以赋值,而 methods 不行
  3. computed 无法接收多个参数,而 methods 可以
  4. computed 具有缓存,而 methods 没有

详解

vue 对 methods 的处理比较简单,只需要遍历 methods 配置中的每个属性(方法),将其对应的函数使用 bind 绑定当前组件实例后,复制其引用到组件实例中即可。

而vue对computed的处理会稍微复杂一些。

当组件实例触发生命周期函数 beforeCreate 后,它会遍历 computed 配置中的所有属性,为每一个属性创建一个Watcheri对象,并传入一个函数,该函数的本质其实就是 computed 配置中的 getter,这样一来,getter 运行过程中就会收集依赖。

但是和渲染函数不同,为计算属性创建的 Watcher 不会立即执行,因为要考虑到该计算属性是否会被渲染函
数使用,如果没有使用,就不会得到执行。因此,在创建 Watcher 的时候,它使用了 lazy 配置,lazy 配置可以让Watcher不会立即执行。

收到 lazy 的影响,Watcher 内部会保存两个关键属性来实现缓存,一个是value,一个是 dirty。

value 属性用于保存 Watcher 运行的结果,受 lazy 的影响,该值在最开始是undefined。

dirty 属性用于指示当前的 value 是否已经过时了,即是否为脏值,受 1azy 的影响,该值在最开始是 true。

Watchert 创建好后,vue 会使用代理模式(Object.defineProperty),将计算属性挂载到组件实例中。当读取计算属性(getter)时,vue 检查其对应的 Watcher 是否是脏值,如果是,则运行函数,计算依赖,并得到对应的值,保存在 Watcher 的value中,然后设置 dirty 为 false,然后返回。

如果 dirty 为 false, 则直接返回 value。

image.png

此外,在依赖收集时,被依赖的数据不仅会收集到计算属性的Watcher,还会收集到组件的 Watcher。当计算属性的依赖变化时,会先触发计算属性的 Watcher 执行,此时,它只需设置 dirty 为 true 即可,不做任何处理。

由于依赖同时会收集到组件的 Watcher,因此组件会重新渲染,而重新渲染时又读取到了计算属性,由于计
算属性目前已为 dirty,因此会重新运行getter进行运算。

而对于计算属性的 setter,则极其简单,当设置计算属性时,直接运行setter即可。

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

python数据分析——apply 1

参考资料:活用pandas库 apply是指把函数同时作用于DataFrame的每一行或每一列。类似于编写一些跨每行或每列的for循环,并同时调用apply函数。 1、函数 函数是对python代码进行分组和复用的一种方法。如果某段代码会被多次使用,并且使用时是需…

kubernetes(k8s) v1.30.1 创建本地镜像仓库 使用本地docker镜像仓库部署服务 Discuz X3.5 容器搭建论坛

1 master11创建本地镜像仓库 [rootmaster11 ~]# docker run -d -p 5000:5000 --restartalways --name registry registry:2 Unable to find image registry:2 locally 2: Pulling from library/registry 79e9f2f55bf5: Pull complete 0d96da54f60b: Pull complete 5b27040df…

ROS for LabVIEW:实现LabVIEW与ROS的无缝集成

ROS for LabVIEW是由Tufts大学开发的一套VI集合,旨在实现LabVIEW与ROS(Robot Operating System)的无缝集成。ROS是一个灵活的机器人软件框架,而LabVIEW则是一种强大的图形化编程工具。这个工具包的推出使得LabVIEW用户能够直接与R…

人工智能——什么是摩尔定律以及它如何影响人工智能?

1. 概述 摩尔定律是现代技术发展中一个至关重要的基石。它预言了微芯片上晶体管的数量大约每两年翻一番,这一现象导致了计算能力的指数级增长。在过去的50多年里,这一定律一直是推动技术进步的强大动力,并且对人工智能领域产生了深远的影响。…

设计模式10——装饰模式

写文章的初心主要是用来帮助自己快速的回忆这个模式该怎么用,主要是下面的UML图可以起到大作用,在你学习过一遍以后可能会遗忘,忘记了不要紧,只要看一眼UML图就能想起来了。同时也请大家多多指教。 装饰模式 是一种结构型模式。…

IDEA软件和插件安装

安装IDEA版本:IDEA windows 2021.1.3 使用该版本的IDEA,并且安装下面插件后,个人认为非常好用,并且可以不用破解,无限使用企业版,了解具体方法可以留言或私信。 记录几个好用的IDEA插件,后续持…

编程-辅助工具-Git下载

文章目录 1、前言2、Git官网地址3、迅雷下载 1、前言 采用Git能下载github上的代码,其下载是采用官网下载的,但是下载速度比较慢,网上也推荐了镜像的方式,但是有些链接失效了,突然有一天想起用迅雷是不是合适&#xf…

矩阵对角化在机器学习中的奥秘与应用

在机器学习的广阔领域中,矩阵对角化作为一种重要的数学工具,扮演着不可或缺的角色。从基础的线性代数理论到复杂的机器学习算法,矩阵对角化都在其中发挥着重要的作用。 矩阵对角化的概念与原理 矩阵对角化是矩阵理论中的一个基本概念&#x…

Windows操作系统基本知识整理

目录 引言 一、Windows操作系统的发展历史 1.1 Windows 1.0到Windows 3.0 1.2 Windows 95到Windows Me 1.3 Windows NT到Windows 2000 1.4 Windows XP到Windows 7 1.5 Windows 8到Windows 10 二、Windows操作系统的核心组件 2.1 内核 2.2 文件系统 2.3 图形用户界面&…

完全背包+背包装满 总结

目录 1.背包恰好装满 (1)问题是什么 (2)问题的有效状态和无效状态 (3)问题的常考形式,以及如何去处理 1.值的大小 2.组合个数 3.排列个数 2.例题 A. Cut Ribbon HDU1114 Piggy-Bank …

四款开源电子表格组件,轻松集成到你的项目

hello,大家好,我是徐小夕。之前和大家分享了很多可视化,零代码和前端工程化的最佳实践,最近在研究在线电子表格的技术实现,发现了几个优质的开源电子表格项目,这里和大家一起分享一下。 同时我也把其中一款…

决策树|随机森林 GBDT XGBoost|集成学习

文章目录 1 决策树模型1.1 决策树模型简介1.2 决策树模型核心问题1.2.1 分类划分标准1.2.1.1 信息增益1.2.1.2 增益率1.2.1.3 基尼系数 1.2.2 停止生长策略1.2.3 剪枝策略 1.3 决策树 - python代码1.3.1 结果解读1.3.2 决策树可视化1.3.3 CV - 留一法 2 集成学习2.1 Boosting2.…

装机必备——WinRAR安装教程

装机必备——WinRAR安装教程 软件下载 软件名称:WinRAR 软件语言:简体中文 软件大小:3.38M 系统要求:Windows7或更高, 32/64位操作系统 硬件要求:CPU2GHz ,RAM4G或更高 下载通道①迅雷云盘丨下…

生产者发送源码

具体流程 Producer先从本地尝试获取路由信息本地无缓存的路由信息时,从注册中心中获取路由信息,并缓存到本地获取到的路由信息包含了Topic下的所有Queue,Producer就可以采取负载均衡策略把消息发送到某个队列里Producer发送消息到Broker成功…

【ARMv8/v9 异常模型入门及渐进 10 -- WFI 与 WFE 使用详细介绍 1】

请阅读【ARMv8/v9 ARM64 System Exception】 文章目录 WFI 与 WFE等待事件(WFE)发送事件(SEV)本地发送事件(SEVL)WFE 唤醒事件 WFE 使用场景举例与代码实现wfe睡眠函数sev 事件唤醒函数全局监视器和自旋锁 …

5.27周报

这两周邻近毕业故没有很多时间来学习课余内容,另外最近身体有些不舒服【偏头痛】,所以学的内容不多,包括SVM向量机和ResNet【不包括代码复现】 1.SVM支持向量机的大概内容 1、目的: 主要内容是如何找到分类的那条线【超平面】—…

探索Python函数参数的奥秘

新书上架~👇全国包邮奥~ python实用小工具开发教程http://pythontoolsteach.com/3 欢迎关注我👆,收藏下次不迷路┗|`O′|┛ 嗷~~ 目录 一、揭开函数参数的神秘面纱 1. 位置参数:按序传值的基石 2. 关键字参数&#…

C++笔试强训day34

目录 1.ISBN号码 2.kotori和迷宫 3.矩阵最长递增路径 1.ISBN号码 链接https://www.nowcoder.com/practice/95712f695f27434b9703394c98b78ee5?tpId290&tqId39864&ru/exam/oj 提取题意&#xff0c;模拟一下即可。 #include <iostream> using namespace std; …

markdown画时序图的时候,如何自动显示每一条时序的序号

1: 现象描述 今天画时序图的时候&#xff0c;发现时序上面没有显示序号&#xff0c;看起来不够清晰&#xff0c;只有单纯的说明; 如下图所示 刚测试CSDN的时序图&#xff0c;默认是带序号的&#xff0c;看起来和实际使用的markdown工具有关系&#xff1b; 2&#xff1a;解决办…

2024新数据库入门教程

1.官网下载MySQL 下载Mysql链接: 点击下载mysql 下载完成后解压到某一个文件夹&#xff08;记住这个路径&#xff0c;一会要用到&#xff09; 2.配置初始化文件my.ini 在根目录下创建一个txt文件&#xff0c;名字叫my&#xff0c;文件后缀为ini 以下代码除安装目录和数…