Vue 进阶构造属性

directives 指令

自己创造指令

1.声明一个全局指令

• Vue.directive('y',{...})

Vue.directive('y',{
  inserted:function(el){
    el.addEventListener('click',() => {console.log('y')})
  }
})

2.声明一个局部指令

• options.directives

directives: {
    y: {
      inserted(el) {
        el.addEventListener("click", () => {
          console.log("y");
        });
      },
    },
  }

directiveOptions

五个函数属性

bind(el,info,vnode,oldVnode)  -- 类似 created 

只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置

inserted(el,info,vnode,oldVnode)  -- 类似 mounted 

被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)

update(el,info,vnode,oldVnode)  -- 类似 updated

所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前

componentUpdated(el,info,vnode,oldVnode)

指令所在组件的 VNode 及其子 VNode 全部更新后调用

unbind(el,info,vnode,oldVnode)  -- 类似 destroyed

只调用一次，指令与元素解绑时调用

自制一个 v-on2，代替 v-on

new Vue({
  directives:{
    'on2':{
      inserted(el,info){
        el.addEventListener(info.arg,info.value)
      },
      unbind(el,info){
        el.removeEventListener(info.arg,info.value)
      },
    }
  },
  template: `
    <button v-on2:click="hi">点我</button>
  `,
  methods: {
    hi() {
      console.log("hi");
    }
  }
}).$mount("#app");

指令的作用

主要用于 DOM 操作

• Vue 实例用于数据绑定、事件监听、DOM 更新
• Vue 指令目的主要就是原生 DOM 操作

减少重复

• 如果某个 DOM 操作经常使用或者比较复杂，就可以封装为指令

mixins 混入

mixins 选项接收一个混入对象的数组。这些混入对象可以像正常的实例对象一样包含实例选项，这些选项将会被合并到最终的选项中，使用的是和 Vue.extend() 一样的选项合并逻辑。也就是说，如果你的混入包含一个 created 钩子，而创建组件本身也有一个，那么两个函数都会被调用。

mixin 钩子按照传入顺序依次调用，并在调用组件自身的钩子之前被调用。

• 全局用 Vue.mixin({...})
• 局部用 options.mixins:[mixin1,mixin2]

类比

• directives 的作用是减少 DOM 操作的重复
• mixins 的作用就是减少 data、methods、钩子的重复

选项合并

• 当组件和混入对象含有同名选项时，这些选项将以恰当的方式进行“合并”
• 比如，数据对象在内部会进行递归合并，并在发生冲突时以组件数据优先

var mixin = {
  created: function () { console.log(1) }
}
var vm = new Vue({
  created: function () { console.log(2) },
  mixins: [mixin]
})
// => 1
// => 2

 extends 继承

允许声明扩展另一个组件 (可以是一个简单的选项对象或构造函数)，而无需使 Vue.extend。这主要是为了便于扩展单文件组件。这和 mixins 类似。

• extends 是比 mixins 更抽象一点的封装
• 全局用 Vue.extend({...})
• 局部用 options.extends:{...}

var CompA = { ... }

// 在没有调用 `Vue.extend` 时候继承 CompA
var CompB = {
  extends: CompA,
  ...
}

provide / inject 提供和注入

这对选项需要一起使用，以允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在其上下游关系成立的时间里始终生效。

provide 选项应该是一个对象或返回一个对象的函数。该对象包含可注入其子孙的 property

inject 选项应该是：一个字符串数组，或一个对象，对象的 key 是本地的绑定名，value 是在可用的注入内容中搜索用的 key (字符串或 Symbol)，或一个对象

provide 和 inject 绑定并不是可响应的。这是刻意为之的。然而，如果你传入了一个可监听的对象，那么其对象的 property 还是可响应的。

• 祖先提供东西，后代注入东西
• 作用就是大范围、隔 N 代共享信息

// 父级组件提供 'foo'
var Provider = {
  provide: {
    foo: 'bar'
  },
  // ...
}

// 子组件注入 'foo'
var Child = {
  inject: ['foo'],
  created () {
    console.log(this.foo) // => "bar"
  }
  // ...
}