组件生命周期
生命周期
单个组件的生命周期分为三个大阶段:1 初始化阶段 create;2 挂载阶段 mount ;3 更新阶段 update ;4 销毁阶段 destory
在 create 阶段 初始化了一个实例 ,但是并没有渲染成 DOM 结构,而 mounted 是 完成渲染。
父子组件的生命周期
初始化阶段,由父组件开始 created ,然后子组件初始化 created,渲染的时候 由子组件先渲染完成 mounted, 再由 父子间 完成渲染 mounted;
更新阶段,先由父组件 beforeUpdate, 然后子组件 beforeUpdate,子组件 updated 之后, 父组件也就 updated 了;
销毁阶段,父组件先 beforeDestroy, 子组件再 beforeDestroy, 然后子组件 destroyed,最后父组件 destroyed。
$nextTick
Vue 是异步渲染,更新 DOM 时是异步执行的;data 改变之后,DOM 不会立刻渲染; $nextTick 会在 DOM 渲染之后被触发,以获取最新 DOM 节点。
用法 :this.$nextTick(function) 函数会在在 DOM 渲染之后 再回调。
$nextTick混入 mixin
mixin的作用是将 多个组件有相同的逻辑,抽离出来;
mixinminx 并不是完美的解决方案,会有一些问题
1. 变量来源不明确,不利于阅读(比如上面组件中的 age , 只看这个组件,完全不知道 age 这个变量的来源);
2. 多 mixin 会造成命名冲突(生命周期可以融合,但是方法 和 data 里的 同名 变量会造成冲突);
3. mixin 和组件可能出现多对多的关系,复杂度较高(一个组件可以引用多个 mixin,多个组件可以引用一个mixin)。
Vue3 提出的 Composition API 旨在解决这些问题。
自定义指令
在 Vue2.0 中,代码复用和抽象的主要形式是 组件。然而,有的情况下,我们仍然需要对普通 DOM 元素进行底层操作,这时候就会用到自定义指令。
比如官网的例子
自定义指令钩子函数
一个指令定义对象可以提供如下几个钩子函数 (均为可选):
bind:只调用一次,指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
inserted:被绑定元素插入父节点时调用 (仅保证父节点存在,但不一定已被插入文档中)。
update:所在组件的 VNode 更新时调用,但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变,也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。
componentUpdated:指令所在组件的 VNode 及其子 VNode 全部更新后调用。
unbind:只调用一次,指令与元素解绑时调用。
接下来我们来看一下钩子函数的参数 (即 el、binding、vnode 和 oldVnode)。
指令钩子函数会被传入以下参数 (除了 el 之外,其它参数都应该是只读的,切勿进行修改):
el:指令所绑定的元素,可以用来直接操作 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"。
指令的参数可以是动态的。例如,在 v-mydirective:[argument]="value" 中,argument 参数可以根据组件实例数据进行更新!
modifiers:一个包含修饰符的对象。例如:v-my-directive.foo.bar 中,修饰符对象为 { foo: true, bar: true }。
注意:如果指令需要多个值,可以传入一个 JavaScript 对象字面量
bindingvnode:Vue 编译生成的虚拟节点。
oldVnode:上一个虚拟节点,仅在 update 和 componentUpdated 钩子中可用。
示例函数简写
函数简写过滤器
Vue.js 允许你自定义过滤器,可被用于一些常见的 文本格式化。
过滤器可以用在两个地方:双花括号插值 和 v-bind 表达式。
运用 过滤器插件
开发 Vue 插件
Vue.js 的插件应该暴露一个 install 方法。这个方法的第一个参数是 Vue 构造器,第二个参数是一个可选的选项对象:
开发 Vue 插件使用 Vue 插件
通过全局方法 Vue.use() 使用插件。它需要在你调用 new Vue() 启动应用之前完成
使用插件
网友评论