Vue进阶属性

sniper
386 阅读2分钟

Directives - 指令

  • 内置指令：v-if v-for v-show v-html(指令以v-开头) 那么我们怎么样造出一个自定义指令呢？
声明一个全局指令

Vue.directive('x',directiveOptions)就可以在任何组建里使用v-x了

声明一个局部指令
new Vue({
  ...,
  directives:{
    "x":directiveOptions  
  }
})

我们知道了声明的方式，那么directiveOptions到底有哪些属性呢？

  • bind(el,info,vnode,oldVnode) - 类似created
  • inserted(el,info,vnode,oldVnode) - 类似mounted
  • update(el,info,vnode,oldVnode) - 类似updated
  • componentUpdated(el,info,vnode,oldVnode)
  • unbind(el,info,vnode,oldVnode) - 类似destroyed 说到绑定，我们通常用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");

这就是一个简易版的v-on事件

指令的作用
  • 用于DOM操作：Vue指令的主要目的就是原生DOM操作；Vue实例/组件用于数据绑定、事件监听、DOM更新
  • 减少重复

Mixins - 混入

如果我们说directives的作用是为了减少DOM操作的重复，那么mixins就是为了减少data methods和钩子的重复。
举个例子：如果我们需要在每个组件上添加name和time，在created和destroyed时，打出提示，并报出存活时间，一共有五个组件。如果用平常的方法会过于繁琐了，那么有mixins就会方便很多，具体要怎么做？大家可以看看这里。在示范代码中，只用了一个mixins功能，就很好的把繁琐重复的事情，变得更简单了。
其实mixins还有一些小技巧，比如选项智能合并以及我们可以使用一个全局的mixin，在刚刚的例子里我们可以在全局声明一个Vue.mixin(mixin)即全局混入，但是这个方法不太推荐，容易出现范围过大的问题。

Extends - 继承

说道extends，其实和mixins差不多，我们列举一个和mixins同样的需求，但是我不想在每个组件上写mixin，要怎么办呢？我们可以使用Vue.extend或options.extends，我们新建了一个MyVue.js文件：

import Vue from "vue";
const MyVue = Vue.extend({
  data() {
    return {
      name: undefined,
      time: undefined
    };
  },
  created() {
    if (!this.name) {
      throw new Error("need name");
    }
    this.time = new Date();
    console.log(`${this.name}出生了`);
  },
  beforeDestroy() {
    const now = new Date();

    console.log(`${this.name}死亡了，共生存了 ${now - this.time} ms`);
  }
});

export default MyVue;

然后拿上面的Child1.vue文件举例，在里面引入继承这个文件：这就是extends，总的来说和mixin没有太大的出路，大家可以试情况选择方法。总的来说extends是比mixins更抽象的封装。

Provide和Inject - 提供和注入

我们用一个换肤功能来举例,总的来说，这就叫做仙人栽树(provide),后人乘凉(inject)
还是上面换肤功能的代码：

  provide(){
    return{
      themeName:this.themeName,
      changeTheme:this.changeTheme,
      changeFontSize:this.changeFontSize
    };
  },

当我们想共用大范围的data和method，我们就把他们放进provide，注意在这个代码中，如果我们直接更改themeName是没有反应的，因为themeName的值是被复制给provide的，这个办法我们可以用通过引用解决，但是这个做法不太推荐。

总结

directives - 指令

  • 全局用Vue.directive('x',{...})
  • 局部用options.directives
  • 作用是减少DOM操作相关重复代码 mixins - 混入
  • 全局用Vue.mixin({...})
  • 局部用options.mixins:[mixin1,mixin2]
  • 作用是减少options里的重复 extends - 继承/扩展
  • 全局用Vue.extend({...})
  • 局部用options.extends:{...}
  • 作用和mixins差不多，只是形式不同 provide/inject - 提供和注入
  • 祖先提供东，后代注入东西
  • 作用是大范围、隔N代共享信息
avatar
文章
阅读
粉丝