0
点赞
收藏
分享

微信扫一扫

对vue的研究

老榆 2022-12-13 阅读 61

​​beforeDestroy​​

  • 类型:​​Function​
  • 详细:
    实例销毁之前调用。在这一步,实例仍然完全可用。
    该钩子在服务器端渲染期间不被调用。
  • 参考:​​生命周期图示​​

​​destroyed​​

  • 类型:​​Function​
  • 详细:
    Vue 实例销毁后调用。调用后,Vue 实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。
    该钩子在服务器端渲染期间不被调用。
  • 参考:​​生命周期图示​​

​​errorCaptured​​

2.5.0+ 新增

  • 类型:​​(err: Error, vm: Component, info: string) => ?boolean​
  • 详细:
    当捕获一个来自子孙组件的错误时被调用。此钩子会收到三个参数:错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串。此钩子可以返回 ​​false​​ 以阻止该错误继续向上传播。
    你可以在此钩子中修改组件的状态。因此在模板或渲染函数中设置其它内容的短路条件非常重要,它可以防止当一个错误被捕获时该组件进入一个无限的渲染循环。
    错误传播规则
  • 默认情况下,如果全局的 ​​config.errorHandler​​ 被定义,所有的错误仍会发送它,因此这些错误仍然会向单一的分析服务的地方进行汇报。
  • 如果一个组件的继承或父级从属链路中存在多个 ​​errorCaptured​​ 钩子,则它们将会被相同的错误逐个唤起。
  • 如果此 ​​errorCaptured​​ 钩子自身抛出了一个错误,则这个新错误和原本被捕获的错误都会发送给全局的 ​​config.errorHandler​​。
  • 一个 ​​errorCaptured​​ 钩子能够返回 ​​false​​ 以阻止错误继续向上传播。本质上是说“这个错误已经被搞定了且应该被忽略”。它会阻止其它任何会被这个错误唤起的 ​​errorCaptured​​ 钩子和全局的 ​​config.errorHandler​​。

 

​​选项 / 资源​​

​​directives​​

  • 类型:​​Object​
  • 详细:

包含 Vue 实例可用指令的哈希表。

  • 参考:​​自定义指令​​

​​filters​​

  • 类型:​​Object​
  • 详细:

包含 Vue 实例可用过滤器的哈希表。

  • 参考:​​Vue.filter​​

​​components​​

  • 类型:​​Object​
  • 详细:

包含 Vue 实例可用组件的哈希表。

  • 参考:​​组件​​

​​选项 / 组合​​

​​parent​​

  • 类型:​​Vue instance​
  • 详细:
    指定已创建的实例之父实例,在两者之间建立父子关系。子实例可以用 ​​this.$parent​​访问父实例,子实例被推入父实例的 ​​$children​​ 数组中。
    节制地使用 ​​$parent​​ 和 ​​$children​​ - 它们的主要目的是作为访问组件的应急方法。更推荐用 props 和 events 实现父子组件通信

 

​​mixins​​

  • 类型:​​Array<Object>​
  • 详细:
    ​​​mixins​​​ 选项接受一个混入对象的数组。这些混入实例对象可以像正常的实例对象一样包含选项,他们将在 ​​Vue.extend()​​ 里最终选择使用相同的选项合并逻辑合并。举例:如果你的混入包含一个钩子而创建组件本身也有一个,两个函数将被调用。
    Mixin 钩子按照传入顺序依次调用,并在调用组件自身的钩子之前被调用。
  • 示例:

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

  • 参考:​​混入​​

​​extends​​

  • 类型:​​Object | Function​
  • 详细:
    允许声明扩展另一个组件(可以是一个简单的选项对象或构造函数),而无需使用 ​​Vue.extend​​。这主要是为了便于扩展单文件组件。
    这和 ​​mixins​​ 类似。
  • 示例:

var CompA = { ... }

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

 

​​provide / inject​​

2.2.0 新增

  • 类型:
  • provide:​​Object | () => Object​
  • inject:​​Array<string> | { [key: string]: string | Symbol | Object }​
  • 详细:
    ​provide​​​ 和 ​​inject​​ 主要为高阶插件/组件库提供用例。并不推荐直接用于应用程序代码中。
    这对选项需要一起使用,以允许一个祖先组件向其所有子孙后代注入一个依赖,不论组件层次有多深,并在起上下游关系成立的时间里始终生效。如果你熟悉 React,这与 React 的上下文特性很相似。
    ​provide​​​ 选项应该是一个对象或返回一个对象的函数。该对象包含可注入其子孙的属性。在该对象中你可以使用 ES2015 Symbols 作为 key,但是只在原生支持 ​​Symbol​​ 和 ​​Reflect.ownKeys​​ 的环境下可工作。
    ​inject​​ 选项应该是:
  • 一个字符串数组,或
  • 一个对象,对象的 key 是本地的绑定名,value 是:
  • 在可用的注入内容中搜索用的 key (字符串或 Symbol),或
  • 一个对象,该对象的:
  • ​from​​ 属性是在可用的注入内容中搜索用的 key (字符串或 Symbol)
  • ​default​​ 属性是降级情况下使用的 value

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

  • 示例:

// 父级组件提供 '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​​ 初始化之后得到。

使用一个注入的值作为一个属性的默认值:

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: { default: 'foo' }
}
}

如果它需要从一个不同名字的属性注入,则使用 ​​from​​ 来表示其源属性:

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

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

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

 

​​选项 / 其它​​

​​name​​

  • 类型:​​string​
  • 限制:只有作为组件选项时起作用。
  • 详细:
    允许组件模板递归地调用自身。注意,组件在全局用 ​​​Vue.component()​​​ 注册时,全局 ID 自动作为组件的 name。
    指定 ​​​name​​​ 选项的另一个好处是便于调试。有名字的组件有更友好的警告信息。另外,当在有 ​​vue-devtools​​​,未命名组件将显示成 ​​<AnonymousComponent>​​​,这很没有语义。通过提供 ​​name​​ 选项,可以获得更有语义信息的组件树。

​​delimiters​​

  • 类型:​​Array<string>​
  • 默认值:​​["{{", "}}"]​
  • 限制:这个选项只在完整构建版本中的浏览器内编译时可用。
  • 详细:
    改变纯文本插入分隔符。
  • 示例:

new Vue({
delimiters: ['${', '}']
})

// 分隔符变成了 ES6 模板字符串的风格

​​functional​​

  • 类型:​​boolean​
  • 详细:
    使组件无状态 (没有 ​​​data​​​ ) 和无实例 (没有 ​​this​​​ 上下文)。他们用一个简单的 ​​render​​函数返回虚拟节点使他们更容易渲染。
  • 参考:​​函数式组件​​

​​model​​

2.2.0 新增

  • 类型:​​{ prop?: string, event?: string }​
  • 详细:
    允许一个自定义组件在使用 ​​​v-model​​​ 时定制 prop 和 event。默认情况下,一个组件上的 ​​v-model​​​ 会把 ​​value​​​ 用作 prop 且把 ​​input​​​ 用作 event,但是一些输入类型比如单选框和复选框按钮可能想使用 ​​value​​​ prop 来达到不同的目的。使用 ​​model​​ 选项可以回避这些情况产生的冲突。
  • Example:

Vue.component('my-checkbox', {
model: {
prop: 'checked',
event: 'change'
},
props: {
// this allows using the `value` prop for a different purpose
value: String,
// use `checked` as the prop which take the place of `value`
checked: {
type: Number,
default: 0
}
},
// ...
})

<my-checkbox v-model="foo" value="some value"></my-checkbox>

上述代码相当于:

<my-checkbox
:checked="foo"
@change="val => { foo = val }"
value="some value">
</my-checkbox>

​​inheritAttrs​​

2.4.0 新增

  • 类型:​​boolean​
  • 默认值:​​true​
  • 详细:
    默认情况下父作用域的不被认作 props 的特性绑定 (attribute bindings) 将会“回退”且作为普通的 HTML 特性应用在子组件的根元素上。当撰写包裹一个目标元素或另一个组件的组件时,这可能不会总是符合预期行为。通过设置 ​​​inheritAttrs​​​ 到 ​​false​​​,这些默认行为将会被去掉。而通过 (同样是 2.4 新增的) 实例属性 ​​$attrs​​​ 可以让这些特性生效,且可以通过 ​​v-bind​​​ 显性的绑定到非根元素上。
    注意:这个选项不影响 ​​​class​​​ 和 ​​style​​ 绑定。

​​comments​​

2.4.0 新增

  • 类型:​​boolean​
  • 默认值:​​false​
  • 限制:这个选项只在完整构建版本中的浏览器内编译时可用。
  • 详细:
    当设为 ​​​true​​ 时,将会保留且渲染模板中的 HTML 注释。默认行为是舍弃它们。

 



举报

相关推荐

0 条评论