温故而知新

知识点

CSS

JavaScript

前端框架

工程化

性能优化

计算机网络

前端安全

题型

• 对SPA页面的理解，优缺点？

  • juejin.cn/post/684490…

• v-show 和 v-if 的区别？

  • v-if 是动态添加，当值为false 时，是完全移除该元素，即dom 树中不存在该元素。 v-show 仅是隐藏/ 显示，值为false 时，该元素依旧存在于dom 树中。 若其原有样式设置了display: none 则会导致其无法正常显示。

• 怎么理解 Vue 的单项数据流？

  • 这样做是为了组件间更好的解耦，在开发中可能有多个子组件依赖于父组件的某个数据，假如子组件可以修改父组件数据的话，一个子组件变化会引发所有依赖这个数据的子组件发生变化，所以 vue 不推荐子组件修改父组件的数据

• computed 和 watch 的区别和应用场景？

  • 当我们试图通过数据对象来创造另一个属性时，推荐使用computed，当我们试图通过侦听数据对象的改变来做点什么（比如执行一个函数），我们就可以使用watch

• 直接给一个数据项赋值，Vue能检测到变化吗？

  • Vue不能检测到以元素赋值方式的数组变动是因为：动态添加的数组项不能被劫持生成getter, setter，因此无法产生响应。给数组每一项做劫持，性能低且笨拙
  • Vue能检测到数组变动的方法：实际上，Vue对数组项的操作方法（pop, push, shifut, unshift, splice, sort, reverse）做了重写，这些方法可以改变数组

• Vue 生命周期的理解？

  • 在Vue中实例从创建到销毁的过程就是生命周期，即指从创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程

• 父子组件生命周期执行顺序？

  • 父beforeCreate -> 父created -> 父beforeMount -> 子beforeCreate -> 子created -> 子beforeMount -> 子mounted -> 父mounted

• 在那个生命周期调用异步请求？

  • 对于作为子组件被调用的组件里，异步请求应当在mounted里调用，因为这个时候子组件可能需要涉及到对dom的操作；
  • 对于页面级组件，当我们需要使用ssr（服务端渲染）的时候，只有created是可用的，所以这个时候请求数据只能用它；
  • 对于页面级组件， 当我们做异步操作时，涉及到要访问dom的操作，我们仍旧只能使用mounted;

• V-model 原理

  • 绑定数据value
  • 触发输入事件input
  • data 更新触发重新渲染

• 如何实现双项数据绑定？

  • 主要是通过Object对象的defineProperty属性，重写data的set和get函数来实现的
  • juejin.cn/post/684490…

• 对 Vue 项目的优化

  • juejin.cn/post/684490…