vue 重学笔记一

  之前,自己一直觉得自己的vue 学的挺不错的,但是经过一次面试后,发现自己接触的只是vue 的冰山一角,很多思维,自己都局限于 vue 的原本框架中,从未想过是否有其他的用法 or 优化,一直只会让我如何用就如何用,并未主动去探寻如果换种思路又当如何?基于此,打算把vue 重学一遍。此目录下的笔记,皆基于 vue 3.0。

  学习一本技术离不开三段论。

 

是什么?

  vue  是一套用于 构建用户界面渐进式框架。vue 的核心库只关注视图层

 

为什么?

  百度了下,看了很多篇文章,无非就三点:组件,数据的双向绑定和对视图的操作。但是个人还是觉得下面这种描述最直观,或者换句话说:

  为什么会有框架?

  框架本身相当于一个工具,在前端开发中,无非就是想用最简单的工具来解决一个复杂的问题。这就是一个框架存在的意义。

  

  框架何其多,那为什么要选择用 vue

  个人觉得在实际开发中选用Vue很大一个因素就是:vue 上手容易,同时也具备其他框架的功能,换句话说是傻瓜式编程(此处并无贬低之意,只是这样形容比较贴切易理解,也并非针对开发者)

  不过这只是个人理解,还是看看官网是如何说的。这里直接就比较下各个框架之间的区别吧。

 

  Vue & React 的相似之处

  • 使用虚拟 DOM (Virtual DOM)
  • 提供了响应式(Reactive)和组件化(Composable)的试图组件
  • 将注意力集中保持在核心库,而将其他功能如路由和全局状态管理交给相关的库
  • React 和 Vue 都很快

 

  Vue & React 的不同之处:(未考虑 React 16+ 的分布)

  1、React 比 Vue 拥有更丰富的生态系统

 

  2、组件的重新渲染(官网说的是“优化”)

  React:

  当某个组件的状态发生变化时,它会以该组件为根,重新渲染整个组件子树。

  如要避免不必要的子组件的重渲染,你需要在所有可能的地方使用 PureComponent,或是手动实现 shouldComponentUpdate 方法。同时可能需要使用不可变的数据结构来使得你的组件更容易被优化。

  然而,使用 PureComponent 和 shouldComponentUpdate 时,需要保证该组件的整个子树的渲染输出都是由该组件的 props 所决定的。所以不符合这个情况,那么此类优化就会导致难以察觉的渲染结果不一致。这使得 React 中的组件优化伴随着相当的心智负担。

(只用过react 两个月的小白表示此处对于React的描述理解不了。之前自己用的时候,并不记得要使用 PureComponent 。希望懂React 的大神能帮忙解惑。)

  在 Vue  应用中,组件的依赖是在渲染过程中自动追踪的,所以系统能精确知晓哪个组件确实需要被重渲染。你可以理解为每一个组件都已经自动获得了 shouldComponentUpdate,并且没有上述的子树问题限制。

 

  3、其他不再赘述,查看官网:对比其他框架

 

  读万卷书不如行万里路,直接从头到尾先实操一遍,然后再一章一节的拆分解读~ 

 

如何做?

  看文档之前,先来说下如何安装:vue 重学笔记二:安装

 

其他相关快捷链接:

Vue 和 React 的区别

 

posted on 2022-03-10 13:26  bala001  阅读(96)  评论(0编辑  收藏  举报

导航