目录
一、全局配置(节选)
1、取消 Vue 所有的日志与警告——silent——设置为 false。
2、配置是否允许 vue-devtools 检查代码——devtools。
3、阻止 vue 在启动时生成生产提示——Vue.config.productionTip——设置为 false。
二、全局API(节选)
1、组件构造器——Vue.extend( options )——使用基础 Vue 构造器,创建一个“子类”,参数是一个包含组件选项的对象,data必须是函数。
2、异步更新队列——Vue.nextTick( [callback, context] )——在下次 DOM 更新循环结束之后执行延迟回调,即在修改数据之后立即使用这个方法,获取更新后的 DOM。(Vue 不自带 Promise 的 polyfill,你得自行 polyfill。)
3、向响应式对象中添加一个属性——Vue.set( target, propertyName/index, value )——向响应式对象中添加一个属性,并确保这个新属性同样是响应式的,且触发视图更新。它必须用于向响应式对象上添加新属性,因为 Vue 无法探测普通的新增属性 (比如 this.myObject.newProperty = 'hi'
)。
4、删除对象的属性——Vue.delete( target, propertyName/index )——删除对象的属性。如果对象是响应式的,确保删除能触发更新视图。这个方法主要用于避开 Vue 不能检测到属性被删除的限制,但是你应该很少会使用它。
5、自定义指令——Vue.directive( id, [definition] )——注册或获取全局自定义指令。
6、过滤器——Vue.filter( id, [definition] )——注册或获取全局过滤器。
7、组件——Vue.component( id, [definition] )——注册或获取全局组件。
8、全局注册使用插件——Vue.use( plugin )——该方法需要在调用 new Vue()
之前被调用。
9、响应式原理——Vue.observable( object )——让一个对象可响应。返回的对象可以直接用于渲染函数和计算属性内,并且会在发生改变时触发相应的更新。也可以作为最小化的跨组件状态存储器。
10、 控制 Vue 的版本号——Vue.version——这对社区的插件和组件来说非常有用,你可以根据不同的版本号采取不同的策略。
三、选项API(节选)
1、数据
(1)、data——Vue 实例的数据对象,它必须是 function。
实例创建之后,可以通过 vm.$data
访问原始数据对象。
(2)、props——props 可以是数组或对象,用于接收来自父组件的数据。
(3)、propsData——创建实例时传递 props。主要作用是方便测试。
(4)、computed——计算属性(不要使用箭头函数)。
(5)、methods——事件处理器。可以直接通过 VM 实例访问这些方法,方法中的 this
自动绑定为 Vue 实例。
(6)、watch——监听器。一个对象,键是需要观察的表达式,值是对应回调函数(不要使用箭头函数)。值也可以是方法名,或者包含选项的对象。Vue 实例将会在实例化时调用 $watch()。
2、DOM
(1)、el——提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标。在实例挂载之后,元素可以用 vm.$el
访问。
(2)、template——一个字符串模板作为 Vue 实例的标识使用。模板将会 替换 挂载的元素。挂载元素的内容都将被忽略,除非模板的内容有分发插槽。
(3)、render——字符串模板的代替方案,允许你发挥 JavaScript 最大的编程能力。
(4)、renderError——只在开发者环境下有效。当 render
函数遭遇错误时,提供另外一种渲染输出。其错误将会作为第二个参数传递到 renderError
。这个功能配合 hot-reload 非常实用。
3、生命周期钩子
(1)、beforeCreate——在实例初始化之后。
(2)、created——在实例创建完成后被立即调用。(实例已完成以下的配置:数据观测 (data observer),属性和方法的运算,watch/event 事件回调。然而,挂载阶段还没开始,$el
属性目前尚不可用。)
(3)、beforeMount——在挂载开始之前被调用。(相关的 render
函数首次被调用。)
(4)、mounted——实例被挂载后调用。(这时 el
被新创建的 vm.$el
替换了。注意 mounted
不会保证所有的子组件也都一起被挂载。如果你希望等到整个视图都渲染完毕,可以在 mounted
内部使用 vm.$nextTick。)
(5)、beforeUpdate——数据更新时调用。(发生在虚拟 DOM 打补丁之前。这里适合在更新之前访问现有的 DOM。)
(6)、updated——组件 DOM 已经更新完成。(现在你可以执行依赖于 DOM 的操作了,但是你最好避免在此更改状态。如果要相应状态改变,通常最好使用计算属性或 watcher 取而代之。注意 updated
不会保证所有的子组件也都一起被重绘。如果你希望等到整个视图都重绘完毕,可以在 updated
里使用 vm.$nextTick。)
(7)、activated——被 keep-alive 缓存的组件激活时调用。(该钩子在服务器端渲染期间不被调用。)
(8)、deactivated——被 keep-alive 缓存的组件停用时调用。(该钩子在服务器端渲染期间不被调用。)
(9)、beforeDestroy——实例销毁之前调用。(在这一步,实例仍然完全可用。该钩子在服务器端渲染期间不被调用。)
(10)、destroyed——实例销毁后调用。(该钩子被调用后,对应 Vue 实例的所有指令都被解绑,所有的事件监听器被移除,所有的子实例也都被销毁。该钩子在服务器端渲染期间不被调用。)
(11)、errorCaptured——当捕获一个来自子孙组件的错误时被调用。(此钩子会收到三个参数:错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串。此钩子可以返回 false
以阻止该错误继续向上传播。注意,你可以在此钩子中修改组件的状态。因此在捕获错误时,在模板或渲染函数中有一个条件判断来绕过其它内容就很重要;不然该组件可能会进入一个无限的渲染循环。)
4、资源
(1)、自定义指令资源——directives——包含 Vue 实例可用指令的哈希表。
(2)、过滤器资源——filters——包含 Vue 实例可用过滤器的哈希表。
(3)、组件资源——components——包含 Vue 实例可用组件的哈希表。
5、组合
(1)、parent——指定已创建的实例之父实例,在两者之间建立父子关系。子实例可以用 this.$parent
访问父实例,子实例被推入父实例的 $children
数组中。
(2)、mixins——mixins
选项接收一个混入对象的数组。这些混入对象可以像正常的实例对象一样包含实例选项,这些选项将会被合并到最终的选项中。如果你的混入包含一个 created 钩子,而创建组件本身也有一个,那么两个函数都会被调用,并在调用组件自身的钩子之前调用 mixins
里的钩子。
(3)、extends——允许声明扩展另一个组件,而无需使用 Vue.extend,
这主要是为了便于扩展单文件组件。和 mixins
类似。
(4)、provide / inject——provide
和 inject
主要在开发高阶插件/组件库时使用。并不推荐用于普通应用程序代码中。这对选项需要一起使用,以允许一个祖先组件向其所有子孙后代注入一个依赖,不论组件层次有多深,并在起上下游关系成立的时间里始终生效。
6、其他
(1)、name——组件的名字。
(2)、model——允许一个自定义组件在使用 v-model
时定制 prop 和 event。
四、实例API(节选)
1、属性
(1)、vm.$data——Vue 实例观察的数据对象。Vue 实例代理了对其 data 对象属性的访问。
(2)、vm.$props——当前组件接收到的 props 对象。Vue 实例代理了对其 props 对象属性的访问。
(3)、vm.$el——Vue 实例使用的根 DOM 元素。
(4)、vm.$options——用于当前 Vue 实例的初始化选项。需要在选项中包含自定义属性时会有用处。
(5)、vm.$parent——父实例,如果当前实例有的话。
(6)、vm.$root——当前组件树的根 Vue 实例。如果当前实例没有父实例,此实例将会是其自己。
(7)、vm.$children——当前实例的直接子组件。需要注意 $children
并不保证顺序,也不是响应式的。
(8)、vm.$slots——用来访问被插槽分发的内容。在使用渲染函数书写一个组件时,访问 vm.$slots
最有帮助。
(9)、vm.$scopedSlots——用来访问作用域插槽。vm.$scopedSlots
在使用渲染函数开发一个组件时特别有用。
(10)、vm.$refs——一个对象,持有注册过 ref
特性 的所有 DOM 元素和组件实例。
(11)、vm.$isServer——当前 Vue 实例是否运行于服务器。
(12)、vm.$attrs——当一个组件没有声明任何 prop 时,这里会包含所有父作用域的绑定 (class
和 style
除外),并且可以通过 v-bind="$attrs"
传入内部组件——在创建高级别的组件时非常有用。
(13)、vm.$listeners——包含了父作用域中的 (不含 .native
修饰器的) v-on
事件监听器。它可以通过 v-on="$listeners"
传入内部组件——在创建更高层次的组件时非常有用。
2、数据
(1)、vm.$watch( expOrFn, callback, [options] )——观察 Vue 实例上的一个表达式或者一个函数计算结果的变化。(很复杂,请深入了解。)
(2)、vm.$set( target, propertyName/index, value )——这是全局 Vue.set
的别名。(参考 Vue.set
。)
(3)、vm.$delete( target, propertyName/index )——这是全局 Vue.delete
的别名。(参考 Vue.delete
。)
3、方法(事件)
(1)、vm.$on( event, callback )——监听当前实例上的自定义事件。事件可以由vm.$emit
触发。
(2)、vm.$once( event, callback )——监听一个自定义事件,但是只触发一次。一旦触发之后,监听器就会被移除。
(3)、vm.$off( [event, callback] )——移除自定义事件监听器。
(4)、vm.$emit( eventName, […args] )——触发当前实例上的事件。附加参数都会传给监听器回调。
4、生命周期
(1)、vm.$mount( [elementOrSelector] )——如果 Vue 实例在实例化时没有收到 el 选项,则它处于“未挂载”状态,没有关联的 DOM 元素。可以使用 vm.$mount()
手动地挂载一个未挂载的实例。
(2)、vm.$forceUpdate()——迫使 Vue 实例重新渲染。注意它仅仅影响实例本身和插入插槽内容的子组件,而不是所有子组件。
(3)、vm.$nextTick( [callback] )——将回调延迟到下次 DOM 更新循环之后执行。它跟全局方法 Vue.nextTick
一样,不同的是回调的 this
自动绑定到调用它的实例上。(Vue 不自带 Promise 的 polyfill,你得自行 polyfill。)
(4)、vm.$destroy()——完全销毁一个实例。清理它与其它实例的连接,解绑它的全部指令及事件监听器。触发 beforeDestroy
和 destroyed
的钩子。(慎用。)
五、指令API(节选)
1、v-bind——动态地绑定一个或多个特性,或一个组件 prop 到表达式。
2、v-model——在表单控件或者组件上创建双向绑定。(没想的那么简单,必须细看。)
3、v-on——绑定事件监听器。(没想的那么简单,必须细看。)
4、v-show——根据表达式之真假值,切换元素的 display
CSS 属性。
5、v-if——根据表达式的值的 truthiness 来有条件地渲染元素。(当 v-if 和
v-for
一起使用时,v-for
的优先级比 v-if
更高。)
6、v-else-if——表示 v-if
的 “else if 块”。可以链式调用。
7、v-else——为 v-if
或者 v-else-if
添加“else 块”。
8、v-for——基于源数据多次渲染元素或模板块。另外也可以为数组索引指定别名 (或者用于对象的键)。
9、v-slot——提供具名插槽或需要接收 prop 的插槽。
10、v-once——只渲染元素和组件一次。随后的重新渲染,元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。
六、特殊特性API(节选)
1、key——key
的特殊属性主要用在 Vue 的虚拟 DOM 算法,使用 key 时,它会基于 key 的变化重新排列元素顺序,并且会移除 key 不存在的元素。有相同父元素的子元素必须有独特的 key。重复的 key 会造成渲染错误。它也可以用于强制替换元素/组件而不是重复使用它。
2、ref——ref
被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs
对象上。
3、is——用于动态组件且基于 DOM 内模板的限制来工作。
七、内置组件API(节选)
1、component——渲染一个“元组件”为动态组件。依 is
的值,来决定哪个组件被渲染。
2、transition——<transition>
元素作为单个元素/组件的过渡效果。<transition>
只会把过渡效果应用到其包裹的内容上,而不会额外渲染 DOM 元素,也不会出现在可被检查的组件层级中。(复杂。)
3、transition-group——<transition-group>
元素作为多个元素/组件的过渡效果。
4、keep-alive——<keep-alive>
包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。和 <transition>
相似,<keep-alive>
是一个抽象组件:它自身不会渲染一个 DOM 元素,也不会出现在组件的父组件链中。当组件在 <keep-alive>
内被切换,它的 activated
和 deactivated
这两个生命周期钩子函数将会被对应执行。(复杂。)
5、slot——插槽。(复杂。)
以上只是大概,具体请戳:https://cn.vuejs.org/v2/api/#silent