vue面试题
1.生命钩子函数
- 在beforeCreate钩子函数调用的时候,是获取不到props或者data中的数据的,因为这些数据的初始化都在ininstate中
- 然后会执行created钩子函数,到这一步的时候已经可以访问到之前不能访问到的数据,但是这时候组件还没有被挂载,所以是看不到的
- 接下来会先执行beforeMount钩子函数,开始创建VDOM(虚拟DOM),最后执行mounted钩子,并将VDOM渲染为真实DOM并且渲染数据,组件中如果有子组件的话,会挂载子组件,只有当所有子组件全部挂载完毕,才会执行根组件的挂载钩子
- 接下来是数据更新是会调用的钩子函数beforeUpdate和updated,分别在数据更新和更新后会调用
- 另外还有keep-alive独有的声明周期,分别为actived和deactivated。用keep-alive包裹的组件在切换时不会进行销毁,而是缓存到内存中并执行deactivated钩子函数,命中缓存渲染后会执行actived
- 最后就是销毁组件的钩子函数beforeDestory和destoryed。前者适合移除事件、定时器等,否则可能会引起内存泄漏的问题。然后进行一系列的销毁操作,如果有子组件的话,也会递归销毁子组件,所有子组件都销毁完毕后会执行根组件的destoryed钩子函数
- errorCaptured是2.50+新增的钩子函数,当捕获一个来自子孙组件的错误时被调用。此钩子接收三个参数:错误对象 、发生错误的组件实例以及包换错误来源信息的字符串。此钩子可以返回false以阻止该错误继续向上传播
2.组件通信
组件通信一般分为以下几种情况
- 父子组件通信
- 兄弟组件通信
- 跨级多层级组件通信
- 任意组件
父子通信
-
父组件通过props传递数据给子组件,子组件通过emit发送事件传递数据给父组件,这两种方式是最常用的父子通信实现办法。
-
这种父子通信方式也是典型的单向数据流,父组件通过props传递数据,子组件不能直接修改props,而是必须通过发送事件的方式告知父组件修改数据
-
还可以通过语法糖v-model来直接实现。v-model默认解析为名为value的prop和名为input的事件。这种语法糖是双向绑定,常用于UI控件上,究其根本,还是通过事件的方法让父组件修改数据
-
Vue2.3级以上版本,可以使用**$listeners和.sync**两个属性
-
l i s t e n e r s 属 性 会 将 父 组 件 中 的 ( 不 含 ‘ . n a t i v e ‘ 修 饰 器 的 ) v − o n 事 件 监 听 器 传 递 给 子 组 件 , 子 组 件 可 以 通 过 访 问 listeners属性会将父组件中的 (不含 `.native` 修饰器的)v-on事件监听器传递给子组件,子组件可以通过访问 listeners属性会将父组件中的(不含‘.native‘修饰器的)v−on事件监听器传递给子组件,子组件可以通过访问listeners来自定义监听器
-
.sync是一个语法糖,可以简单实现子组件和父组件通信
<!--父组件中--> <input :value.sync="value" /> <!--以上写法等同于--> <input :value="value" @update:value="v => value = v"></comp> <!--子组件中--> <script> this.$emit('update:value', 1) </script>
-
兄弟组件通信
对于这种情况可以通过查找父组件中的子组件实现,也就是 this.$parent.$children
,在 $children
中可以通过组件 name
查询到需要的组件实例,然后进行通信。
跨多层级组件通信
对于这种情况可以使用 Vue 2.2 新增的 API provide / inject
,
假设有父组件 A,然后有一个跨多层级的子组件 B
// 父组件 A
export default {
provide: {
data: 1
}
}
// 子组件 B
export default {
inject: ['data'],
mounted() {
// 无论跨几层都能获得父组件的 data 属性
console.log(this.data) // => 1
}
}
任意组件
这种方式可以通过 Vuex 或者 Event Bus 解决,另外如果你不怕麻烦的话,可以使用这种方式解决上述所有的通信情况
3.mixin和mixins的区别
-
mixin用于全局混入,会影响到每个组件实例,这些插件都是这样做初始化的,可以全局混入封装好的ajax或者一些工具函数等
Vue.mixin({ beforeCreate() { // ...逻辑 // 这种方式会影响到每个组件的 beforeCreate 钩子函数 } })
-
mixins使我们最常用的扩展组件的方式了,如果多个组件中有相同的业务逻辑,就可以将这些逻辑剥离出来,通过mixin混入代码,比如上拉下拉加载数据这种逻辑等等
-
mixin混入的钩子函数会优先于组件内的钩子函数执行,并且在遇到同名选项的时候也会有选择性的进行组合
4.computed 和 watch 区别
-
computed
是计算属性,依赖其他属性计算值,并且computed
的值有缓存,只有当计算值变化才会返回内容。 -
watch
监听到值的变化就会执行回调,在回调中可以进行一些逻辑操作。 -
所以一般来说需要依赖别的属性来动态获得值的时候可以使用
computed
,对于监听到值的变化需要做一些复杂业务逻辑的情况可以使用watch
。 -
另外
computed
和watch
还都支持对象的写法,这种方式知道的人并不多。vm.$watch('obj', { // 深度遍历 deep: true, // 立即触发 immediate: true, // 执行的函数 handler: function(val, oldVal) {} }) var vm = new Vue({ data: { a: 1 }, computed: { aPlus: { // this.aPlus 时触发 get: function () { return this.a + 1 }, // this.aPlus = 1 时触发 set: function (v) { this.a = v - 1 } } } })
5.keep-alive 组件有什么作用
- 在需要组件切换的时候,保存一些组件的状态防止多次渲染,就可以使用keep-alive组件包裹需要保存的组件
- 它拥有两个独有的生命周期钩子函数,分别为
activated
和deactivated
。用keep-alive
包裹的组件在切换时不会进行销毁,而是缓存到内存中并执行deactivated
钩子函数,命中缓存渲染后会执行actived
钩子函数。
6.v-show和v-if区别
v-show
只是在display: none
和display: block
之间切换。无论初始条件是什么都会被渲染出来,后面只需要切换 CSS,DOM 还是一直保留着的。所以总的来说v-show
在初始渲染时有更高的开销,但是切换开销很小,更适合于频繁切换的场景。v-if
的话就得说到 Vue 底层的编译了。当属性初始为false
时,组件就不会被渲染,直到条件为true
,并且切换条件时会触发销毁/挂载组件,所以总的来说在切换时开销更高,更适合不经常切换的场景。- 并且基于
v-if
的这种惰性渲染机制,可以在必要的时候才去渲染组件,减少整个页面的初始渲染开销。
组件中 data 什么时候可以使用对象
- 组件复用时所有组件实例都会共享data,如果data是对象的话,就会造成一个组件修改data以后会影响到其他组件,所以需要将data写成函数,每次用到就调用一次函数获得新的数据
以在必要的时候才去渲染组件,减少整个页面的初始渲染开销。
组件中 data 什么时候可以使用对象
- 组件复用时所有组件实例都会共享data,如果data是对象的话,就会造成一个组件修改data以后会影响到其他组件,所以需要将data写成函数,每次用到就调用一次函数获得新的数据
- 当我们使用new Vue()方式的时候,无论我们将data设置为对象还是函数都是可以的,因为new Vue()的方式是生成一个跟组件,该组件不会复用,也就不存在共享data的情况了