Vue中options选项笔记2

嗨慢走
185 阅读5分钟

Vue中options选项

Directives（指令）

  • 参数：
    • {string} id（指令名）
    • {Function | Object} [definition]
definition里面的选项钩子
  bind: function (el,info,vonde,oldVnode) {},//类似于created
  inserted: function (el,info,vonde,oldVnode) {},//类似mounted
  update: function (el,info,vonde,oldVnode) {},类似updated
  componentUpdated: function (el,info,vonde,oldVnode) {},
  unbind: function (el,info,vonde,oldVnode) {}//类似destroyed

钩子函数参数

指令钩子函数会被传入以下参数：

  • 指令所绑定的元素，可以用来直接操作 DOM。

  • binding：一个对象，包含以下 property：

  • name：指令名，不包括 v- 前缀。
  • value：指令的绑定值，例如：v-my-directive="1 + 1" 中，绑定值为 2。
  • oldValue：指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。
  • expression：字符串形式的指令表达式。例如 v-my-directive="1 + 1" 中，表达式为 "1 + 1"。
  • arg：传给指令的参数，可选。例如 v-my-directive:foo 中，参数为 "foo"。
  • modifiers：一个包含修饰符的对象。例如：v-my-directive.foo.bar 中，修饰符对象为 { foo: true, bar: true }。

  • vnode：Vue 编译生成的虚拟节点。移步 VNode API 来了解更多详情。

  • oldVnode：上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。

    除了 el 之外，其它参数都应该是只读的，切勿进行修改。如果需要在钩子之间共享数据，建议通过元素的 dataset 来进行。

注册或获取全局指令

// 注册
Vue.directive('my-directive', {
  bind: function () {},
  inserted: function () {},
  update: function () {},
  componentUpdated: function () {},
  unbind: function () {}
})

// 全局注册 (指令函数)
Vue.directive('my-directive', function () {
  // 这里将会被 `bind` 和 `update` 调用
})

// getter，返回已注册的指令
var myDirective = Vue.directive('my-directive')

局部指令

export default {
  data() {
    return {
      name: "小明",
    };
  },//局部指令
    directives: {
        x: {
            inserted(el) {
                el.style.color = "red";
                el.addEventListener("click", () => {
                    console.log("y");
                });
            },
        },
    },
};

指令的作用

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

减少重复

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

mixins（混入/复制）

  • 类型：Array

  • 详细：

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

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

示例：

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

类比

  • directives作用是减少DOM的重复
  • mixins作用是减少data、methods，钩子的城府

应用场景

假设我们要在每个组件上添加name和time

在created 、destroyed时，打出提示，并报出存存活的事件

总共有五个组件，请问要怎麽做

  • 1 在每个组件上，添加data和钩子，共五次
  • 2 或者使用mixins，减少重复

示例代码

mixins技巧

extends (继承)

  • 类型：Object | Function

  • 详细：

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

    这和 mixins 类似。

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

减少重复

  • 与mixins同样的舆情
  • 不想内次毒液是一个mixins 咋办

可以使用Vue.extends 或options.extends

const myVue = Vue.extends({
    data(){return {name:"xiaoming",time:undefined}},
    created(){
        if(!this.name){console.log(tshi.name)}
        this.time = new Date()
    }
    beforeDestroy(){
    const duration = (new Date()) - this.time
	console.log(`${this.name} ${duration}`)
}
})
我们就可以使用 new myVue(optionsa)了
extends 是比mixins跟抽象一点的封装，实际上不常用

provide和inject（提供和注入）

  • 类型：

    • provide：Object | () => Object
    • inject：Array | { [key: string]: string | Symbol | Object }

  • 详解

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

    provide 选项应该是一个对象或返回一个对象的函数。该对象包含可注入其子孙的 property。在该对象中你可以使用 ES2015 Symbols 作为 key，但是只在原生支持 Symbol 和 Reflect.ownKeys 的环境下可工作。

inject 选项应该是：

  • 一个字符串数组，或
  • 一个对象，对象的 key 是本地的绑定名，value 是：
    • 在可用的注入内容中搜索用的 key (字符串或 Symbol)，或
    • 一个对象，该对象的：
      • from property 是在可用的注入内容中搜索用的 key (字符串或 Symbol)
      • default property 是降级情况下使用的 value

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

示例

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

利用 ES2015 Symbols、函数 provide 和对象 inject：

const s = Symbol()

const Provider = {
  provide () {
    return {
      [s]: 'foo'
    }
  }
}

const Child = {
  inject: { s },
  // ...
}

接下来 2 个例子只工作在 Vue 2.2.1 或更高版本。低于这个版本时，注入的值会在 props 和 data 初始化之后得

使用一个注入的值作为一个 property 的默认值：

const Child = {
  inject: ['foo'],
  props: {
    bar: {
      default () {
        return this.foo
      }
    }
  }
}

使用一个注入的值作为数据入口：

const Child = {
  inject: ['foo'],
  data () {
    return {
      bar: this.foo
    }
  }
}

在 2.5.0+ 的注入可以通过设置默认值使其变成可选项：

const Child = {
  inject: {
    foo: {
      from: 'bar',
      default: 'foo'
    }
  }
}

与 prop 的默认值类似，你需要对非原始值使用一个工厂方法：

const Child = {
  inject: {
    foo: {
      from: 'bar',
      default: () => [1, 2, 3]
    }
  }
}

应用场景

  • 需求

    • 一键换肤功能： 默认蓝色，可以切换为红色

    • 文字大小： 默认正常，可以切换大或小

  • 总结
    • 作用：大范围的data和method的并用
    • 注意：不能只传themeNane不传changeTheme因为themeNane的值是被复制给provide的

总结

1647782858552.png

avatar
文章
阅读
粉丝