Vue 基础知识

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

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

• create（创建）
• mount（vdom挂载）
• update（数据更新导致dom需要重新渲染和打补丁）
• activated（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>

5. directive

 

Vue.directive('my-directive', {
    bind(el,binding,vnode,oldVnode) {}, // 指令第一次绑定到元素时调用
    inserted(el,binding,vnode,oldVnode) {}, // 被绑定元素插入父节点时调用
    update(el,binding,vnode,oldVnode) {}, // 所在组件的 VNode 更新时调用(指令发生变化的话，对应vnode也会发生变化，所以会触发这个事件)
    componentUpdated(el,binding,vnode,oldVnode) {}, // 所在组件的 VNode 及其子 VNode 全部更新后调用
    unbind(el,binding,vnode,oldVnode) {} // 指令与元素解绑时调用
})

// demo
Vue.directive('clickoutside', {
  bind(el, binding) {
    document.addEventListener('click', ev => {
      if (typeof binding.value === 'function') {
        binding.value(!el.contains(ev.target))
      }
    })
  }
})

 

 

 

 

6. filter 和 filters

和angular的filter一个意思，转化数值，用于展示。

// 全局注册过滤器
Vue.filter('my-filter', function (value) { // 返回处理后的值 })

// 局部注册过滤器
export default {
    filters: {
        'my-filter'(val) {
           // 返回处理后的值
        }
    }
}

// 使用时
{{ 'xxxx' | my-filter }}