简述computed和watch的区别

已于 2022-06-01 12:05:50 修改
阅读量76 收藏
点赞数
分类专栏： vue3 文章标签： vue.js
于 2022-06-01 11:38:48 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/shortlived/article/details/125080815
版权

1、computed是计算属性的意思

1.1 computed是用来计算出一个值的，这个值我们调用是不需要加括号

1.2 根据依赖会自动缓存

1.3 不支持异步代码

2、watch是监听的意思

2.1 watch支持异步代码

2.2 有两个选项

2.2.1 immediate 第一次渲染的时候要执行函数
2.2.2 deep 是否要监听对象里面的属性变化。如果某个属性变化了就执行函数。
雄霸是也
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
分别简述computed和watch的使用场景
d_agege的博客
03-28 2876
computed 1. computed擅长处理的场景：一个数据受多个数据影响 computed拥有缓存属性, 只有当依赖的数据发生变化时,关联的数据才会变化, 适用于计算或者格式化数据的场景. 例如：购物车计算价格 只要购买数量,购买价格,优惠券,折扣券等任意一个发生变化,总价都会自动跟踪变化. computed:计算属性 当一个属性受多个属性影响时就需要用到computed 例子：购物车商品结算...
computed和watch的详细区别
LocalStorage的博客
10-10 826
从作用机制上： methods，watch 和 computed 都是以函数为基础的，但各自却都不同 watch 和 computed 都是以 Vue 的依赖追踪机制为基础的，当某一个数据发生变化的时候，所有依赖这个数据的“相关”数据“自动”发生变化，也就是自动调用相关的函数去实现数据的变动 对 methods：methods 里面是用来定义函数的，它需要手动调用才能执行。而不像 watch 和 computed 那样，“自动执行”预先定义的函数，相比于 watch / computed，...
分别简述computed和watch的区别以及使用场景
qq_39750019的博客
06-17 385
computed: 　　　　当一个属性受多个属性影响的时候就需要用到computed 　　　　最典型的例子： 购物车商品结算的时候 watch: 　　　　当一条数据影响多条数据的时候就需要用watch 　　　　例子：搜索数据 ...
computed和watch的区别
llj1028的博客
02-03 761
1、computed是计算属性；watch是监听属性；
computed和watch的区别及watch详解
liuye066的专栏
06-26 423
属性具有缓存机制，只有当依赖的数据发生变化时，才会触发重新计算，否则会直接返回缓存的结果。这样可以避免不必要的计算，提高性能。属性是基于依赖数据进行计算的属性。它是一个函数，返回计算后的值。当计算依赖的数据发生变化时，属性用于观察数据的变化并执行相应的操作。它可以监听某个数据的变化，并在变化时执行回调函数。是两个重要的属性，用于处理响应式数据的变化和计算。可以监视单个数据，也可以监视多个数据。用于观察数据的变化并执行相应的操作。会自动重新计算并更新相应的值。用于计算一个新的响应式属性，而。
Vue中computed、methods与watch的区别总结
01-19
对于那些开始学习Vue的人来说，对于方法、计算属性和观察者之间的区别有点混淆。 尽管通常可以使用它们中的每一个来完成或多或少相同的事情，但了解每个人在哪里胜过其他人还是很重要的。 在这个快速提示中，我们...
vue面试题-vue常见面试题和答案
03-13
14. 分别简述computed和watch的使用场景 答：computed：当一个属性受多个属性影响的时候就需要用到computed最典型的栗子：购物车商品结算的时候 watch：当一条数据影响多条数据的时候就需要用watch栗子：搜索数据 ...
vue面试题-vue常见面试题和答案文档下载
02-10
14. 分别简述 computed 和 watch 的使用场景？ 答：computed: 当一个属性受多个属性影响的时候就需要用到 computed；watch: 当一条数据影响多条数据的时候就需要用 watch。 15. v-on 可以监听多个方法吗？ 答：...
vue面试文档，包含技术要点和面试编程
01-02
* 计算属性和观察者：computed 属性和 watch 函数的使用 * 条件和循环：v-if、v-for 指令的使用 2. 组件化开发 * 组件的定义与注册：全局组件和局部组件的区别 * 父子组件通信：props 和 $emit 的使用 * 非...
（vue面试题）在Vue.js中如何定义组件？请简述组件之间的通信方式代码.txt
08-18
- **watch**：组件的侦听属性对象。用于观察Vue实例上的数据变动，并执行相应的回调。 - **mounted**：组件挂载后的回调函数。当组件被插入到DOM中后执行。 - **render**：组件渲染时的回调函数。在服务端渲染或...
实现父组件调用子组件方法时报错：[Vue warn]: Invalid vnode type when creating vnode: null.
08-14 312
[Vue warn]: Invalid vnode type when creating vnode: null.
vue选中下拉框数据，但是值没有填充到框内
m0_68154641的博客
08-14 216
element-ui选中下拉框数据，但是值没有填充到框内
element table 判断当前行是否展开和只展开一行
m0_68716504的博客
08-15 395
element组件提供了table的展开和收起功能，并提供了expand-change事件用来监听table行的展开和收起在一些特殊情况下如：处理异步数据时，希望展开行时请求接口，关闭行时不用请求，但是expand-change，无论是展开还是收起都会触发，于是就希望能有一个类似isExpended布尔类型的状态属性来判断是否调用接口。
vue3进阶用法之通过调用函数动态加载组件用法及示例
wz9608的博客
08-14 331
vue官方文档那边虽然说了函数的使用方法，但没有列举这种业务场景。这里只是做一个简单的实例，其实可以通过这种方法实现其他更多的功能，比如说modal框等等等。
Vue 3的Computed属性
计算机图形学
08-15 412
Vue 3的组合式API为Computed属性的使用带来了新的变化和可能性。通过computed函数，开发者可以轻松地创建只读或可写的Computed属性，并在组件中高效地处理响应式数据。合理使用Computed属性，可以使代码更加简洁、清晰和高效。
【vue教程】五. Vue 的路由管理
前端探索者
08-13 1142
Vue Router 是 Vue 官方的路由管理器，用于构建单页面应用。它允许你通过 URL 来映射不同的组件，实现页面的动态加载和导航。路由守卫用于在路由跳转前后执行代码，可以用来检查用户认证状态、获取数据等。通过本篇文章，我们学习了 Vue Router 的基本概念、配置和使用，以及如何实现动态路由和嵌套路由。我们还探讨了路由守卫的概念，并提供了如何在 Vue 组件中使用它们的示例。这些知识点将帮助你构建一个功能完备的单页面应用。
Vue 3 watchEffect教程
最新发布
weixin_42545951的博客
08-17 440
Vue 3 引入了 Composition API，其中是一个非常强大的工具，用于响应式地追踪依赖项的变化。本文将详细介绍的使用方法和相关概念。是 Vue 3 的 Composition API 中的一个函数，用于自动追踪其回调函数中使用的响应式状态，并在状态变化时重新执行回调函数。通过本文的介绍，你应该对 Vue 3 中的有了基本的了解。是 Vue 3 响应式系统的核心功能之一，能够极大地简化副作用的处理逻辑，提高代码的可读性和可维护性。在实际开发中，合理使用将使你的 Vue 应用更加强大和灵活。
使用el-menu跳转时偶尔会出现路由已经变了，但是页面却显示空白的情况
qq_49080239的博客
08-15 288
我改的期间发现，是上一个跳转的组件如果出现template里包了多个标签，那么下一个组件就会变成空白。所以当你发现有一个页面跳转出错，但是怎么也找不到错误时，那你就去看看它的上一个跳转的页面是不是存在错误。刚开始我以为是我数据加载的问题，后来又看有人说是template里不能包多个div，但我去看我出错的组件，并没有出现两个div。后来我就把每个都给改了，即使是elemen-ui的标签也全部改在一个div里，就发现没问题了。
88.SAPUI5 Model Binding的问题-在view更改数据，model却不变
智盟科技智能制造团队的博客
08-15 353
在做一个UI5项目，后台读取sap.ui.model.Model后，把数据绑定到view的table里，在table更改数据，后台取sap.ui.model.Model后，数据没有改变，仍然保持当初从后台读取过来的值。后台同事问了一句，是不是和绑定模式有关。进而调查到model的最初绑定的代码段，果然发现绑定的是OneWay模式，更改后TwoWay后，问题得到解决。BindingMode双向意味着从模型到视图，反之亦然。BindingMode单向表示从模型到视图。我们研究了好长时间，没找到症结。
双向数据绑定的原理 简述一下MVVM。知道MVC吗？说一下区别 Vue实现数据响应式的基本原理 使用 Object.defineProperty() 来进行数据劫持有什么缺点？ Computed 和 Watch 的区别 Computed 和 Methods 的区别 slot是什么？有什么作用？原理是什么？ 过滤器的作用，如何实现一个过滤器 如何保存页面的当前的状态 常见的事件修饰符及其作用 v-if、v-show、v-html 的原理 v-if和v-show的区别 v-model 是如何实现双向数据绑定的？ data为什么是一个函数而不是对象 对keep-alive的理解，它是如何实现的，具体缓存的是什么？ Vue 单页应用与多页应用的区别 Vue template 到 render 的过程 Vue data 中某一个属性的值发生改变后，视图会立即同步执行重新渲染 吗？ 描述下Vue常用指令 描述下Vue自定义指令 子组件可以直接改变父组件的数据吗？ Vue的优点
03-20
1. 双向数据绑定的原理 简述一下MVVM。 MVVM是Model-View-ViewModel的缩写，是一种前端架构模式。它通过数据绑定实现了View和Model的自动同步，ViewModel作为View和Model之间的桥梁，负责处理View的事件和数据绑定，同时也负责将Model的数据转换为View所需的数据格式。MVVM的核心思想是数据驱动，通过数据的变化来驱动视图的变化。 2. 知道MVC吗？说一下区别 MVC是Model-View-Controller的缩写，也是一种前端架构模式。与MVVM不同的是，MVC中的Controller负责处理View的事件和数据绑定，同时也负责将Model的数据转换为View所需的数据格式。而在MVVM中，ViewModel承担了Controller的职责，负责处理View的事件和数据绑定。 3. Vue实现数据响应式的基本原理 Vue实现数据响应式的基本原理是通过Object.defineProperty()方法对数据进行劫持，当数据发生变化时，会触发对应的更新操作，从而实现视图的自动更新。 4. 使用 Object.defineProperty() 来进行数据劫持有什么缺点？ 使用Object.defineProperty()进行数据劫持的缺点是无法监听到数组的变化，需要通过特殊的方法来实现数组的监听。 5. Computed 和 Watch 的区别 Computed是计算属性，它会根据依赖的数据动态计算出一个新的值，并缓存起来，只有当依赖的数据发生变化时才会重新计算。而Watch是监听器，它会监听指定的数据变化，并在数据变化时执行指定的回调函数。 6. Computed 和 Methods 的区别 Computed和Methods的区别在于，Computed是计算属性，它会根据依赖的数据动态计算出一个新的值，并缓存起来，只有当依赖的数据发生变化时才会重新计算；而Methods是方法，它会在每次调用时重新计算。 7. slot是什么？有什么作用？原理是什么？ slot是Vue中的插槽，它允许我们在组件中插入任意内容，从而实现组件的复用和灵活性。原理是在组件中定义一个或多个slot，然后在使用组件时，将需要插入的内容放在对应的slot中即可。 8. 过滤器的作用，如何实现一个过滤器 过滤器的作用是对数据进行格式化或处理，从而满足特定的需求。实现一个过滤器需要在Vue实例中定义一个filters对象，然后在模板中使用管道符“|”将需要过滤的数据和过滤器名称连接起来，例如：{{ data | filterName }}。 9. 如何保存页面的当前的状态 可以使用Vue Router的导航守卫来保存页面的当前状态，例如在beforeRouteLeave钩子函数中将当前页面的状态保存到localStorage中，在beforeRouteEnter钩子函数中从localStorage中读取保存的状态并恢复页面。 10. 常见的事件修饰符及其作用 常见的事件修饰符有：.stop、.prevent、.capture、.self、.once，它们的作用分别是阻止事件冒泡、阻止默认事件、使用事件捕获模式、只在事件目标自身触发时触发事件、只触发一次事件。 11. v-if、v-show、v-html 的原理 v-if和v-show都是Vue中的条件渲染指令，v-if会根据条件动态添加或删除DOM元素，而v-show则是通过CSS样式来控制元素的显示和隐藏。v-html指令用于将数据作为HTML插入到模板中。 12. v-if和v-show的区别 v-if和v-show的区别在于，v-if会根据条件动态添加或删除DOM元素，而v-show则是通过CSS样式来控制元素的显示和隐藏。当条件不满足时，v-if会将对应的DOM元素从DOM树中删除，而v-show只是将元素的display属性设置为none。 13. v-model 是如何实现双向数据绑定的？ v-model是通过对input事件和value属性的绑定来实现双向数据绑定的。当用户输入数据时，会触发input事件，从而更新数据模型中的值；当数据模型中的值发生变化时，会将新的值赋给input元素的value属性，从而更新视图。 14. data为什么是一个函数而不是对象 data为函数而不是对象的原因是为了实现数据的复用。当组件被复用时，如果data是一个对象，那么所有的组件实例都会共享同一个数据对象，从而导致数据混乱；而如果data是一个函数，每个组件实例都会调用一次该函数，从而实现数据的独立性。 15. 对keep-alive的理解，它是如何实现的，具体缓存的是什么？ keep-alive是Vue中的一个抽象组件，它可以将动态组件缓存起来，从而提高组件的性能。keep-alive的实现原理是通过在组件的生命周期中添加beforeRouteLeave和activated钩子函数来实现缓存和恢复。具体缓存的是组件的状态和DOM结构。 16. Vue 单页应用与多页应用的区别 Vue单页应用是指所有的页面都在一个HTML文件中，通过Vue Router实现页面的切换和路由控制；而Vue多页应用是指每个页面都有自己的HTML文件，通过Vue实现组件化和数据驱动。 17. Vue template 到 render 的过程 Vue template到render的过程是通过Vue的编译器将template模板编译成render函数，然后将render函数渲染成真实的DOM元素。在编译过程中，Vue会将模板中的指令和表达式转换为对应的render函数代码，从而实现模板到render的转换。 18. Vue data 中某一个属性的值发生改变后，视图会立即同步执行重新渲染 吗？ 不一定，Vue使用异步更新队列来处理数据的变化和视图的更新，当数据发生变化时，Vue会将更新操作推入到异步更新队列中，然后在下一个事件循环中执行更新操作，从而实现性能的优化。 19. 描述下Vue常用指令 Vue常用指令有：v-if、v-show、v-for、v-bind、v-on、v-model、v-html、v-text等。它们分别用于条件渲染、显示和隐藏元素、循环渲染、绑定属性、绑定事件、实现双向数据绑定、插入HTML和插入文本等操作。 20. 描述下Vue自定义指令 Vue自定义指令是一种扩展Vue功能的方式，它可以用于封装常用的DOM操作和行为，从而提高代码的复用性和可维护性。自定义指令需要在Vue实例中定义一个directives对象，然后在模板中使用v-指令名称来调用自定义指令。 21. 子组件可以直接改变父组件的数据吗？ 不可以，子组件不能直接改变父组件的数据，因为Vue中的数据流是单向的，只能从父组件向子组件传递数据。如果需要改变父组件的数据，可以通过在子组件中触发事件并传递数据的方式来实现。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值