2022-02-09----SPA单页面、v-show v-if vue单向数据流

Posted on 2022-02-09 17:30  猿六毛  阅读(46)  评论(0编辑  收藏  举报

关于SPA单页面的理解以及优缺点

答:   SPA(single page application)仅在web页面初始化时加载HTML,javascript和css,一旦加载完成不会因为用户的操作而进行页面的重新加载或跳转。取而代之的时通过路由的机制来进行HTML页面内容的替换、UI及用户交互,避免页面的重            新加载。

    优点:

  •   用户体验好、快: 内容的改变不需要重新加载整个页面,避免了不必要的跳转和重新渲染
  •        基于上一点,服务器的压力相对要小
  •        前后端分离,架构清晰,前端负责交互逻辑,后端负责数据处理  

    缺点:

  •       初次加载耗时长: 为了实现单页web应用功能及显示效果,需要在加载页面的时候将javascript\css统一加载。部分页面按需加载
  •      SEO难度大: 由于所有内容都是在同一页面上进行动态替换显示,所以在SEO上有着天然的弱势

 

v-show与v-if的区别

v-if是真正的条件渲染,他会确保在切换过程中条件块内的事件监听器及子组件进行适当的销毁与重建;

同时他也是惰性的: 假如第一次条件为假,那么他什么都不会做,只有当条件为真的时候才开始渲染条件块(模块)

 

v-show则比较简单,第一渲染不管条件是真是假,都会进行渲染,他的本质不过是css中display属性值的切换;

所以v-show适合需要频繁切换的情况反之则用v-if

 

理解vue单向数据流

所有prop都在其父子prop之间形成了单向下行绑定;父级prop的更新会下流动到子组件,反过来则不行。这样可以防止子组件更改父级组件的状态,从而导致应用的数据流向难以理解和追溯;

另外的,每次父级组件发生更新时,子组件中所有的prop都将刷新为最新的值,如果在子组件中更改prop的值,vue在浏览器的控制台就会发出警告,子组件$emit