Vue

面试题

1)v-show和v-if的区别?

v-show本质就是标签的display设置为none,控制隐藏
v-if是动态的向DOM树内添加或者删除DOM元素

2)为何v-for中要用key?

key是v-for里边的唯一标识,key可以标识组件的唯一性,为了更好的区别各个组件,key的作用主要是为了高效的更新虚拟DOM

3)描述vue组件生命周期(有父子组件的情况)?
Vue
4)Vue组件如何通讯?
props/$emit

5)描述组件渲染和更新的过程?
渲染组=组件时,会通过Vue.extend方法构建子组件的构造函数,并进行实例化。最终手动调用$mount()进行挂载。更新组件时会进行patchVnode流程.核心就是diff算法

6)双向数据绑定v-model的实现原理?
v-model本质上是 :value和v-on的结合体,就是绑定他的value,通过v-on触发,从而更新数据

双向绑定得的实现主要依赖于Object.defineProperty(),通过这个函数可以监听到get,set事件

其中observer是最主要的部分,用Object.defineProperty来实现数据的劫持,然后用他的set,get方法来通知订阅者,触发update方法,从而实现更新视图

订阅者模式:每一个{{name}} v-model=‘name’都会添加一个订阅者,从而监听不同部分的变化,每一部分变化时都会循环触发相应的订阅者,更新到页面中。

vue原理

  • 组件化
  • 响应式
  • vdom和diff
  • 模板定义
  • 渲染过程
  • 前端路由