computed和methods有什么区别

面试题:computed和methods有什么区别

标准而浅显的回答

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

更接近底层原理的回答

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

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

当组件实例触发生命周期函数beforeCreate后,它会做一系列事情,其中就包括对computed的处理

它会遍历computed配置中的所有属性,为每一个属性创建一个Watcher对象,并传入一个函数,该函数的本质其实就是computed配置中的getter,这样一来,getter运行过程中就会收集依赖

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

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

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

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

Watcher创建好后,vue会使用代理模式,将计算属性挂载到组件实例中

当读取计算属性时,vue检查其对应的Watcher是否是脏值,如果是,则运行函数,计算依赖,并得到对应的值,保存在Watcher的value中,然后设置dirty为false,然后返回。

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

巧妙的是,在依赖收集时,被依赖的数据不仅会收集到计算属性的Watcher,还会收集到组件的Watcher

当计算属性的依赖变化时,会先触发计算属性的Watcher执行,此时,它只需设置dirty为true即可,不做任何处理。

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

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

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

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

相关文章

二、浏览器--事件循环(也叫事件环,也叫event loop)--任务队列(等待执行的任务(存放的定时器,http,事件等进程))--渲染三者的关系

引用B站视频,搜索标题:【事件循环】【前端】事件原理讲解,超级硬核,忍不住转载 本视频总结: 超级复杂的JS底层。事件循环和事件队列的关系。宏任务、微任务和raf回调这3个事件队列的关系。任务队列和执行栈的关系。d…

rust类型转换

类型转换 类型转换分为隐式类型转换和显式类型转换。 隐式类型转换是由编译器完成的,开发者并未参与,所有又称自动强制转换。 显式类型转换是由开发者指定的,就是一般意义上的类型转换。 一、显式转换 (一)as 1.原生…

数据结构与算法之链表: 基于链表实现js中的原型链原理与算法实现 (Typescript版)

常见数据类型的原型链指向 obj -> Object.prototype -> nullfunc -> Function.prototype -> Object.prototype -> nullarr -> Array.prototype -> Object.prototype -> nullobj是Object实例func是Function实例,也是Object实例arr是Array实…

配置OSPFv3基本功能 华为笔记

1.1 实验介绍 1.1.1 关于本实验 OSPF协议是为IP协议提供路由功能的路由协议。OSPFv2(OSPF版本2)是支持IPv4的路由协议,为了让OSPF协议支持IPv6,技术人员开发了OSPFv3(OSPF版本3)。 无论是OSPFv2还是OSPFv…

设计模式2、抽象工厂模式 Abstract Factory

解释说明:提供一个创建一系列相关或相互依赖对象的接口,而无需指定他们具体的类。 简言之,一个工厂可以提供创建多种相关产品的接口,而无需像工厂方法一样,为每一个产品都提供一个具体工厂 抽象工厂(Abstra…

学校安全用电管理系统解决方案

随着科技的发展和进步,电力已成为我们日常生活和学习的重要支柱。然而,电力的使用也带来了一定的安全风险。特别是对于学校这个复杂而又活跃的环境,安全用电管理系统的角色显得尤为重要。 一、学校用电管理系统的现状 目前&#xff0…

win10默认浏览器改不了怎么办,解决方法详解

win10默认浏览器改不了怎么办,解决方法详解_蓝天网络 在使用Windows 10操作系统时,你可能会遇到无法更改默认浏览器的情况。这可能是因为其他程序或设置正在干扰更改。如果你也遇到了这个问题,不要担心,本文将为你提供详细的解决…

CSS基础

目录 一.CSS介绍 三种CSS的写法 1.内部样式 2.内联样式 3.外部表示 二.CSS选择器 1.标签选择器 2.类选择器 ​编辑 3.ID选择器 ​编辑 4.后代选择器 ​编辑 5.子选择器 6.并集选择器 7.伪类选择器 三.CSS常用属性值 1.字体设置 2.文本属性 1.文字颜色 2.文…

kafka 集群搭建 常用命令

1、集群搭建&#xff1a; <1> 将kafka 压缩包解压到某一目录 tar -zxvf kafka_2.12-3.5.1.tgz <2> 修改节点配置文件 vim config/server.properties broker.id0 log.dirs/tmp/kafka-logs <3> 将安装好的kafka 分发到其他服务器 scp -r kafka_2.12-2.4…

华为云云耀云服务器L实例评测 | 实例使用教学之简单使用:通过命令行管理华为云云耀云服务器

华为云云耀云服务器L实例评测 &#xff5c; 实例使用教学之简单使用&#xff1a;通过命令行管理华为云云耀云服务器 介绍华为云云耀云服务器 华为云云耀云服务器 &#xff08;目前已经全新升级为 华为云云耀云服务器L实例&#xff09; 华为云云耀云服务器是什么华为云云耀云服务…

深入理解传输层协议:TCP与UDP的比较与应用

目录 前言什么是TCP/UDPTCP/UDP应用TCP和UDP的对比总结 前言 传输层是TCP/IP协议栈中的第四层&#xff0c;它为应用程序提供服务&#xff0c;定义了主机应用程序之间端到端的连通性。在本文章&#xff0c;我们将深入探讨传输层协议&#xff0c;特别是TCP和UDP协议的原理和区别…

ES写入数据报错:retrying failed action with response code: 429

报错&#xff1a; 使用logstash导入分片数量为9的index发生错误,[logstash.outputs.elasticsearch] retrying failed action with response code: 429 ({"type">"es_rejected_execution_exception", "reason">"rejected execution …

在 .NET 8 Release Candidate 1 中推出 .NET MAUI:质量

作者&#xff1a;David Ortinau 排版&#xff1a;Alan Wang 今天&#xff0c;我们很高兴地宣布 .NET MAUI 在 .NET 8 Release Candidate 1 中已经可用&#xff0c;该版本带有适用于生产应用程序的正式许可证&#xff0c;因此您可以放心地将此版本用于生产环境。我们在 .NET 8 中…

IDEA 2019 Springboot 3.1.3 运行异常

项目场景&#xff1a; 在IDEA 2019 中集成Springboot 3.1.3 框架&#xff0c;运行异常。 <?xml version"1.0" encoding"UTF-8"?><project xmlns"http://maven.apache.org/POM/4.0.0" xmlns:xsi"http://www.w3.org/2001/XMLSch…

C++之传指针、引用、vector<shared_ptr<string>>应用总结(二百三十三)

简介&#xff1a; CSDN博客专家&#xff0c;专注Android/Linux系统&#xff0c;分享多mic语音方案、音视频、编解码等技术&#xff0c;与大家一起成长&#xff01; 优质专栏&#xff1a;Audio工程师进阶系列【原创干货持续更新中……】&#x1f680; 人生格言&#xff1a; 人生…

Spring面试题13:Spring中ApplicationContext实现有哪些?Bean工厂和Applicationcontext有什么区别

该文章专注于面试,面试只要回答关键点即可,不需要对框架有非常深入的回答,如果你想应付面试,是足够了,抓住关键点 面试官:Spring中ApplicationContext实现有哪些? 在Spring框架中,有以下几种ApplicationContext的实现: ClassPathXmlApplicationContext:从类路径下的…

计算机网络的相关知识点总结

1.谈一谈对OSI七层模型和TCP/IP四层模型的理解&#xff1f; 不管是OSI七层模型亦或是TCP/IP四层模型&#xff0c;它们的提出都有一个共同的目的&#xff1a;通过分层来将复杂问题细化&#xff0c;通过各个层级之间的相互配合来更好的解决计算机中出现的问题。 说到分层&#xf…

算法通过村第十关-并归|黄金笔记|手撕并归排序

文章目录 前言并归排序的原理总结 前言 提示&#xff1a;有时我会担心你们发现我其实很普通。爱并不需要你与众不同。--查理麦克西《男孩、鼹鼠、狐狸和马》 并归排序算是经典的分治思想中的问题&#xff0c;这个非常典型的题目。 并归排序的原理 并归排序&#xff0c;简单来说…

Shiro高级及SaaS-HRM的认证授权

Shiro在SpringBoot工程的应用 Apache Shiro是一个功能强大、灵活的&#xff0c;开源的安全框架。它可以干净利落地处理身份验证、授权、企业会话管理和加密。越来越多的企业使用Shiro作为项目的安全框架&#xff0c;保证项目的平稳运行。 在之前的讲解中只是单独的使用shiro&…

成为吃鸡战场的王者!分享顶级战术干货,助您提高战斗力!

各位吃鸡战场的玩家们&#xff0c;欢迎来到本视频&#xff01;在这里&#xff0c;我将为您呈现一些与众不同的吃鸡干货&#xff0c;帮助您提高战斗力、轻松吃鸡&#xff01; 首先&#xff0c;让我们谈一谈作图工具推荐。绝地求生作图工具是吃鸡玩家们的必备利器。我将给大家推荐…