1.v-show和v-if的区别
v-show通过CSS的display控制显示和隐藏
v-if组件是真正的渲染和销毁,而不是显示和隐藏
频繁切换显示状态用v-show,否则用v-if
2.为何在v-for中用key(不用会报错)
必须用key,且不能是index和random
diff算法中通过tag和key来判断是不是sameNode(相同节点)
减少污染次数,提升渲染性能
3.vue中生命周期
挂载 beforeCreate created 并没有开始渲染,但vue的实例已经初始化完成了
beforeMount mounted 已经开始渲染
更新 beforeUpdate updated
销毁 beforeDestroy destroyed 解除绑定的自定义事件 setTimeOut定时任务等
<父子组件>生命周期
父created → 子created → 子mounted → 父mounted
创建初始化Vue的实例是从外到内,渲染是从内到外(只有把子组件渲染完才是父组件)
父beforeUpdate → 子beforeUpdate → 子updated → 父updated
4.Vue组件如何通讯/参数传递
父传子:props; 子传父:this.$emit
自定义事件:event.$on绑定 event.$emit触发 event.$off解绑
eventBus创建一个事件中心,相当于中转站,用它来传递事件和接收事件。
大项目:Vuex
* 自定义事件要及时在beforeDestroy()中销毁,否则可能造成内存泄漏
5.双向数据绑定v-model的实现原理
采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()实现
一般v-model放在input中,input元素的value=this.name(变量data)
绑定input事件 this.name = $event.target.value(赋值给this.name)
data更新会触发re-render
6.Computed有何特点
计算结果会被缓存,data不变就不会重新计算;提高性能
7.ajax请求应放在哪个声明周期
mounted中,在数组渲染完成之后
因为JS是单线程,ajax是异步获取数据,放在眸之前没什么用,只会让逻辑更混乱
8.如何将组件所有的props传递给子组件
$props <User v-bind=“$props”/>
* 组件中所有的属性不分大小 不分多少时使用
9.多个组件有相同逻辑如何抽离
用mixin
但有缺点:①变量来源不能明,不利于阅读
②多个mixin可能会造成命名冲突
③mixin和组件可能会出现多对多关系,复杂性较高
10.何时使用异步组件?
①加载大组件时 ②路由异步加载时 组件名: () => import(‘../路径’) 在components中引入
11.何时需要使用keep-alive
缓存组件,不需要重复渲染时 如多个静态Tab页切换
12.何时需要使用beforeDestroy(不用的话可能会造成内存泄漏)
①解绑自定义事件 event.$off ②消除定时器
③解绑自定义的DOM事件 如window.scroll等
13.Vuex中action和mutation有何区别
action中处理异步,mutation不可以
mutation做原子操作
action可以整合多个mutation的集合
14.如何配置vue-router异步加载
1 router:[ 2 { 3 Path:’/’, 4 Component: () => import (‘../路径’) 5 } 6 ]
15.监听data的核心API是什么(vue3.0启用proxy,但有兼容性问题)
Object.defineProperty
有缺点: ①无法监听数组变化,需要特殊处理
②深度监听需要递归到底,一次性计算量大
③无法监听新增属性/删除属性 (vue.set ver.delete)
16.Vue为何是异步渲染,$nextTick有什么用
异步渲染(以及合并data修改)以提高渲染性能
$nextTick在Dom更新后 触发回调,以获取最新的Dom节点(因为data改变后,Dom不会立刻渲染)
17.Vue常见性能优化方式
合理使用v-show v-if keep-alive
合理使用computed
v-for时加key,以避免和v-if同时使用
自定义事件 Dom事件,要及时在beforeDestroy()中销毁,否则可能造成内存泄漏
合理使用异步组件