Vue 构造选项 - 进阶
Directive指令:减少DOM操作的重复
自定义指令
两种声明方式
方法一:声明一个全局指令
Vue.directive('x', directiveOptions)
方法二:声明一个局部指令
在options里写,只能被那个Vue实例/组件使用
new Vue({
...,
directives:{
"x":directiveOptions
}
})
关于directiveOptions
directiveOptions
是个对象,里面有五个函数属性
bind(el, info, vnode, oldVnode)★
- 类似
created
,只调用一次,指令第一次绑定到元素时调用。 - 参数都是vue给我们的
①el
:绑定指令的那个元素
②info
:是个对象,我们想要的信息基本都在里面
③vnode
:虚拟节点
④oldVnode
:之前的虚拟节点
inserted(参数同上)★
- 类似
mounted
,被绑定元素插入父节点时调用 (仅保证父节点存在,但不一定已被插入文档中)。
update(参数同上)
- 类似
updated
componentUpdated(参数同上)
- 用得不多,见文档
unbind(参数同上)★
- 类似
destroyed
,当元素要消亡时调用。
Mixins混入:复制
- 减少重复
- directives的作用是减少DOM操作的重复
- mixins的作用是减少data、methods、钩子的重复
- options里的构造选项都可以先放到一个js文件,之后哪个实例/组件需要就导入并且用mixins使用就行。
写在了共同东西里的东西被组件引用了之后,组件还可以覆盖他们,Vue会智能合并
全局的mixins:不推荐
Extends 继承、扩展
- extends是比mixins更抽象一点的封装
- 如果你嫌写五次mixins麻烦,可以考虑extends一次
- 不过实际工作中用得很少
- 你可以使用Vue.extend或options.extends
provide & inject:提供&注入
- 祖先提供东西,后代注入东西
- 作用是大范围、隔N代共享信息(data、methods等)
总结
directive指令
mixins混入
extends继承/扩展
provide | inject提供和注入
- 祖先提供东西,后代注入东西
- 作用是大范围、隔N代共享信息