1、生命周期钩子是如何实现的?
生命周期 | 描述 |
---|---|
beforeCreate | vue实例初始化后,数据观测(data observer)和事件配置之前。data、computed、watch、methods都无法访问。 |
created | vue实例创建完成后立即调用 ,可访问 data、computed、watch、methods。未挂载 DOM,不能访问el、ref。 |
beforeMount | 在 DOM 挂载开始之前调用。 |
mounted | vue实例被挂载到 DOM。 |
beforeUpdate | 数据更新之前调用,发生在虚拟 DOM 打补丁之前。 |
updated | 数据更新之后调用。 |
beforeDestroy | 实例销毁前调用。 |
destroyed | 实例销毁后调用 。 |
2、Vue 中组件的 data 为什么是一个函数?
一个组件的 data 选项必须是一个函数,因此每个实例可以维护一份被返回对象的独立的拷贝
3、nextTick 在哪里使用?原理是?
根据浏览器的不同所所以兼容的API也不一样,兼容顺序
Promise
MutationObserver
setImmediate
setTimeout
4、Vue 组件间通讯方式
prop、emit、eventbus、.sync、 $attrs $isteners、ref、插槽、vuex
5、Vue动态组件 is
<component:is="componentId"></component>
6、父子组件的生命周期(执行顺序)完整的父子组件生命周期:
7、v-if 和 v-show 的区别
v-if:如果为 false 默认不渲染 切换时会进行创建和销毁 会触发生命周期钩子 v-show:默认渲染 css 切换
8、v-if 与 v-for 的优先级
vue2 v-for 优先级高 vue3 v-if 优先级高
9、Vue常用的修饰符
stop:阻止冒泡 prevent:阻止默认行为 self:仅绑定元素自身触发 once:只触发一次
10、Vue 如何检测数组变化?
● 初始化 instance ->_init->initState->initData->observe->new Observer(value)
● 在构造函数里区分是否是Array
● 给Array重写变异方法
○ push
○ pop
○ shift
○ unshift
○ splice
○ sort
○ reverse
11、vue.set 方法是如何实现的?
set 方法内部实现方式: ob.dep.notify() ob 通过Observe 给__ob__赋值 dep在get里赋值 notice 会调用 watcher的update 方法
12、Vue.mixin 的使用场景和原理
混入 (mixins) 是一种分发 Vue 组件中可复用功能的非常灵活的方式。混入对象可以包含任意组件选项。当组件使用混入对象时,所有混入对象的选项将被混入该组件本身的选项
- 同名数据对象:对象在内部会进行浅合并 (一层属性深度),
在和组件的数据发生冲突时以组件数据优先
- 同名钩子函数:将混合为一个数组,因此都将被调用。另外,
混入对象的钩子将在组件自身钩子之前调用
methods, components 和 directives
,将被混合为同一个对象。两个对象键名冲突时,取组件对象的键值对
13、vue-router 两种模式的区别?
- hash 模式
背后的原理是 onhashchange 事件,可以在 window 对象上监听这个事件: window.onhashchange = function(event){ console.log(event.oldURL, event.newURL); let hash = location.hash.slice(1); document.body.style.color = hash; } - history 模式
因为 HTML5 标准发布,多了两个 API,pushState() 和 replaceState()。 通过这两个 API (1)可以改变 url 地址且不会发送请求, (2)不仅可以读取历史记录栈,还可以对浏览器历史记录栈进行修改。 除此之外,还有 popState().当浏览器跳转到新的状态时,将触发 popState 事件. 修改历史状态 包括了 pushState,replaceState 两个方法,这两个方法接收三个参数:stateObj,title,url window.history.pushState(stateObject, title, URL) window.history.replaceState(stateObject, title, URL)
14、Vuex 的 Mutation 和 Action 的区别吗?
定位不同 Mutation:专注于修改 State,理论上是修改 State 的唯一途径。 Action:业务代码、异步请求。 角色不同,二者有不同的限制 Mutation:必须同步执行。 Action:可以异步,但不能直接操作 State
15、为什么 vue 或者 react 要求 key 值唯一
没有 Key 值的问题 老集合中包含节点:A、B、C、D,更新后的新集合中包含节点:B、A、D、C,此时新老集合进行 diff 差异化对比,发现 B != A,则创建并插入 B 至新集合,删除老集合 A;以此类推,创建并插入 A、D 和 C,删除 B、C 和 D。 因为这些都是相同的节点,但由于位置发生变化,导致需要进行繁杂低效的删除、创建操作,其实只要对这些节点进行位置移动即可。 针对这一现象,提出优化策略:允许开发者对同一层级的同组子节点,添加唯一 key 进行区分,虽然只是小小的改动,性能上却发生了翻天覆地的变化!
16、Vue @hook 在父组件监听子组件的生命周期方法
<Child
@hook:mounted="handleChildMounted"
@hook:beforeDestroy="handlebeforDestryed"
@hook:destroyed="handleDestroyed" :data="data" />
17、vue.use和vue.prototype.$xxx的区别
Vue.prototype
就是js函数原型对象的特性, 函数原型上的属性/方法, 在函数实例化后, 可以在任意实例上读取
Vue.prototype
适合于注册Vue生态外的插件,Vue.use
适合于注册Vue生态内的插件
每一个vue组件都是Vue的实例,所以组件内this可以拿到Vue.prototype
上添加的属性和方法
Vue.use
主要是执行install
方法,而install
主要也是执行Vue.prototype
方法
18、$attrs
和$listeners
的使用
- attrs属性就包含了所有父组件传来的数据(除开已经props声明了的)
当父组件传递了很多数据给子组件时,子组件没有声明props来进行接收,那么子组件中的attrs属性就包含了所有父组件传来的数据(除开已经props声明了的),子组件还可以使用v−bind="attrs属性就包含了所有父组件传来的数据(除开已经props声明了的),子组件还可以使用v-bind="attrs属性就包含了所有父组件传来的数据(除开已经props声明了的),子组件还可以使用v−bind="attrs"的形式向它的子组件(孙子组件)传递数据,孙子组件使用$attrs的方式和它的父组件原理类似。 - listeners属性和attrs属性类似,只是它们传递的东西不一样
l i s t e n e r s 可以通过 v − o n 的形式再次传递给下层组件,当父组件在子组件上定义了一些自定义的非原生事件时,在子组件内部可以通过 l i s t e n e r s 属性获取 > 父组件的自定义事件,它和 a t t r s 的区别很明显, a t t r s 用来传递属性。使用 l i s t e n e r s 的好处在于:如果存在多层级组件,无需使用 e m i t 的方式逐级向上触发事件,只需要使用 listeners可以通过v-on的形式再次传递给下层组件,当父组件在子组件上定义了一些自定义的非原生事件时,在子组件内部可以通过listeners属性获取>父组件的自定义事件,它和attrs的区别很明显,attrs用来传递属性。 使用listeners的好处在于:如果存在多层级组件,无需使用emit的方式逐级向上触发事件,只需要使用 listeners可以通过v−on的形式再次传递给下层组件,当父组件在子组件上定义了一些自定义的非原生事件时,在子组件内部可以通过listeners属性获取>父组件的自定义事件,它和attrs的区别很明显,attrs用来传递属性。使用listeners的好处在于:如果存在多层级组件,无需使用emit的方式逐级向上触发事件,只需要使用listerners就可以得到父组件中的自定义事件,相当于偷懒了。 - inheritAttrs
父组件传递了很多数据给子组件,子组件的props没有完全接收,那么父组件传递的这些数据就会渲染到HTML上,我们可以给子组件设置inheritAttrs 为false,避免这样渲染。
data() {
return {
childStr: 'child String'
};
},
inheritAttrs: false,
总结
- attrs:用来会传递属性,除了class、style之类的,它是一个对象。
- listeners:用来传递事件,除了原生事件,它也是一个对象。
- attrs和listeners这两个属性可以解决多层组件之间数据和事件传递的问题。
- inheritAttrs解决未使用props接收的数据的属性渲染