Vue进阶构造属性-Directive、Mixin、Extends、provide和Inject

xiaoyuAnd
183 阅读2分钟

Directive指令、Mixin混入、Extends继承扩展、provide和Inject提供和注入

创建一个Vue实例，我们需要了解下面这些：

const VM = new Vue(options)

  • 把Vue实例命名为VM是尤雨溪的习惯，我们应该沿用
  • VM对象封装了对视图的所有操作，包括数据读写，事件绑定、DOM更新
  • VM的构造函数是Vue，按照ES6的说法，VM所属的类是Vue
  • options是new Vue的参数，一般称为选项或构造选项

首先先了解options里有什么？

有五类属性

  1. **数据：**data、props、propsData、computed、methods、watch
  2. **DOM：**el、template、rander、randerEeror
  3. **生命周期钩子：**beforeCreate、created、beforeMount、mounted、beforeUpdata、updated、actived、deactived、boforeDestroy、destroyed
  4. **资源：**directives、filters、compopents
  5. **组合：**parent、mixins、extends、provide、inject

下面先了解一下入门属性：

1.el挂载点
可以用$mount代替

2.data内部数据
支持对象函数，优先使用函数
为了组件的复用，使得每一份组件都可以有一份data的拷贝，防止不同组件修改数据使被相互覆盖，如果是对象，一个组件用两次这个数据，那么第二次用的数据就是第一次已经修改过的数据

3.methods方法
事件处理函数或者是普通函数

4.components
Vue组件，注意大小写

5.四个钩子
created：实例出现在内存中
mounted：实例出现在页面中
updated：实例更新了
destroyed：实例从页面和内存中消亡了

6.props外部数据也叫属性
message="n"传入字符串
:message="n"传入this.a数据
:fn="add"传入this.add函数

下面进入到我们这篇文章的重点

Vue进阶构造属性-Directive指令、Mixin混入、Extends继承扩展、provide和Inject提供和注入

1.Directive指令

指令的主要作用是：

  1. 用于DOM操作：Vue实例或组件用于数据绑定、DOM更新、事件监听；指令主要目的就是原生DOM操作
  2. 减少重复：如果某个DOM操作，经常使用，就可以封装成指令；如果某个DOM操作比较复杂，也可以封装成指令

两种写法：

1.声明一个全局指令，你可以在任何组件中使用v-x

Vue.directive('x', directiveOptions)

2.声明一个局部指令，只能在该实例中使用v-x

new Vue({ 
..., 
directives: {
"x": directiveOptions
}
})

directiveOptions的五种属性：

  • bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
  • inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。
  • update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新
  • componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用。
  • unbind：只调用一次，指令与元素解绑时调用。

详情请看官网：

自定义指令 — Vue.js​cn.vuejs.org图标

实例（自己创建一个v-on指令），重点代码展示：

new Vue({
  directives: {
    on2: {
      // bind 可以改为 inserted
      bind(el, info) {
        el.addEventListener(info.arg, info.value);
        // Vue 自带的 v-on 并不是这样实现的，它更复杂，用了事件委托
      },
      unbind(el, info) {
        el.removeEventListener(info.arg, info.value);
      }
    }
  },
  template: `
    <button v-on2:click="hi">点我</button>
  `,
  methods: {
    hi() {
      console.log("hi");
    }
  }
}).$mount("#app");

2.Mixin混入

混入大概可以理解成复制

利用类比的想法：directives的作用是减少DOM操作的重复；mixins的作用就是减少data、methods、钩子的重复

事例：

场景描述：假设我们需要在每个组件上添加name和time；在created、destroyed时，打出提示，并报存活时间；一共五个组件，要怎么做？

1.给每个组件添加data和钩子，共五次

2.或者用mixins减少重复

事例链接：

brave-dijkstra-memmm - CodeSandbox​codesandbox.io图标

3.Extent继承

和mixins同样的需求，但是不想每一次都写一次mixins，应该怎么办？

这时候可以使用Vue.extend或options.extends

const MyVue = Vue.extend({
    data(){ return {name:'',time:undefined} },
    created(){
       if(!this.name){console.error('no name!')}
       this.time = new Date()
    },
    beforeDestroy(){
       const duration = (new Date()) - this.time
       console.log(`${this.name} ${duration}`)
    }
})

然后就可以使用new MyVue(options)了

extends就是比mixins更抽象一点的封装，如果嫌写5次mixins麻烦就可以考虑extends一次，不过工作中用的很少

4.provide和inject提供和注入

需求：一键换肤功能，原来是蓝色，一键切换成红色

文字大小：默认正常，可以改大改小

完成事例代码：

fragrant-rain-h8lm6 - CodeSandbox​codesandbox.io图标

祖先栽树（provide），后人乘凉（inject）

总结：大范围的data和method公用，大范围，隔N代共享信息

注意：事例中不能只传themeName，不传changeTheme，因为themeName的值是被复制给provide的

avatar
文章
阅读
粉丝