vue相关概念总结

643 阅读2分钟

vue & react 概念

  • Vue是一套用于构建用户界面的渐进式框架。
  • React用于构建用户界面的 JavaScript 库。

vue 概念深入 -- 渐进式框架的理解

Vue是一套用于构建用户界面的渐进式框架,Vue 被设计为可以自底向上逐层应用,Vue的核心是只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。

渐进式框架: 提供足够的选择,并且没有很多强制性的要求

渐进也可以理解为一步一步的意思,大概意思就是使用Vue的时候,并不需要把整个框架的所有东西都用上,可以根据实际情况选择你需要的部分。如下图:

Pasted Graphic 1.png

  • 声明式渲染和组件系统是Vue的核心库所包含内容,
  • 而客户端路由、状态管理、构建工具都有专门解决方案。
  • 这些解决方案相互独立,你可以在核心的基础上任意选用其他的部件,不一定要全部整合在一起。
  • Vue的使用没有很多强制性的要求,不像Angular那样,要使用Angular,还必须得使用它的模块机制、必须使用它的依赖注入、 必须使用它的特殊形式定义组件(这一点每个视图框架都有,Vue也难以避免)

自底向上逐层应用

  • 由基层开始做起,把基础的东西写好,再逐层往上添加效果和功能。

vue 概念深入 -- 命令式 & 声明式

  • 命令式:一步一步告诉程序如何去做,能否达成结果取决于开发者的设计。
  • 声明式:只告诉程序想要什么结果,如何达成由程序保证,开发者不用关心。

vue3.0新特性

vue3.0新特性.png

升级vue3.0的好处

  • vue2.x:一个功能反复跳转问题
  • vue2.x解决方案Mixin:
    • 命名冲突问题
    • 不清楚暴露出来的变量的作用
    • 逻辑重用到其他 component 经常遇到问题
  • vue3.x-Composition API:按照逻辑分割,增加代码可读性和可维护性

vue3.x-compositionAPI.png

vue3.x-Composition API

vue3.x-compositionAPI2.png

vue3.x-setup

  • beforeCreate 之前执行.
  • setup(props, context):
    • props: 组件传入的属性
    • context: {attrs,slot,emit}

Vue3.x - 生命周期图示

  • 新增了用于调试的钩子函数onRenderTriggeredonRenderTricked lifecycle.png

life.png