前端面试——Vue

vue中v-html会有什么问题？

• v-html:会有xss风险

• 会覆盖子组件

  vue的计算属性与侦听器

• computed(计算属性)有缓存，data不变则不会重新计算（目的为了提高效率）

• watch默认浅度监听

v-if和v-show两者有区别？

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

如何遍历对象？key的作用

可以使用v-for来进行遍历。

1）为了vue 核心库中的diff算法能更高效的更新DOM

2）使的内容和状态相关关联

不推荐v-for与v-if一同使用

事件修饰符

按键修饰符

vue组件的使用

• 父子组件间通信 父->子通过 props 、子-> 父 $on、$emit
• 获取父子组件实例的方式 $parent、$children
• Ref 获取实例的方式调用组件的属性或者方法
• Event Bus 实现跨组件通信 Vue.prototype.$bus = new Vue
• Vuex 状态管理实现通信 $attrs $listeners

组件的生命周期

生命周期中的事件划分：

1. 创建期间的生命周期函数

   beforeCreate
   
   实例刚在内存中被创建出来，此时，还没有初始化好 data 和 methods 属性;
   
   created
   
   实例已经在内存中创建完毕，此时 data 和 methods 已经创建完毕，此时还没有开始编译模板;
   
   beforeMount
   
   此时已经完成了模板的编译，但是还没有挂载到页面中;
   
   mounted
   
   此时已经将编译好的模板，挂载到了页面指定的容器中显示;
   

2. 运行期间的生命周期函数

   beforeUpdate
   
   状态更新之前执行此函数， 此时 data 中的状态值是最新的，但是界面上显示的 数据还是旧的，因为此时还没有开始重新渲染DOM节点;
   
   updated
   
   实例更新完毕之后调用此函数，此时 data 中的状态值 和 界面上显示的数据，都已经完成了更新，界面已经被重新渲染好了。
   

3. 销毁期间的生命周期函数

   beforeDestroy
   
   实例被销毁之前调用，在该函数中，实例仍然完全可用。
   
   destroyed
   
   Vue 实例销毁后调用，调用该函数后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁.
   

Vue父子组件生命周期调用顺序

• 加载渲染过程

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

• 子组件更新过程

父beforeUpdate->子beforeUpdate->子updated->父updated

• 父组件更新过程

父beforeUpdate->父updated

• 销毁过程

父beforeDestroy->子beforeDestroy->子destroyed->父destroyed

• 组件的调用顺序都是先父后子,渲染完成的顺序肯定是先子后父
• 组件的销毁操作是先父后子，销毁完成的顺序是先子后父

$nextTick 是在下次 DOM 更新循环结束之后执行延迟回调，在修改数据之后使用 $nextTick，则可以在回调中获取更新后的 DOM

异步组件的作用

如果组件功能多打包出的结果会变大，我可以采用异步的方式来加载组件。主要依赖 import() 这个语法，可以实现文件的分割加载。

Vue-router 路由模式

hash 模式（默认模式），如http://abc.com/#/user/10

vue原理

1、建立虚拟DOM Tree，通过document.createDocumentFragment()，遍历指定根节点内部节点，根据{{ prop }}、v-model等规则进行compile；
2、通过Object.defineProperty()进行数据变化拦截；
3、截取到的数据变化，通过发布者-订阅者模式，触发Watcher，从而改变虚拟DOM中的具体数据；
4、通过改变虚拟DOM元素值，从而改变最后渲染dom树的值，完成双向绑定

完成数据的双向绑定在于Object.defineProperty()