前端八股文 watch 和computed 的区别

最新推荐文章于 2024-07-12 16:27:40 发布
最新推荐文章于 2024-07-12 16:27:40 发布
阅读量167 收藏
点赞数 3
文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Ruiqi8/article/details/140292274
版权

computed （计算属性）根据宽高 计算面积 宽高改变 面积自动重新计算 （类似于 购物车的总价数量这些 数量改变总价自动改变）

watch 监听 宽变化了 执行代码 宽变化了

1.computed 是计算属性，依赖属性值发生变化，数据才会更新

watch 监听数据变化，执行对应的操作

2.computed 有缓存 依赖没有变化 取的是缓存的数据

watch 没有缓存 监听值 发生变化就 会执行回调函数

3. computed 必须return出去 （计算出来的是一个属性值 可以作为一个参数直接使用） watch 不需要

  1. computed 不能出现异步（因为有return） watch 可以异步

睿麒
关注
  • 3
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue中watch和computed的区别与使用方法
10-14
**watch 和 computed 的区别** 1. 计算属性是自动计算的，并且只有在依赖变化时才更新，而 watch 会在每次数据变化时执行回调。 2. 计算属性支持缓存，而 watch 不支持。 3. watch 更适合处理数据变化后的异步操作，...
Vue的watch和computed方法的使用及区别介绍
10-18
在Vue中，`watch` 和 `computed` 都是用来响应数据变化的机制，但它们之间存在显著的区别。本文将深入探讨这两者的用法和差异。 首先，让我们来看看 `watch`。`watch` 是Vue中用于监听数据变化的工具，它可以执行...
详解Vue中的watch和computed
01-22
对于使用Vue的前端而言，watch、computed和methods三个属性相信是不陌生的，是日常开发中经常使用的属性。但是对于它们的区别及使用场景，又是否清楚，本文我将跟大家一起通过源码来分析这三者的背后实现原理，...
详解vue中computed 和 watch的异同
08-30
在 Vue 中，computed 和 watch 是两个非常重要的概念，它们都可以用来观察页面的数据变化，但是它们之间有着很大的区别。 首先，computed 是一个计算属性，它可以根据依赖项自动更新。例如，在上面的例子中，我们...
更新商品前端接口编写
最新发布
weixin_55639995的博客
07-12 243
那么在vue运行的时候,会加载所有的ref属性特征的元素还有组件。标签中ref的作用就是将 该组件注册到vue对象的ref属性中。使用插槽,那个scope就是代表着一行的数据。然后里面的选项遍历的是 js定义的数据。如果文字显示过多可以使用 文本隐藏显示。表单绑定还有表单数据的绑定。数据绑定使用的表单绑定状态。写form表单然后封装数据。状态的选择使用的是选择框。副标题使用的是文本域。状态页面使用,下拉框。富文本选择器使用组件。使用后端枚举类型去写。
Node多版本管理器NVM安装使用
GongWeiBuQi的博客
07-11 171
安装node很方便，只需要一条命令可以轻松切换node版本可以多版本node并存。
vue实现预览编辑ppt、word、pdf、excel、等功能的解决方案（内网-前端）
m0_68271787的博客
07-10 684
在Vue中实现预览和编辑PPT、Word、PDF、Excel等文件的功能，尤其是在内网环境下且主要侧重于前端，我们需要明确的是，直接在前端编辑这些格式的文件（特别是PPT和Word）是非常复杂且通常不推荐的，因为这些格式涉及复杂的布局和格式设置。然而，我们可以实现预览功能，并可能通过一些间接方式支持简单的编辑（如表格数据的修改）。下面我将分别给出预览PPT、Word、PDF、Excel文件的Vue组件示例代码，并简要说明如何可能实现简单的编辑功能。
Javafx利用fxml变换场景的小细节
2301_80311013的博客
07-09 832
在这个代码中，在JavaFX中，FXMLLoader是用来加载FXML文件并将其转换为Java对象（例如控制器类）的工具。当您使用FXMLLoaderFXMLLoader在整个过程中，FXMLLoader是使用JavaFX的后台线程（也称为JavaFX线程）来执行这些操作的，这是为了保持UI线程的响应性。这意味着在用户界面（UI）线程中，您不会看到任何阻塞，即使FXMLLoader正在执行耗时的操作。当FXMLLoader完成加载并调用load()方法时，它会返回一个Parent。
一个使用Go语言和现代Web技术构建跨平台桌面应用程序开源项目
yunmoon的博客
07-10 984
Wails作为一个桥梁，连接强大的Go后端逻辑与丰富的Web前端界面，允许开发者利用两者的最佳特性来开发应用。
vue父子组件通信实现模糊搜索功能
全栈码农，专注java项目实战教程分享、大学生项目辅导开发讲解。
07-09 747
模糊搜索功能 每个网站都要用得到
Haproxy搭建Web群集
wkysdhr的博客
07-08 953
Haproxy 是目前比较流行的一种群集调度工具，同类群集调度工具有很多，如LVS 和Nginx。相比较而言，LVS 性能最好，但是搭建相对复杂;Nginx的upstream模块支持群集功能，但是对群集节点健康检查功能不强，高并发性能没有 Haproxy好。
Webkit简介以及工作流程
读心悦
07-10 308
WebKit是一个开源的浏览器引擎，最初由苹果公司基于KHTML（K Desktop Environment的HTML渲染引擎）开发，并广泛应用于Safari浏览器。随着时间的推移，WebKit也被其他多款浏览器和应用所采用，成为Web技术生态中的重要一员。WebKit的核心功能包括解析HTML、CSS、JavaScript等网页内容，并将其渲染为可视化的网页页面。它主要由WebCore（负责HTML解析、CSS样式计算和布局）和JavaScriptCore（负责JavaScript解释执行）两大部分组成。
​​ 翻页 上一页/下一页
szzlh123456789的博客
07-09 373
【代码】​​ 翻页 上一页/下一页。
vue引入sm-crypto通过sm4对文件进行加解密，用户输入密码
cc1314_工作、学习有感
07-12 91
通过sm4对文件进行加解密，用户输入密码
Web 性能入门指南-1.2 分析在线零售 Web 性能及优化方向
weixin_43303603的博客
07-11 295
性能优化入门：分析是什么拖慢了你的页面速度，从图片和第三方到样式表和自定义字体，以及你可以采取哪些措施
前端 JS 经典：迭代器
weixin_64684095的博客
07-12 156
如果在最后一个值返回后再调用 next()方法，那么返回的对象中属性 done 的值为 true，属性 value 则包含迭代器最终返回的值（如果没有相关数据则返回 undefined）。可迭代对象具有 Symbol.iterator 属性，通过指定的函数可以返回一个作用于附属对象的迭代器。JavaScript 中有一些内置的可迭代对象，如数组、字符串、集合（Set）、映射（Map）等，它们都具有默认的迭代器。在 JavaScript 中，迭代器是一个对象，它定义了一个序列，并在终止时可能返回一个返回值。
前端如何让网页页面完美适配不同大小和分辨率屏幕
rolling_kitten的博客
07-09 455
安装postcss，项目根目录新建配置文件postcss.config.js，记得别用exclude排除node_modules，否则postcss无法将包里的px样式也一起转为vw；对于el-message组件，单独在项目的index.html文件的style里，设置 .el-message { font-size: 16px;推荐使用postcss插件，它会自动将项目所有的px单位统一转换为vw（包括npm安装的第三方组件），从而实现适配
Vue3 使用 Vue Router 时，prams 传参失效和报错问题
专注基础架构领域
07-12 200
我尝试使用 prams 传递数据当我跳转页面时,得到的 prams 数据为空 ,控制台也出现了 Vue Router 的警告点开链接后发现了原因,。也就是说，从Vue Router的2022-8-22 这次更新后，我们使用上面的方式在新页面无法获取：vue也给我们提出了解决方案：使用 query 的方式传参只要改成query 传参就好了,注意query传参只能用路由表中的 path ,不是 name ,并且所有参数都会显示在URL 地址上。将参数放在 pinia 或 vuex仓库里。
js中scrollIntoView第一次不生效，第二次生效
风如也的博客
07-12 110
方法用于将元素滚动到可视区域。如果在页面加载后立即使用，可能不会生效，因为页面可能还没有完全渲染或者加载完成。如果是因为元素还没有完全渲染完成，可以在。关键是确保在页面完全加载和渲染之后再调用。
watch和computed区别
05-01
watch与computed都是Vue框架提供的响应式数据处理方法，但是它们的使用场景和作用略有不同。 watch是一种侦听器，用于监测数据的变化并执行相应的操作。可以监听一个特定的数据变化，当数据发生变化时自动执行指定的操作。比如在监听输入框中的文本变化时动态更新页面内容，或在watch中执行异步操作，比如获取远程数据。 而computed是一种计算属性，它会对一个响应式的数据进行计算，并返回计算结果。计算属性是基于它所依赖的数据来进行计算的，当依赖的数据发生变化时，计算属性会自动重新计算。computed可以将复杂的逻辑封装起来，让模板代码更简洁、可读性更好，同时也可以避免代码重复。 总的来说，watch适用于需要执行异步操作，或需要在数据变化时执行一些指定的操作；而computed适用于需要计算的数据相对固定，且计算逻辑相对复杂的情况。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值