vue 部分知识点总结

简介: vue 部分知识点总结

计算属性和方法有什么区别,怎么选择?

在编程中,计算属性和方法都是用于处理数据的工具,但它们有一些区别。以下是它们的区别和如何选择的几个因素:

  1. 执行方式:计算属性是基于依赖的响应式系统,在数据变化时自动重新计算;而方法需要手动调用才会执行。
  2. 依赖跟踪:计算属性可以跟踪其所依赖的数据,并在相关数据发生变化时自动更新;而方法不会跟踪依赖,每次调用都会重新执行。
  3. 缓存:计算属性具有缓存机制,只有当依赖的数据发生变化时才会重新计算;而方法每次调用都会执行,没有缓存。
  4. 使用场景:计算属性适合处理根据已有数据派生出来的新值,比如对数组进行过滤、排序等操作;而方法适合执行一些具有副作用的操作,或者需要传递参数的情况。

如何选择使用计算属性还是方法取决于以下因素:

  1. 自动更新:如果需要根据数据的变化自动更新结果,则应该使用计算属性。
  2. 缓存需求:如果希望避免重复计算和提高性能,可以选择计算属性,因为计算属性具有缓存机制。
  3. 参数传递:如果需要传递参数,或者需要进行一些具有副作用的操作,那么应该使用方法。
  4. 数据变化频率:如果数据变化非常频繁,并且每次变化都需要重新计算结果,可能会导致计算属性的性能下降。在这种情况下,可以考虑使用方法。

综上所述,计算属性和方法都有各自的优势和适用场景。选择使用哪种取决于需求,根据是否需要自动更新、缓存、传递参数以及数据变化频率等因素来决定。

计算属性和侦听器

computed :

模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护,对于任何包含响应式数据的复杂逻辑,你都应该使用计算属性。

计算属性与methods区别:

computed是带缓存的,如果被依赖的变量不发生变化,则下次调用computed时不会重新计算结果。但是methods则是每次调用都会重新运行以得出实时的结果。

methods调用需要加();

watch:

侦听属性,(有两个参数,new,old,分别代表改变后和改变前的值)

侦听属性的命名,必须是data,computed,props中的变量名

(计算属性监测的是某个值的依赖的变化,侦听属性监测的是值自身的变化)。

虚拟DOM

虚拟DOM:Vue.js使用虚拟DOM来减少对实际DOM的操作,提升应用的性能。

工作原理:获取内存中的(虚拟)dom树和新生成的(虚拟)dom树,通过diff算法进行对比,得到需要更新的DOM元素,这两颗(虚拟)DOM树都是框架模拟出来的,就是个对象,旧的会被保存在内存中。

diff算法

diff算法:

分成三部分tree diff、 component diff、 element diff,分别去对比新旧(虚拟)dom树,DOM树中的组件,组件中的元素

tree diff

   新旧两个DOM树,逐层对比的过程,就是tree diff 当整个DOM树逐层对比完毕,则能找到要被更新的元素


component diff

在进行tree diff的时候,会对每一层的组件进行对比,如果新旧组件的类型相同,会进行element diff对比,如果不同,直接移除组件更新新组件

element diff

   在进行component diff对比时如果两个组件的类型相同,会对其内部的元素进行对比。

vue和react相同和不同

React和Vue是两个流行的JavaScript前端框架,它们有一些相同点,同时也存在一些不同之处。下面是React和Vue的相同点和不同点的总结:

相同点:

  1. 组件化开发:React和Vue都支持组件化开发,将页面划分为独立的、可复用的组件,便于代码的组织和维护。
  2. 虚拟DOM:React和Vue都使用虚拟DOM来提高性能,通过比较虚拟DOM树的差异来最小化实际DOM操作。
  3. 响应式更新:React和Vue都可以实现响应式数据更新,当数据发生改变时,会自动更新相关的视图。

不同点:

  1. 语法:React使用JSX语法,结合JavaScript编写组件;而Vue使用模板语法,通过HTML模板和Vue指令编写组件。
  2. 学习曲线:相对来说,React的学习曲线可能会稍微陡峭一些,需要理解并掌握JSX语法等概念;而Vue的学习曲线较平缓,核心概念简单易懂。
  3. 生态系统:React拥有庞大且活跃的生态系统,社区贡献了许多优秀的第三方库和工具;Vue的生态系统也在不断壮大,虽然相对React来说还较小,但也有一些流行的第三方库和插件。
  4. 可维护性:React的设计哲学更加灵活,需要开发者自己做出更多决策,对于大型项目需要有一定的架构和规范来保持代码可维护性;Vue在设计上更加约束,提供了推荐的工程实践和约定,使得代码的组织和维护相对容易。
  5. 社区和生态支持:React拥有更广泛的社区支持和更多现有的插件和库,同时也更适合搭配其他前端框架或库使用;Vue社区也越来越活跃,虽然相对React来说较小,但仍有一些优秀的插件和库。

总体而言,React和Vue都是优秀的前端框架,各有其独特的特点和优势。选择使用哪个框架取决于具体项目需求、团队技术背景和个人偏好等因素。无论选择React还是Vue,都能够享受到强大的前端开发能力和活跃的社区支持。

相关文章
|
3天前
|
JavaScript 前端开发
如何在 Vue 项目中配置 Tree Shaking?
通过以上针对 Webpack 或 Rollup 的配置方法,就可以在 Vue 项目中有效地启用 Tree Shaking,从而优化项目的打包体积,提高项目的性能和加载速度。在实际配置过程中,需要根据项目的具体情况和需求,对配置进行适当的调整和优化。
|
3天前
|
存储 缓存 JavaScript
在 Vue 中使用 computed 和 watch 时,性能问题探讨
本文探讨了在 Vue.js 中使用 computed 计算属性和 watch 监听器时可能遇到的性能问题,并提供了优化建议,帮助开发者提高应用性能。
|
3天前
|
存储 缓存 JavaScript
如何在大型 Vue 应用中有效地管理计算属性和侦听器
在大型 Vue 应用中,合理管理计算属性和侦听器是优化性能和维护性的关键。本文介绍了如何通过模块化、状态管理和避免冗余计算等方法,有效提升应用的响应性和可维护性。
|
3天前
|
存储 缓存 JavaScript
Vue 中 computed 和 watch 的差异
Vue 中的 `computed` 和 `watch` 都用于处理数据变化,但使用场景不同。`computed` 用于计算属性,依赖于其他数据自动更新;`watch` 用于监听数据变化,执行异步或复杂操作。
|
3天前
|
JavaScript 前端开发 UED
vue学习第二章
欢迎来到我的博客!我是一名自学了2年半前端的大一学生,熟悉JavaScript与Vue,目前正在向全栈方向发展。如果你从我的博客中有所收获,欢迎关注我,我将持续更新更多优质文章。你的支持是我最大的动力!🎉🎉🎉
|
4天前
|
存储 JavaScript 开发者
Vue 组件间通信的最佳实践
本文总结了 Vue.js 中组件间通信的多种方法,包括 props、事件、Vuex 状态管理等,帮助开发者选择最适合项目需求的通信方式,提高开发效率和代码可维护性。
|
3天前
|
JavaScript 前端开发 开发者
vue学习第一章
欢迎来到我的博客!我是瑞雨溪,一名热爱JavaScript和Vue的大一学生。自学前端2年半,熟悉JavaScript与Vue,正向全栈方向发展。博客内容涵盖Vue基础、列表展示及计数器案例等,希望能对你有所帮助。关注我,持续更新中!🎉🎉🎉
|
4天前
|
存储 JavaScript
Vue 组件间如何通信
Vue组件间通信是指在Vue应用中,不同组件之间传递数据和事件的方法。常用的方式有:props、自定义事件、$emit、$attrs、$refs、provide/inject、Vuex等。掌握这些方法可以实现父子组件、兄弟组件及跨级组件间的高效通信。
|
9天前
|
JavaScript
Vue基础知识总结 4:vue组件化开发
Vue基础知识总结 4:vue组件化开发
|
9天前
|
存储 JavaScript
Vue 状态管理工具vuex
Vue 状态管理工具vuex