第十五节:带你梳理Vue2:computed/methods/watch之间的区别

1. 计算属性computed与方法methods的比较

通过学习的知识,我们已经了解了computed计算属性和methods方法,

计算属性computed和methods方法都可以将一段逻辑代码进行复用,那么他们有什么不同之处呢.

我们先看一个示例:

<div id="app"> <h2>对于字符串数据进行反向处理</h2><h3>1. 原字符串</h3>{{ message }}<h3>2. methods方法反向</h3>{{ reversedMessage() }}<h3>3. computed计算属性反向</h3>{{ reversedMsg }}
</div><script>   const vm = new Vue({el: "#app",data: {message:"hello"},methods: {reversedMessage: function () {return this.message.split('').reverse().join('')}},computed: {reversedMsg: function () {return this.message.split('').reverse().join('')}}})</script>

通过示例我们会发现,两种对数据处理的逻辑最终结果确实完全相同

然而,不同的是计算属性是基于它们的依赖进行缓存的。只在相关依赖发生改变时它们才会重新求值。
这就意味着只要 message 还没有发生改变,多次访问 reversedMsg 计算属性会立即返回之前的计算结果,而不必再次执行函数。

<div id="app"><h3>多次调用计算属性</h3>{{ reversedMsg }}{{ reversedMsg }}{{ reversedMsg }}{{ reversedMsg }}{{ reversedMsg }}
</div><script>   const vm = new Vue({el: "#app",data: {message:"hello"},computed: {reversedMsg: function () {console.log("computed")return this.message.split('').reverse().join('')}}})
</script>

在多次调用reversedMsg 计算属性时`
., console.log只会打印一次, 也就是从第二次调用开始一直使用的都是第一次调用计算属性得到的结果,只要当message数据发生变化的时候,计算属性才会重新执行.

相比之下,方法的每次调用都会触发函数的执行, 所以方法并不会对结果进行缓存

<div id="app"><h3>多次调用方法</h3>{{ reversedMessage() }}{{ reversedMessage() }}{{ reversedMessage() }}{{ reversedMessage() }}{{ reversedMessage() }}</div><script>  const vm = new Vue({el: "#app",data: {message:"hello"},methods: {reversedMessage: function () {console.log("methods")return this.message.split('').reverse().join('')}}})</script>

通过上面的例子,每次调用方法都会触发函数

所以总结:

  1. methods属性里的函数是Vue实例的方法, 方法每次调用都会执行, 没有缓存,
  2. computed属性里的函数是Vue实例的属性, 属性在第一次计算后就会进行缓存
  3. computed里函数计算是方法,就不能加括号调用
  4. 所以一般结果不怎么太变化的,可以使用计算属性,计算属性只要依赖的数据不变,就会一直使用缓存的结果
  5. 结果变化比较大的,每次调用都有可能有不同结果使用方法

2. 计算属性computed与监听属性watch比较

通过前面的学习,我们知道计算属性computed和监听属性watch都可以做到对于数据的检测,

但是我们容易滥用 watch,所以接下来我们好好看看两者的区别

通过例子了解一下:

<!-- html-->
<div id="app"><h3>Computed计算属性</h3>{{fullNameCom}}<h3>watch监听属性</h3>{{fullName}}
</div><!--js-->
<script>var vm = new Vue({el: '#demo',data: {firstName: 'Foo',lastName: 'Bar',fullName: 'Foo Bar'},computed: {fullNameCom: function () {return this.firstName + ' ' + this.lastName}},watch: {firstName: function (val) {this.fullName = val + ' ' + this.lastName},lastName: function (val) {this.fullName = this.firstName + ' ' + val}}})
</script>

通过上面案例的对比,虽然都能实现我们的效果

但是从代码上看, 与computed相比,watch实现这种需求显得很繁琐

watch的功能就像他名字一样,监听, 监听某个值的变化, 做响应的事情

computed 计算属性,往往是为了使用他的值, 这个值是依赖其他值而求得的结果,相当于保存了计算的过程,如果在使用过程中,依赖的值发生了变化, 就会重新执行计算


一言以蔽之:
  1. computed计算属性的值我们需要用到它,依赖变化运算过程自动执行
  2. watch监听的值我们不需要用到它,我们只是想在它监听的值改变了的时候搞点事情。

watch重点记住以下内容:

虽然计算属性在大多数情况下更合适,但有时也需要一个自定义的 watcher
这是为什么 Vue 通过 watch 选项提供一个更通用的方法,来响应数据的变化。当你想要在数据变化响应时,执行异步操作或开销较大的操作,这是很有用的。

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

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

相关文章

真香!Github上的这个项目,可以帮你节省打印费。

众所周知&#xff0c;我们在打印文档时&#xff0c;往往在选择黑白还是彩色打印上纠结。 全彩的文档也还好&#xff0c;最害怕的就是那种只有一部分是彩色页面&#xff0c;其他都是黑白页面的文档。 遇到这种文档&#xff0c;打印店老板好心的话会帮你分开。如果黑心一点的话…

Javaweb 中过滤器(Filter)的使用

在 Java Web 开发中&#xff0c;过滤器&#xff08;Filter&#xff09;是一种用于拦截和处理请求和响应的组件。它们在 Servlet 请求到达目标 Servlet 之前&#xff0c;或者在响应发送给客户端之前&#xff0c;对请求和响应进行预处理或后处理。过滤器在许多场景中都非常有用&a…

深入了解 RabbitMQ:构建可靠消息传递系统的关键

前言 在现代分布式应用程序开发中&#xff0c;构建可靠的消息传递系统至关重要。RabbitMQ 作为一款强大的消息代理软件&#xff0c;为开发人员提供了丰富的工具和解决方案。本文将深入探讨 RabbitMQ 的核心概念、工作原理以及其在实际应用中的应用场景。 一、什么是 RabbitMQ…

Dockerfile在jdk8基础镜像上,制作ffmpeg镜像

基础镜像,也可以改成自己的 xyjdk8:0.1 #FROM openjdk:8-jre-alpine FROM xyjdk8:0.1 MAINTAINER XiaoYe# 设置仓库&#xff0c; 因为基础镜像已经设置了&#xff0c;这里注释 #RUN echo "http://mirrors.aliyun.com/alpine/v3.10/main" > /etc/apk/repositories…

java版CRM客户关系管理系统crm 客户关系管理系统-简单高效管理客户

我司的CRM客户关系管理系统是一款功能强大的客户关系管理软件&#xff0c;旨在帮助企业更有效地管理客户关系&#xff0c;提高销售效率和客户满意度。该系统涵盖了多个功能模块&#xff0c;包括待办事项、线索管理、客户管理、联系人管理、客户公海、商机管理、合同管理、回款管…

Cent OS 7 64位 安装Docker教程

[root@localhost ~]# mkdir -p /home/envsafe/data/docker [root@localhost ~]# work_dir="/home/envsafe/data/docker" [root@localhost ~]# yum remove -y docker 已加载插件:fastestmirror, langpacks 参数 docker 没有匹配 不删除任何软件包 [root@localhost ~]…

Linux中使用CMake导入第三方开发库

Linux中使用CMake导入第三方开发库 背景 一般CMake中导入第三方库主要使用如下三个方法&#xff1a; find_package 主要使用场景是第三方库提供了CMake文件或是CMake官方适配了部分流行的开发库。FindPkgConfig 主要使用场景是第三方库没有提供CMake文件&#xff0c;但是提供…

Leetcode刷题笔记3:链表基础1

导语 leetcode刷题笔记记录&#xff0c;本篇博客记录链表基础1部分的题目&#xff0c;主要题目包括&#xff1a; 203.移除链表元素707.设计链表206.反转链表 知识点 链表 链表是一种通过指针串联在一起的线性结构&#xff0c;每一个节点由两部分组成&#xff0c;一个是数据…

HQL面试题练习 —— 取出累计值与1000差值最小的记录

题目来源&#xff1a;滴滴 目录 1 题目2 建表语句3 题解 1 题目 已知有表 t_cost_detail 包含 id 和 money 两列&#xff0c;id 为自增&#xff0c;请累加计算money 值&#xff0c;并求出累加值与 1000 差值最小的记录。 ------------- | id | money | ------------- | 1 …

LLM中的few-shot是什么意思

我上篇博客写了我做的测试Baichuan2-13B模型的一些工作&#xff0c;测试过程免不了要修改代码&#xff0c;在代码中接触了下所谓的few-shot。 比如&#xff0c;所谓2-shot&#xff0c;就是在提示词里提供两个问题和答案&#xff0c;让大模型以为自己回答过问题&#xff0c;后面…

vscode插件-03 PHP

PHP Intelephense 如果php在远程计算机上&#xff0c;要把插件安装在远程&#xff0c;而不是本地。 这个插件&#xff0c;要求php版本大于7&#xff0c;且设置环境变量&#xff08;好像不一定要设置&#xff09;。 设置里面搜索php.executablePath&#xff0c;打开setting.js…

vue-router路由懒加载以及三种实现方式

什么是路由懒加载&#xff1f; 延迟加载或按需加载路由所对应的组件&#xff0c;而不是在应用初始化时就一次性加载所有组件。 路由懒加载做了什么事情&#xff1f; 主要作用是将路由对应的组件打包成一个个的js代码块 只有在这个路由被访问到的时候&#xff0c;才加载对应…

Windows系统安装OpenSSH使用VScode远程连接内网Linux服务器开发

文章目录 &#x1f4a1;推荐 前言1、安装OpenSSH2、VS Code配置ssh3. 局域网测试连接远程服务器4. 公网远程连接4.1 ubuntu安装cpolar内网穿透4.2 创建隧道映射4.3 测试公网远程连接 5. 配置固定TCP端口地址5.1 保留一个固定TCP端口地址5.2 配置固定TCP端口地址5.3 测试固定公网…

【详细讲解】二叉树的层序遍历

广度优先搜索 总结一下&#xff0c;思路就是&#xff1a; 加入元素&#xff0c;记录size&#xff0c;size就是当前这一层的元素个数。不断弹出元素&#xff0c;size - 1&#xff0c; 同时加入弹出元素的左右孩子&#xff0c;直到size0&#xff0c;说明当前层已经完全遍历完&am…

解决vue版本不一致导致不能正常编译

解决vue版本不一致导致不能正常编译 异常现象分析原因解决方案 异常现象 项目原本运行无异常&#xff0c;但安装了一个el-table-infinite-scroll的插件后&#xff0c;编译报错&#xff0c;截图如下 分析原因 vue版本与compile版本不一致&#xff0c;应该统一起来&#xff0…

C++下的内存管理

文章目录 内存分布C语言中动态内存管理方法C内存管理new/delete操作内置类型new和delete操作自定义类型operator new 和 operator deletenew和delete的实现原理定位new表达式 malloc/free和new/delete的区别内存泄漏 内存分布 栈&#xff1a;又叫做堆栈–非静态局部变量/函数参…

算法学习笔记(5.1)-基于比较的高效排序算法(快速排序,堆排序)

##时间复杂度O(NlogN) 目录 ##时间复杂度O(NlogN) ##快速排序 ##原理 ##图例 ##代码实现 ##堆排序 ##原理 ##图例 ##代码实现 ##快速排序 ##原理 快速排序的核心操作是“哨兵划分”&#xff0c;其目标是&#xff1a;选择数组中的某个元素作为“基准数”&#xff0c;…

【编译原理复习笔记】语法分析(一)

分类 语法分析可以按照分析方向分为两类 自顶向下/自底向上 自顶向下的分析 从分析树的顶部向底部方向构造分析树 每一步推导需要做两个选择&#xff1a; &#xff08;1&#xff09;需要替换哪个非终结符 &#xff08;2&#xff09;用哪个产生式 最左推导 在最左推导中&am…

【重学C++】02 脱离指针陷阱:深入浅出 C++ 智能指针

前言 大家好&#xff0c;今天是【重学C】系列的第二讲&#xff0c;我们来聊聊C的智能指针。 为什么需要智能指针 在上一讲《01 C如何进行内存资源管理》中&#xff0c;提到了对于堆上的内存资源&#xff0c;需要我们手动分配和释放。管理这些资源是个技术活&#xff0c;一不…

正点原子LWIP学习笔记(一)lwIP入门

lwIP入门 一、lwIP简介&#xff08;了解&#xff09;二、lwIP结构框图&#xff08;了解&#xff09;三、如何学习lwIP&#xff08;熟悉&#xff09; 一、lwIP简介&#xff08;了解&#xff09; lwIP是一个小型开源的TCP/IP协议栈 阉割的TCP/IP协议 TCP/IP协议栈结构&#xff0…