持续分享/小记

• this指向问题
  • 一般情况，函数this指向他的调用对象
  • 回调函数中，this指向window
  • 箭头函数不存在自己的this，继承父类，所以也无法作为构造函数
• 如何给SPA做SEO
  • SSR服务端渲染
    • 将组件或者页面通过服务器生成html，再返回给浏览器，如nuxt.js
• v-if和v-show的区别
  • 控制手段不同
    • v-show的隐藏效果是为元素添加display: none属性, 但DOM元素依然存在
    • v-if直接卸载DOM
  • 编译过程不同
    • v-show由false变为true时, 不触发组件的生命周期
    • v-if由false变为true时, 触发组件的beforeCreate, created, beforeMount, mounted, 由true变为false时, 触发beforeDestory, destoryed
  • 性能消耗不同
    • v-if切换消耗高
    • v-show初始渲染消耗高
• 生命周期
  • beforeCreate
    • 初始化Vue实例, 尚未完成数据绑定
  • created
    • 属性, 方法, 事件配置完毕, 但还没有创建vm.$el
  • beforeMounted
    • 获取到了准备挂载的DOM
  • mounted
    • 实际完成挂载
  • beforeUpdate
    • 数据改变, View层尚未更新, 此时多次修改数据, 不会再次触发更新方法
  • updated
    • 完成View层的更新, 此时每一次修改, 都会触发更新方法
  • beforeDestory
    • 此时实例还存在
  • destoryed
    • 销毁Vue实例, 但是不能清除DOM
• 数据请求在created和mounted的区别
  • 其实就是执行时机问题, mounted中DOM元素已经渲染完毕, 如果请求数据, 可能会导致页面闪动
• vue2中v-for优先级大于v-if
  • v-for中的列表, 每一个列表项的渲染, 都需要进行v-if的条件判断
• SPA首屏优化解决方案
  • 减小入口文件体积
    • 路由懒加载
    • 动态加载路由
  • 静态资源本地缓存
  • 按需加载
  • 图片压缩
    • 精灵图, 减少http请求压力
  • 使用SSR
• 为什么data需要是一个函数, 而不是对象
  • data是组件的原型对象中的属性, 如果是一个对象, 那么由他创建形成的每一个实例都会受到难以预期的影响, 而如果是由方法返回, 则每个组件实例相互独立
• Vue2中, 直接向已有的响应式中, 增加新属性/元素, 会使得新增加的元素没有响应式, 从而无法更新视图 → 而Vue3使用proxy, 可以直接添加属性
  • Vue.set()
  • Object.assign()
  • $forceUpdate()