v-show和v-if的区别
- v-show通过CSS display控制显示和隐藏
- v-if组件真正的渲染和销毁，而不是显示和隐藏
为何在v-for中用key
- 必须用key，且不能是index和random
- diff算法中通过tag和key来判断，是否是sameNode
- 减少渲染次数，提升渲染性能
描述Vue组件生命周期（父子组件）
- 单组件生命周期图
- 父子组件生命周期关系
Vue组件如何通讯（常见）
- 父子组件props和this.$emit
- 自定义事件event.$on、event.$off、event.$emit
- Vuex
描述组件渲染和更新过程
双向数据绑定v-model的实现原理
- input元素的value = this.name
- 绑定input事件this.name = $event.target.value
- data更新触发re-render
对MVVM的理解
computed有何特点
- 缓存，data不变不会重新计算
- 提高性能
为何组件data必须是一个函数
- 为了避免共享实例
ajax请求应该放在哪个生命周期
- mounted
- JS是单线程的，ajax异步获取数据
- 放在mounted之前没有用，只会让逻辑更加混乱
如何将组件所有props传递给子组件
- $props
- < User v-bind=”$props” />
- 细节知识点，优先级不高
如何自己实现v-model
<template>
<input type="text"
:value="text1"
@input="$emit('change1', $event.target.value)"
>
<!--
1. 上面的 input 使用了 :value 而不是 v-model
2. 上面的 change1 和 model.event1 要对应起来
3. text1 属性对应起来
-->
</template>
<script>
export default {
model: {
prop: 'text1', // 对应 props text1
event: 'change1'
},
props: {
text1: String,
default() {
return ''
}
}
}
</script>
多个组件有相同的逻辑，如何抽离
- mixin
- 以及mixin的一些缺点
何时要使用异步组件
- 加载大组件
- 路由异步加载
何时需要使用keep-alive
- 缓存组件，不需要重复渲染
- 如多个静态tab页的切换
- 优化性能
何时需要使用beforeDestory
- 解绑自定义事件event.$off
- 清除定时器
- 解绑自定义的DOM事件，如window、scroll等
什么是作用域插槽
Index.vue
<ScopedSlotDemo :url="website.url">
<template v-slot="slotProps">
{{slotProps.slotData.title}}
</template>
</ScopedSlotDemo>
ScopedSlotDemo.vue
<template>
<a :href="url">
<slot :slotData="website">
{{website.subTitle}} <!-- 默认值显示 subTitle ，即父组件不传内容时 -->
</slot>
</a>
</template>
<script>
export default {
props: ['url'],
data() {
return {
website: {
url: 'http://wangEditor.com/',
title: 'wangEditor',
subTitle: '轻量级富文本编辑器'
}
}
}
}
</script>
Vuex中action和mutation有何区别
- action中处理异步，mutation不可以
- mutation做原子操作
- action可以整合多个mutation
Vue-router常用的路由模式
- hash（默认）
- H5 history（需要服务端支持）
- 两者比较
如何配置Vue-router异步加载
export default new VueRouter({
routes:[
{
path:"/"
component:()=>import(
/* webpackChunkName:"navigator" */
"./../components/Navigator"
)
}
]
})
请用vnode描述一个DOM结构
<div id="div1" class="container">
<p>vdom</p>
<ul style="font-size:20px">
<li>a</li>
</ul>
</div>
{
tag:"div",
props:{
className:"container",
id:"div1"
},
context:"",
children:[
{
tag:"p",
context:"vdom",
children:[]
},
{
tag:"ul",
props:{
style:"font-size:20px"
},
context:"",
children:[
{
tag:"li",
context:"a",
children:[]
}
//...
]
}
]
}
监听data变化的核心API是什么
- Object.defineProperty
- 以及深度监听、监听数组
- 有何缺点
Vue如何监听数组变化
- Object.defineProperty不能监听数组变化
- 重新定义原型，重写push、pop等方法，实现监听
- proxy可以原生支持监听数组变化
请描述响应式原理
- 监听data变化
- 组件渲染和更新的流程
diff算法的时间复杂度
- O(n)
- 在O(n^3)基础上做了一些调整
简述diff算法过程
- patch(elem,vnode)和patch(vnode,newVnode)
- patchVnode和addVnodes和removeVnodes
- updateChildren（key的重要性）
Vue为何是异步渲染，$nextTick何用
- 异步渲染（以及合并data修改），以提高渲染性能
- $nextTick在DOM更新完之后，触发回调
Vue常见性能优化方式
- 合理使用v-show和v-if
- 合理使用computed
- v-for时加key，以及避免和v-if同时使用
- 自定义事件、DOM事件及时销毁
- 合理使用异步组件
- 合理使用keep-alive
- data层级不要太深
- 使用vue-loader在开发环境做模版编译（预编译）
- webpack层面的优化
- 前端通用的性能优化，如图片懒加载
- 使用SSR
