1、生命周期说明
| Vue2.0 | Vue3.0 | 执行时机 | 说明 |
|---|---|---|---|
| beforeCreate | beforeCreate | 组件创建之前 | 在组件实例初始化完成之后立即调用。 |
| created | created | 组件创建完成 | 在组件实例处理完所有与状态相关的选项后调用。 |
| beforeMount | beforeMount | 组件挂载之前 | 在组件被挂载之前调用。 |
| mounted | mounted | 组件挂载完成 | 在组件被挂载之后调用。 |
| beforeUpdate | beforeUpdate | 数据更新之前 | 在组件即将因为一个响应式状态变更而更新其 DOM 树之前调用 |
| updated | updated | 数据更新完成 | 在组件因为一个响应式状态变更而更新其 DOM 树之后调用。 |
| beforeDestroy | beforeUnmount | 组件销毁之前 | 在一个组件实例被卸载之前调用。 |
| destroy | unmounted | 组件销毁之后 | 在一个组件实例被卸载之后调用。 |
2、状态选项
| 名称 | 说明 |
|---|---|
| data | 用于声明组件初始响应式状态的函数。 |
| props | 用于声明一个组的props。 |
| computed | 用于声明要在组件实例上暴露的计算属性。 |
| methods | 用于声明要混入到组件实例中的方法。 |
| watch | 用于声明在数据更改时调用的侦听回调。 |
| emits | 用于声明由组件触发的自定义事件。 |
| expose | 用于声明当组件实例被父组件通过模板引用访问时暴露的公共属性。 |
3、内置指令
| 指令 | 绑定值类型 | 说明 |
|---|---|---|
| v-text | string | 更新元素的文本内容。 |
| v-html | string | 更新元素的 innerHTML。 |
| v-if | any | 基于表达式值的真假性，来条件性地渲染元素或者模板片段。 |
| v-else | 无需传入表达式 | 表示 v-if 或 v-if / v-else-if 链式调用的“else 块”。 |
| v-else-if | any | 表示 v-if 的“else if 块”。可以进行链式调用。 |
| v-for | Array、Object、number、string、Iterable | 基于原始数据多次渲染元素或模板块。 |
| v-on | Function、Inline Statement 、Object (不带参数) | 给元素绑定事件监听器。 |
| v-bind | any (带参数) 、Object (不带参数) | 动态的绑定一个或多个 attribute，也可以是组件的 prop。 |
| v-model | 根据表单输入元素或组件输出的值而变化 | 在表单输入元素或组件上创建双向绑定。 |
| v-slot | JavaScript 表达式。支持解构语法。 | 用于声明具名插槽或是期望接收 props 的作用域插槽。 |
| v-pre | - | 跳过该元素及其所有子元素的编译。 |
| v-once | - | 仅渲染元素和组件一次，并跳过之后的更新。 |
| v-memo | any[] | 3.2新增 |
| v-cloak | - | 用于隐藏尚未完成编译的 DOM 模板。 |
4、组件实例
| 参数 | 说明 |
|---|---|
| $data | 从 data 选项函数中返回的对象，会被组件赋为响应式。组件实例将会代理对其数据对象的属性访问。 |
| $props | 表示组件当前已解析的 props 对象。 |
| $el | 该组件实例管理的 DOM 根节点。 |
| $options | 已解析的用于实例化当前组件的组件选项。 |
| $parent | 当前组件可能存在的父组件实例，如果当前组件是顶层组件，则为 null。 |
| $root | 当前组件树的根组件实例。如果当前实例没有父组件，那么这个值就是它自己。 |
| $slots | 一个表示父组件所传入插槽的对象。 |
| $refs | 一个包含 DOM 元素和组件实例的对象，通过模板引用注册。 |
| $attrs | 一个包含了组件所有透传 attributes 的对象。 |
| $watch() | 用于命令式地创建侦听器的 API。 |
| $emit() | 在当前组件触发一个自定义事件。任何额外的参数都会传递给事件监听器的回调函数。 |
| $forceUpdate() | 强制该组件重新渲染。 |
| $nextTick() | 绑定在实例上的 nextTick() 函数。 |
扫一扫
748
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
