6.Vue

原文链接：https://github.com/helloyoucan/knowledge

Vue

1、生命周期

• beforeCreate

• created

• beforeMount

• mounted

• beforeUpdate

• updated

• activated

• deactivated

• beforeDestroy

• destroyed

• errorCaptured（v2.5.0+）

2、指令

v-once、v-bind、v-on、v-if、v-else、v-else-if、v-for、v-show、v-model、v-text、v-html、v-slot（插槽）、v-pre、v-cloak（与css搭配隐藏vue标签指令，e.g.:{{}}）

自定义指令

// 全局
Vue.directive('focus',{
    bind(){},//指令第一次绑定元素时调用
    inserted(){},//被绑定元素插入父节点时调用（父节点不一定已插入到文档中）
    update(){},//所在组件的VNode更新时调用
    componentUpdated(){},//指令所在组件的VNode及其子VNode全部更新后调用
    unbind(){}//指令与元素解绑时调用
})
// 组件内
directives:{
    focus:{
        // 指令内容 
    }
}

函数参数（el、bind、vnode、oldVnode）

除了el，其它均为只读。

el //指令绑定的元素，可直接操作DOM
binding{
    name //指令名
    value //指令绑定值
    oldValue //指令前一个绑定值，仅在update和componentUpdated中可用。
    expression //字符串形式的指令表达式（指令绑定的内容）
    arg //指令参数（指令’:‘后面的参数），可选
    modifiers //包含所有指令修饰符的对象
}
vnode // vue编译生成的虚拟节点
oldVnode // 上一个虚拟节点，仅在update和componentUpdated中可用。

3、组件通讯

父向子传递

1. props或$attr（使用子组件时的传递的所有非prop属性）/$listeners(使用子组件时传递的所有非.native修饰的事件)+inheritAttrs（控制非props属性是否回退到子组件根元素上）
2. 使用ref赋予子组件ID引用或使用$children，获取子组件实例，修改数据或调用函数
3. provide / inject（提供/注入）（子孙后代注入依赖）

子向父传递

1. 父给子绑定自定义事件，让子组件触发$emit('event-name')
2. 子组件使用$parent获取父组件实例，修改数据或调用函数

兄弟组件

1. EventBus（事件总线，使用另外的Vue实例，通过$on监听和$emit触发）
2. vuex
3. 另一个Vue实例响应数据
4. localStorage+storage事件
5. postMessage+message事件
6. hash+hashchange事件

可划分为以下几类

• props
• v-on+$emit
• $children/$parent
• vue instance（另一个实例）
• vuex
• inject/provide
• localStorage
• postMessage
• hash

4、mixins&extends

mixins：Array