vue 中的几个高级概念
混入 mixins
官方解释
混入 (mixin) 提供了一种非常灵活的方式,来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时,所有混入对象的选项将被“混合”进入该组件本身的选项。
简单的来说就是 Mixins 是我们可以重用
的代码块,在实际开发中,如果有些代码重复性比较高,这时候可以考虑 Mixins 这个特性。
简单的 mixin 示例
组件中使用
控制台结果
通过以上结果可以发现
生命周期钩子函数会
合并
起来,都会执行
。先执行 mixins 的钩子函数 再 执行组件的钩子函数。data 的同名数据,要分情况讨论
如果是基本类型,会用组件的同名数据覆盖 mixin 的数据。
但是如果是对象,数据对象在内部会进行
递归
合并,并在发生冲突时以组件数据优先。类似Object.assign(mixinObj, componentObj)
;数组的话则直接以
组件
中的数据优先
methods 的方法也是一样,会用组件的方法覆盖 mixin 的同名方法。
除了上面这些,还有例如
methods
、components
和directives
,将被合并为同一个对象。两个对象键名冲突时,取组件对象的键值对,同名的会覆盖,以组件的为优先。
全局混入
混入也可以进行全局注册。使用时格外小心!一旦使用全局混入,它将影响每一个之后创建的 Vue 实例。使用恰当时,这可以用来为自定义选项注入处理逻辑。
混入造成的问题
用得太多的话,容易混乱。后期维护的时候,不容易查找变量或者方法。
自定义指令 directive
简介
除了核心功能默认内置的指令 (v-model
和 v-show
),Vue 也允许注册自定义指令。注意,在 Vue2.0 中,代码复用和抽象的主要形式是组件。然而,有的情况下,你仍然需要对普通 DOM 元素进行底层操作,这时候就会用到自定义指令。
比如项目中常用的水印功能。我们对一个 div 范围内添加水印样式。可以用到自定义指令。
首先看看效果图
生成水印有许多方法。我们现在通过自定义指令的方式来操作,以便熟悉自定义指令的使用。
先上代码
方法文件
注册自定义指令
main.js 全局调用
组件中使用
指令需要用 v- + 指令名
方式引用
参考 vue 实战视频讲解:进入学习
指令的钩子函数
一个指令定义对象可以提供如下几个钩子函数 (均为可选):
bind
:只调用一次,指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。inserted
:被绑定元素插入父节点时调用 (仅保证父节点存在,但不一定已被插入文档中)。update
:所在组件的 VNode 更新时调用,但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变,也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。componentUpdated
:指令所在组件的 VNode 及其子 VNode 全部更新后调用。unbind
:只调用一次,指令与元素解绑时调用。
指令钩子函数会被传入以下参数:
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"
。modifiers
:一个包含修饰符的对象。例如:v-my-directive.foo.bar
中,修饰符对象为{ foo: true, bar: true }
。vnode
:Vue 编译生成的虚拟节点。移步 VNode API 来了解更多详情。oldVnode
:上一个虚拟节点,仅在update
和componentUpdated
钩子中可用。
组件中局部自定义指令
过滤器 filter
Vue 过滤器本质上是一个函数,它接受一个值,处理它,然后返回处理过的值。
过滤器可以用在两个地方:双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部,由“管道 ( | ) ”符号指示
组件中使用
组件中定义过滤器
全局定义过滤器
过滤器可以 串联 使用
上述 btn
作为参数传入到 btnFilter
中,然后继续调用 newBtnFilter
,此时将以 btnFilter
的结果作为参数使用
过滤器是 JavaScript 函数,因此可以 接收参数
这里的 btnFilter 相当于是接收三个参数的函数,其中 btn 为第一个参数, 'arg1' 为第二个参数, 'arg2' 为第三个参数。
过渡
Vue 在插入、更新或者移除 DOM 时,提供多种不同方式的应用过渡效果。包括以下工具:
在 CSS 过渡和动画中自动应用 class
可以配合使用第三方 CSS 动画库,如 Animate.css
在过渡钩子函数中使用 JavaScript 直接操作 DOM
可以配合使用第三方 JavaScript 动画库,如 Velocity.js
Vue 提供了 transition
的封装组件,在下列情形中,可以给任何元素和组件添加进入/离开过渡
条件渲染 (使用
v-if
)条件展示 (使用
v-show
)动态组件
组件根节点
示例
当插入或删除包含在 transition
组件中的元素时,Vue 将会做以下处理:
自动嗅探目标元素是否应用了 CSS 过渡或动画,如果是,在恰当的时机添加/删除 CSS 类名。
如果过渡组件提供了 JavaScript 钩子函数,这些钩子函数将在恰当的时机被调用。
如果没有找到 JavaScript 钩子并且也没有检测到 CSS 过渡/动画,DOM 操作 (插入/删除) 在下一帧中立即执行。(注意:此指浏览器逐帧动画机制,和 Vue 的
nextTick
概念不同)
过渡的类名
在进入/离开的过渡中,会有 6 个 class 切换。
v-enter
:定义进入过渡的开始状态。在元素被插入之前生效,在元素被插入之后的下一帧移除。v-enter-active
:定义进入过渡生效时的状态。在整个进入过渡的阶段中应用,在元素被插入之前生效,在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间,延迟和曲线函数。v-enter-to
:2.1.8 版及以上定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时v-enter
被移除),在过渡/动画完成之后移除。v-leave
:定义离开过渡的开始状态。在离开过渡被触发时立刻生效,下一帧被移除。v-leave-active
:定义离开过渡生效时的状态。在整个离开过渡的阶段中应用,在离开过渡被触发时立刻生效,在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间,延迟和曲线函数。v-leave-to
:2.1.8 版及以上定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时v-leave
被删除),在过渡/动画完成之后移除。
<transition>
中的 name 对应上述类名的 v , 如: name="a"
则对应类名为 a-enter
等。如果你使用一个没有名字的 <transition>
则 v-
是这些类名的默认前缀。
如此,我们就可以通过编写不同的 css 动画样式,配合<transition>
来达到不同的效果。
JavaScript 钩子
此时可以在不同的钩子中,使用 Velocity
等动画库来实现我们需要的动画效果。
评论