SPA

SPA 仅在 Web 页面初始化时加载相应的 HTML 、 JavaScript 和 CSS 。一旦页面加载完成， SPA 不会因为用户的操作而进行页面的重新加载或跳转；取而代之的是利用路由机制实现 HTML 内容的变换，UI 与用户的交互，避免页面的重新加载。

优点：

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

缺点：

  • 初次加载耗时多：为实现单页 Web 应用功能及显示效果，需要在加载页面的时候将 JavaScript 、 CSS 统一加载，部分页面按需加载；
  • 前进后退路由管理：由于单页应用在一个页面中显示所有的内容，所以不能使用浏览器的前进后退功能，所有的页面切换需要自己建立堆栈管理；
  • SEO 难度较大：由于所有的内容都在一个页面中动态替换显示，所以在 SEO 上其有着天然的弱势。

    computed 和 watch 的区别和运用的场景

    computed：是计算属性，依赖其他属性值，并且 computed 的值有缓存，只有它依赖的属性值发生改变，下一次获取 computed 的值时才会重新计算 computed 的值；
    watch：更多的是“观察”的作用，类似于某些数据的监听回调，每当监听的数据变化时都会执行回调进行后续操作。

运用场景：

  • 当我们需要进行数值计算，并且依赖于其他数据时，应该使用 computed ，因为可以利用 computed 的缓存特性，避免每次获取值时，都要重新计算；
  • 当我们需要在数据变化时执行异步或开销较大的操作时，应该使用 watch ，使用 watch 选项允许我们执行异步操作（访问一个 API ），限制我们执行该操作的频率，并在我们得到最终结果前，设置中间状态。这些都是计算属性无法做到的。

    父子组件渲染顺序，实例创建顺序

    子组件先于父组件前渲染，所以在子组件的 mounted 派发事件时，在父组件中的 mounted 中是监听不到的。
    而父组件的 create 是先于子组件的，所以在父组件中的 create 可以监听到。

Vue 的父组件和子组件生命周期钩子函数执行顺序可以归类为以下 4 部分：

  • 加载渲染过程： 父 beforeCreate -> 父 created -> 父 beforeMount -> 子 beforeCreate -> 子 created -> 子 beforeMount -> 子 mounted -> 父 mounted
  • 子组件更新过程：父 beforeUpdate -> 子 beforeUpdate -> 子 updated -> 父 updated
  • 父组件更新过程：父 beforeUpdate -> 父 updated
  • 销毁过程：父 beforeDestroy -> 子 beforeDestroy -> 子 destroyed -> 父 destroyed

链接