前端面试题Vue篇

前端面试题Vue篇

---

核心问题概述：

vue生命周期

• 生命周期是什么？
• 有什么内容？
• 你是怎么用的？

vue生命周期是组件从创建到销毁的全部过程，在整个过程中会触发11个生命周期函数。
new Vue()初始化创建vue实例，指定vue的模板，通过判断template属性或者render函数方式默认模板。
初始化数据，触发将数据与模板结合，触发beforeCreate与created生命周期函数。beforeCreate我用于处理页面过度效果如加载，created用于页面所有的初始化内容。
将模板数据渲染到dom上，会触发beforeMount和mounted。mounted中可以操作dom，比如触底翻页，只要是在vue中操作dom的都是在mounted中。
当数据发生变更时，vue首先更新虚拟dom，根据虚拟dom创建模板，然后会进行新旧模板比对，找到更新的内容，然后渲染新的dom，更新数据时会触发beforeUpdate和updated生命周期。数据更新，更新虚拟dom，生成新模板，新旧模板比较，更新模板，更新don，触发uptated。beforeUpdate可以监听数据变化，updated可以监听某个更新后的dom。比如给某个属性添加ref属性，在this.$refs中获取dom并监听。
当组件销毁时，触发beforeDestroy和destroy，一般用于清空timer。
如果存在keep-alice，keep-alice有缓存作用，减少http请求次数。触发的生命周期有activated、deactivated。activated代替created实现页面初始化，deactivated代替destroy清空timer。因为activated进入组件时触发，deactivated离开组件时触发。
errorCaptrued 子孙组件出错时触发，不常用。

vue两大核心

组件化系统

组件化系统不是vue独创的，在早期前后端没有分离时，数据是由后端拼接好，前端直接渲染，然后游览器加载已经贴好数据的静态文件，早期也存在组件化开发。
当页面发生交互时，需要通过js去操作dom，如果交互过于复杂，需要考虑dom结构记忆优化dom优化流程，但是一般人做不到。
vue底层操作的是虚拟dom，减少了对dom的操作次数，提高了性能，并且做到兼容ie8。使用vue不需要考虑底层优化和兼容性问题，大大提高了开发效率。

响应式数据系统

vue创建了MVVM响应式数据系统，解决了兼容与性能两大问题。

MVVM

module指的是数据，在vue中存放数据的有 data vuex props等，通过viewModule中指定事件/指令等，将module数据渲染view层。
当view视图层发生变化时，viewModule也会修改module中的数据，实现vue中响应式数据系统，开发者不需要考虑如何操作dom。

vue通信 13套方案

props 父传子 单向数据流

• 父组件自定义属性：绑定值 是：
• 子组件通过props 接受

$emit 子传父 单项数据流

• 父组件绑定自定义事件 也就是@
• 子组件this.$emit 触发自定义事件 并传值

.sync 数据双向绑定

• 父组件 v-bind:属性.sync = ‘数据’---->传值
• 子组件 this.$emit (‘update:属性’,修改的值)

$children

• 返回当前组件下 子组件的集合
• 不适合修改 只适合获取---->单项数据流

$parent

• 返回当前组件的父组件对象
• 获取父组件中所有的变量和方法
• 单项数据流
• 可以执行父组件方法：修改自己的数据

ref $refs

• 给组件绑定ref 属性
• 获取绑定的ref 数据的组件对象
• $refs.$el 返回dom元素

v-bind v-modle

• v-bind 数据单向绑定
• v-modle 数据双向绑定

provide & inject

• 高阶组件：封装组件库用的到 平常不建议使用
• provide 父组件提供属性
• inject 在子组件中注入provide 属性

localStorage & sessionStorage

• localStorage 做数据持久化
• sessionStorage 做数据临时处理 关闭浏览器数据销毁

边界条件

边界条件主要通过vue的三个实例属性实现根组件,父组件,子组件之间的数据传递

vm.$parent:当前组件的父实例.vm.$root:组件树的根实例,如果没有父实例,vm.$root指向自己.vm.$refs:注册过 ref 特性 的所有 DOM 元素和组件实例.

ref 与 $ref
ref用于给子元素或子组件注册引用信息
$ref是非响应式的,在组件渲染完成之后生效，只能用于父组件拿到子组件实例，不能跨级任意设置了ref属性的子组件标签，都可以在其父组件中通过this.$refs.refvalue拿到对应的实例

vuex。。。

高深的面试题

什么是虚拟dom

简单的面试题：

v-if与vi-show的区别

v-module与v-bind的区别