【Vue】computed 和 methods 的区别

news/2024/6/22 11:48:44

概述

  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.cpky.cn/p/12170.html

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

相关文章

0基础学习Mybatis系列数据库操作框架——Mysql的Geometry数据处理之WKB方案

大纲 序列化反序列化完整TypeHandlerSQL XML完整XML Mapper测试代码代码 在《0基础学习Mybatis系列数据库操作框架——Mysql的Geometry数据处理之WKT方案》中,我们介绍WTK方案的优点,也感受到它的繁琐和缺陷。比如: 需要借助ST_GeomFromText…

基于springboot+vue的社区医院管理服务系统

开发语言:Java框架:springbootJDK版本:JDK1.8服务器:tomcat7数据库:mysql 5.7(一定要5.7版本)数据库工具:Navicat11开发软件:eclipse/myeclipse/ideaMaven包:…

如何在中国网上发布文章

随着互联网的迅猛发展,网上发布文章已经成为一种重要的传播方式。而在中国,作为世界上最大的互联网市场,如何在中国网上发布文章成为了许多人关注的焦点。媒介多多网发稿平台作为一个专业的发稿平台,为广大作者提供了很好的发布文…

python使用jsonpath来查找key并赋值

目录 一、引言 二、JsonPath简介 三、Python中的JsonPath库 四、使用JsonPath查找JSON Key 五、使用JsonPath赋值JSON Key 六、高级用法 七、结论 一、引言 在数据驱动的现代应用中,JSON(JavaScript Object Notation)已成为一种广泛使…

Vue 实例

一、页面效果图 二、代码 <!DOCTYPE html> <html><head><meta charset"utf-8"><script src"../vue.js" type"text/javascript"></script><title>vue 实例</title></head><body>&l…

WebGL学习(一)渲染关系

学习webgl 开发理解渲染关系是必须的&#xff0c;也非常重要&#xff0c;很多人忽视了这个过程。 我这里先简单写一下&#xff0c;后面尽量用通俗易懂的方式&#xff0c;举例讲解。 WebGL&#xff0c;全称Web Graphics Library&#xff0c;是一种在网页上渲染3D图形的技术。它…