vue 体系
2020-01-09 10:24:34 1 举报
AI智能生成
Vue
作者其他创作
大纲/内容
选项/资源
directives
filters
components
选项/组合
parent
类型:Vue instance指定已创建的实例之父实例,在两者之间简历父子关系。子实例可以用this.$parent访问父实例,子实例被推入父实例的$children数组中节制地使用 $parent 和 $children - 它们的主要目的是作为访问组件的应急方法。更推荐用 props 和 events 实现父子组件通信
mixins
类型:Array<Object>mixins 选项接受一个混入对象的数组。这些混入实例对象可以像正常的实例对象一样包含选项,他们将在 Vue.extend() 里最终选择使用相同的选项合并逻辑合并。举例:如果你的混入包含一个钩子而创建组件本身也有一个,两个函数将被调用。Mixin 钩子按照传入顺序依次调用,并在调用组件自身的钩子之前被调用。
extends
允许声明扩展另一个组件(可以是一个简单的选项对象或构造函数),而无需使用 Vue.extend。这主要是为了便于扩展单文件组件。这和 mixins 类似
provide/inject
provide: Object | () => Object选项应该是一个对象或返回一个对象的函数。该对象包含可注入其子孙的属性。在该对象中你可以使用 ES2015 Symbols 作为 key,但是只在原生支持 Symbol 和 Reflect.ownKeys 的环境下可工作。inject: Array<string> | { [key: string]: string | Symbol | Object }provide 和 inject 绑定并不是可响应的。这是刻意为之的。然而,如果你传入了一个可监听的对象,那么其对象的属性还是可响应的。
选项/其它
name
作为组件选项时起作用,允许组件模版递归的调用自身。组件在全局用Vue.component()注册时,全局ID自动作为组件的name。指定 name 选项的另一个好处是便于调试。有名字的组件有更友好的警告信息。另外,当在有 vue-devtools,未命名组件将显示成 <AnonymousComponent>,这很没有语义。通过提供 name 选项,可以获得更有语义信息的组件树。
delimiters
functional
使组件无状态(没有data)和无实例(没有this上下文)。他们用一个简单的render函数返回虚拟节点使他们更容易渲染
model
允许一个自定义组件在使用 v-model 时定制 prop 和 event。默认情况下,一个组件上的 v-model 会把 value 用作 prop 且把 input 用作 event,但是一些输入类型比如单选框和复选框按钮可能想使用 value prop 来达到不同的目的。使用 model 选项可以回避这些情况产生的冲突。
inheritAttrs
默认情况下父作用域的不被认作 props 的特性绑定 (attribute bindings) 将会“回退”且作为普通的 HTML 特性应用在子组件的根元素上。当撰写包裹一个目标元素或另一个组件的组件时,这可能不会总是符合预期行为。通过设置 inheritAttrs 到 false,这些默认行为将会被去掉。而通过 (同样是 2.4 新增的) 实例属性 $attrs 可以让这些特性生效,且可以通过 v-bind 显性的绑定到非根元素上。这个选项不影响class和style绑定
comments
这个选项只在完整构建版本中的浏览器内编译时可用当设为 true 时,将会保留且渲染模板中的 HTML 注释。默认行为是舍弃它们。
实例属性vm.$*
$data
$porps
$el
$parent
$children
当前实例的直接子组件。需要注意 $children 并不保证顺序,也不是响应式的。如果你发现自己正在尝试使用 $children 来进行数据绑定,考虑使用一个数组配合 v-for 来生成子组件,并且使用 Array 作为真正的来源。
$slots
用来访问被插槽分发的内容。每个具名插槽 有其相应的属性 (例如:v-slot:foo 中的内容将会在 vm.$slots.foo 中被找到)。default 属性包括了所有没有被包含在具名插槽中的节点,或 v-slot:default 的内容。
$scopedSlots
$refs
$attrs
包含了父作用域中不作为 prop 被识别 (且获取) 的特性绑定 (class 和 style 除外)。当一个组件没有声明任何 prop 时,这里会包含所有父作用域的绑定 (class 和 style 除外),并且可以通过 v-bind=\"$attrs\" 传入内部组件——在创建高级别的组件时非常有用。
$listeners
包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。它可以通过 v-on=\"$listeners\" 传入内部组件——在创建更高层次的组件时非常有用。
$options
用于当前 Vue 实例的初始化选项。需要在选项中包含自定义属性时会有用处
$root
实例方法/事件vm.$*
$on
监听当前实例上的自定义事件。事件可以由vm.$emit触发。回调函数会接收所有传入事件触发函数的额外参数。
$onece
监听一个自定义事件,但是只触发一次。一旦触发之后,监听器就会被移除。
$off
移除自定义事件监听器如果没有提供参数,则移除所有的事件监听器;如果只提供了事件,则移除该事件所有的监听器;如果同时提供了事件与回调,则只移除这个回调的监听器。
$emit
触发当前实例上的事件。附加参数都会传给监听器回调。
实例方法/生命周期vm.$*
$mount
如果 Vue 实例在实例化时没有收到 el 选项,则它处于“未挂载”状态,没有关联的 DOM 元素。可以使用 vm.$mount() 手动地挂载一个未挂载的实例。如果没有提供 elementOrSelector 参数,模板将被渲染为文档之外的的元素,并且你必须使用原生 DOM API 把它插入文档中。这个方法返回实例自身,因而可以链式调用其它实例方法。
$forceUpdate
迫使 Vue 实例重新渲染。注意它仅仅影响实例本身和插入插槽内容的子组件,而不是所有子组件。
$nextTick
将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它,然后等待 DOM 更新。它跟全局方法 Vue.nextTick 一样,不同的是回调的 this 自动绑定到调用它的实例上。
$destory
完全销毁一个实例。清理它与其它实例的连接,解绑它的全部指令及事件监听器。
Vue2.0
全局配置Vue.config.*
silent
Vue.config.silent = true取消 Vue 所有的日志于警告
optionMergeStrategies
devtools
errorHandler
warnHandler
ignoredElements
须使 Vue 忽略在 Vue 之外的自定义元素
keyCodes
自定义键位别名
performance
productionTip
设置为 false 以阻止 vue 在启动时生成生产提示
选项/数据
data
1、Vue 实例对象。vue将会递归将data的属性转换为getter/setter,从而让data的属性能够响应数据变化。2、以 _ 或 $ 开头的属性不会被vue实例代理,因为他们可能和vue内置的属性、api方法冲突。可以使用例如vm.$data._property的方式访问这样属性。3、当一个组件被定义,data必须返回一个初始化数据对象的函数,因为组件可能被用来创建多个实例。如果data任然是一个纯粹的对象,则所有的实例共享引用同一个数据对象!通过创建data函数,每次创建一个新实例后,我们能够调用data函数,从而返回一个初始数据的一个全新副本数据对象。可以通过将vm.$data传入JSON.parse(JSON.stringif(...))得到深拷贝的原始数据对象
props
props可以是数组或对象,用来接收父组件的值。props可以是简单数组,或者使用对象作为替代,对象允许配置高级选项。如类型监测、自定义验证和设置默认值。type: String、Number、Boolean、Array、Object、Date、Function、Symbol任何自定义构造函数上述内容组成的数组。会检查一下prop是否是给定的类型,否则抛出警告。default: any 为该prop指定一个默认值。对象或者数组的默认值必须从一个工厂函数返回required:Boolean 定义该prop是否是必填项。validator: Function 自定义验证函数会将 prop 的值作为唯一的参数代入。
propsData
创建实例时传递props,主要作用是方便测试
computed
methods
methods 将被混入到 Vue 实例中。可以直接通过 VM 实例访问这些方法,或者在指令表达式中使用。方法中的 this 自动绑定为 Vue 实例。注意:不应该使用箭头函数来定义 method 函数 (例如 plus: () => this.a++)。理由是箭头函数绑定了父级作用域的上下文,所以 this 将不会按照期望指向 Vue 实例,this.a 将是 undefined。
watch
类型:{ [key: string]:string | Function | Object | Array }一个对象,键是需要观察的表达式,值是对应回调函数。值也可以是方法名,或者包含选项的对象。Vue实例将会在实例化时调用$watch(), 遍历watch对象的每一个属性。注意:不应该使用箭头函数来定义watcher函数,箭头函数绑定了父级作用域的上下文,所以this将不会按照期望值指向Vue实例
选项/生命周期钩子
beforeCreate
在实例初始化之后,数据观测(data observer)和 event/watcher 事件配置之前被调用
created
在实例创建完成后被立即调用。然后,挂载阶段还没开始,$el属性目前不可见数据观测(data observer)属性和方法的运算watch/event事件回调
beforeMount
在挂载开始之前被调用:相关的render函数首次被调用该钩子在服务器端渲染期间不被调用
mounted
el被创建的vm.$el替换,并挂载到实例上去之后调用该钩子。如果root实例挂载了一个文档内元素,当mounted被调用时vm.$el也在文档内mounted 不会承诺所有子组件都一起被挂载。如果你希望等到整个视图渲染完毕,可以用vm.$nextTick替换掉mounted
beforeUpdate
数据更新时调用,发生在虚拟dom打补丁之前。这里适合在更新之前访问现有的dom,比如移除已添加的时间监听器该钩子在服务器端渲染期间不能被调用,因为只有初次渲染会在服务端进行
updated
数据更改导致的虚拟dom重新渲染和打补丁,在这之后会被调用该钩子当这个钩子被调用时,组件 DOM 已经更新,所以你现在可以执行依赖于 DOM 的操作。然而在大多数情况下,你应该避免在此期间更改状态。如果要相应状态改变,通常最好使用计算属性或 watcher 取而代之updated 不会承诺所有的子组件也都一起被重绘。如果你希望等到整个视图都重绘完毕,可以用 vm.$nextTick 替换掉 updated
beforeDestory
实例销毁之前调用。在这一步,实例任然完全可用服务器端渲染期间不被调用
destoryed
实例销毁后调用。掉用后,vue实例指示的所有东西都会解除绑定,所有的时间监听器会被移除,所有的子实例也会被销毁服务器端渲染期间不被调用
activated
keep-alive组件激活时调用服务端渲染期间不被调用
deactivated
keep-alive组件停用时调用服务端渲染期间不被调用
errorCaptured
实例方法/数据vm.$*
$watch
观察 Vue 实例上的一个表达式或者一个函数计算结果的变化。回调函数得到的参数为新值和旧值。表达式只接受监督的键路径。对于更复杂的表达式,用一个函数取代。
$set
$delete
全局ApiVue.*
Vue.extend( options )使用基础Vue构造器,创建一个'子类'。参数是一个包含组件选项的对象
Vue.use(plugin)安装Vue.js 插件。如果插件是一个对象,必须提供install方法。如果插件是一个函数,它会被作为install方法。install方法调用时,会将vue作为参数传入
Vue.mixin( mixin )全局注册一个混入,影响注册之后的所有创建的每个Vue实例。插件坐着可以使用混入,向组件注入自定义行为。不推荐在应用中使用
Vue.compile( template )在render函数中编译模板字符串,只在独立构建时有效
Vue.observable( object ) 2.6 +让一个对象可响应。Vue内部会用它来处理data函数返回的对象。返回的对象可以直接用于渲染函数和计算属性内,并且会在发生改变时触发相应的更新。也可以作为最小的跨组件状态存储器,用于简单的场景
Vue.versionVue.version.split('.')[0]通过不同的版本采用不同的策略
选项/DOM
el
只在用new创建实例时生效,提供一个页面存在的dom元素作为vue实例的挂载目标可以是css选择器,也可以是一个HTMLElement实例。实例挂载之后,元素可以用vm.$el访问。如果实例化时存在这个选项,实例将立即进入编译过程,否则,需要显示调用vm.$mount()动手开启编译。注意:提供的元素只能作为挂载点。不同于vue1.x,所有的挂载元素会被vue生成的Dom替换。因此不推荐挂载root实例到或者上注意:render函数和template属性都不存在,挂载Dom元素的html会被提取出来用作模板,此时,必须使用Runtime + Compiler构建的vue库
template
字符串模板作为Vue实例标识使用。模板将会替换挂载的元素。挂在元素的内容都将被忽略,除非模板的内容有分发插槽。如果值以 # 开始,则它将被用作选择符,并使用匹配元素的innerHTML作为模板。常用的技巧是用<script type=\"x-template\">包含模板注意:如果 Vue 选项中包含渲染函数,该模板将被忽略。
render
类型:(createElement: () => vNode) => VNode字符串模板替代方案,该渲染函数接受一个createElement方法作为第一个参数用来创建VNode如果组件是一个函数组件,渲染函数还会接受一个额外的context参数,为没有实例的函数组件提供上下文信息注意:Vue 选项中的 render 函数若存在,则 Vue 构造函数不会从 template 选项或通过 el 选项指定的挂载元素中提取出的 HTML 模板编译渲染函数。
renderError
只在开发环境下工作当render函数遭遇错误时,提供另外一种渲染输出。其错误将会作为第二个参数传递到renderError。这个功能配合hot-reload非常实用
0 条评论
回复 删除
下一页