前端面试题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 数据的组件对象
- r e f s . refs. refs.el 返回dom元素
v-bind v-modle
- v-bind 数据单向绑定
- v-modle 数据双向绑定
provide & inject
- 高阶组件:封装组件库用的到 平常不建议使用
- provide 父组件提供属性
- inject 在子组件中注入provide 属性
localStorage & sessionStorage
- localStorage 做数据持久化
- sessionStorage 做数据临时处理 关闭浏览器数据销毁
边界条件
边界条件主要通过vue的三个实例属性实现根组件,父组件,子组件之间的数据传递
vm. p a r e n t : 当 前 组 件 的 父 实 例 . v m . parent:当前组件的父实例. vm. parent:当前组件的父实例.vm.root:组件树的根实例,如果没有父实例,vm. r o o t 指 向 自 己 . v m . root指向自己. vm. root指向自己.vm.refs:注册过 ref 特性 的所有 DOM 元素和组件实例.
ref 与 $ref
ref用于给子元素或子组件注册引用信息
r
e
f
是
非
响
应
式
的
,
在
组
件
渲
染
完
成
之
后
生
效
,
只
能
用
于
父
组
件
拿
到
子
组
件
实
例
,
不
能
跨
级
任
意
设
置
了
r
e
f
属
性
的
子
组
件
标
签
,
都
可
以
在
其
父
组
件
中
通
过
t
h
i
s
.
ref是非响应式的,在组件渲染完成之后生效,只能用于父组件拿到子组件实例,不能跨级 任意设置了ref属性的子组件标签,都可以在其父组件中通过this.
ref是非响应式的,在组件渲染完成之后生效,只能用于父组件拿到子组件实例,不能跨级任意设置了ref属性的子组件标签,都可以在其父组件中通过this.refs.refvalue拿到对应的实例