Vue 基础知识

Posted 2020-11-13 amiezhang

1. vue 生命周期函数（详细查看：Vue实例的生命周期（钩子函数））

 有 10 个钩子，对应 5 个动作：

• create（创建）
• mount（vdom挂载）
• update（数据更新导致dom需要重新渲染和打补丁）
• active（keep-alive组件激活）
• destory（销毁）

2. 组件间通讯

• 父子组件

1. 父 -> 子：props
2. 父 -> 子：$attrs（props没有定义，但是却被传进来的属性，inheritAttrs属性默认为true，会把props以外的属性渲染到组件的根dom作为属性，设置为false，则会避免这个行为）
3. 父 -> 子：$refs 在子组件绑定ref属性，然后在mouted以后就可以在父组件的this.$refs对象上找到这个子组件实例，可以用它的属性和方法
4. 子 -> 父：$emit 事件，触发事件，通知父组件（有语法糖 .sync，:xxx.sync="yyy" 等价于 @update:xxx="v => yyy=v"，写了sync，在子组件需要$emit(‘update:xxx‘, ...)来更新父组件的yyy属性）

• 兄弟组件

1. this.$parent.$children 找到兄弟组件，可以用它的属性和方法

• 跨多层级组件

1. provide、inject（在父组件provide，在孙组件inject，官方不推荐使用）

• 任意组件

1. Vuex
2. Event Bus（vue-bus $bus.on(‘xxx‘, function(){}) $bus.emit(‘xxx‘, ...args)）

3. mixin 和 mixins

　　mixin 是全局混入，mixins 是局部混入

// 全局 mixin 所有组件都会有 person 属性
Vue.mixin({
  data () {
    return {
      name: ‘vue superman‘
    }
  }
})

/*********mixins 局部混入*********/
// mixin.js
export default {
    data() {
        return {
             name: ‘vue superman 2333‘
        }
    }
}

// component1.vue
import mixin from ‘./mixin.js‘
export default {
    mixins: [mixin]
}

4. keep-alive

切换组件的时候，可以保存组件的状态，触发组件的activated deactivated生命钩子。

通常配合 router-view 和 v-if 使用

<keep-alive>
    <router-view></router-view>
    <HelloWorld v-if="show"></HelloWorld>
</keep-alive>