v-if和v-show的区别，以及使用场景
- v-if，通过销毁并重建组件，来控制组件显示隐藏，初始化不会渲染，不适用频繁显示隐藏的组件，可以用在
<template>上。 - v-show，通关元素的display属性，来控制元素显示隐藏，初始化会渲染，适用频繁显示隐藏的元素，不能用在
<template>上。
v-for和v-if不能一起适用
v-for的优先级比v-if更高，这意味着v-if将分别重复运行于每个v-for循环中。
为何在v-for中用key
- 必须用key，且不能是index和random
- diff算法中通过tag和key来判断，是否是sameNode
- 减少渲染次数，提升渲染性能
组件之间通讯
- 父子组件之间通讯：props, this.$emit()调用父组件事件
- 兄弟组件之间通讯：new Vue().on()绑定自定义事件， new Vue().$off在beforeDestroy里及时销毁
组件生命周期调用顺序
组件的调用顺序都是先父后子，渲染完成的顺序是先子后父。 组件的销毁操作是先父后子，销毁完成的顺序是先子后父。
- 加载渲染过程 父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted
- 更新过程 父berforeUpdate->子beforeUpdate->子updated->父updated
- 销毁过程 父beforeDestroy->子beforeDestroy->子destroyed->父destroyed
自定义v-model
- 首先在props里定义类型为String的text属性。
- 在model对象里定义props和event属性。
- 在标签上添加:value="text"和@input="event.target.vaule)"
<template>
<!-- 例如：vue 颜色选择 -->
<input type="text"
:value="text"
@input="$emit('change', $event.target.value)"
>
<!--
1. 上面的 input 使用了 :value 而不是 v-model
2. 上面的 change 和 model.event 要对应起来
3. text 属性对应起来
-->
</template>
<script>
export default {
model: {
prop: 'text', // 对应 props text
event: 'change'
},
props: {
text: {
type: String,
default: ''
}
}
}
</script>
ajax请求应该放在哪个生命周期
- mounted
- JS是单线程的，ajax异步获取数据
- 放在mounted之前没有用，只会让逻辑更加混乱
何时需要使用beforeDestory
- 解绑自定义事件event.$off
- 清除定时器
- 解绑自定义的DOM事件，如window scroll等
异步组件
在大型应用中，我们可能需要将应用分割成小一些的代码块，并且只在需要的时候才从服务器加载一个模块。
components: {
'my-component': () => import('./my-async-component')
}
mixin
多个组件有相同的逻辑，抽离出来
缺点
- 变量来源不明确，不利于阅读
- 多mixin可能会造成命名冲突
- mixin和组件可能出现多对多的关系，复杂度较高
何时需要使用keep-alive
- 缓存组件，不需要重复渲染
- 如多个静态tab页的切换
- 优化性能
vuex
- state
- getters
- action
- mutation
- dispatch
- commit
- mapState
- mapGetters
- mapActions
- mapMutations
Vuex中action和mutation的区别
- action中处理异步，mutation不可以
- mutation做原子操作
- action可以整合多个mutation
vue-router
- 路由模式
- hash模式（默认），如abc.com/#/user/10
- H5 history模式，如abc.com/user/20
- 后者需要server端支持，因此无特殊需求可选择前者
- 路由配置
- 动态路由
- 懒加载
Vue 常见性能优化方式
- 合理使用v-show和v-if
- 合理使用computed
- v-for时加key，以及避免和v-if同时使用
- 自定义事件、DOM事件及时销毁
- 合理使用异步组件
- 合理使用keep-alive
- data层级不要太深
- 使用vue-loader在开发环境做模板编译（预编译）
