前言
这里开始介绍一些vue技巧，用起来提升效率也比较方便！
vue指令
指令在vue代码中很常见，形如v-model,v-bind,v-on等，官方还提供了简写方式。
目标在与弄清v-xx的含义，以及如何封装自定义指令
1: 为何在代码中可以使用v-focus的写法，是由于全局注册了如下指令
// 指令使用
baby
// 注册一个全局自定义指令 `v-focus`
Vue.directive('focus', {
// 当被绑定的元素插入到 DOM 中时……
inserted: function (el) {
// 聚焦元素
el.focus()
}
})
// 也可以局部注册，在组件中
// 局部注册时由于是可复用逻辑，一般放在mixin中
directives: {
focus: {
// 指令的定义
inserted: function (el) {
el.focus()
}
}
}2: 看到以上的写法自然需要关注所提供的钩子函数和可选参数
钩子函数，有点类似于组件的生命周期
一个指令定义对象可以提供如下几个钩子函数 (均为可选)：
- bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
- inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。
- update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。
- componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用。
- unbind：只调用一次，指令与元素解绑时调用。
可选参数
-
el：指令所绑定的元素，可以用来直接操作 DOM 。
- 虽然vue希望数据驱动，在一些场景下还是需要操作dom,但是需要保证dom的渲染更新，需要配合nextTick
-
binding：一个对象，包含以下属性：
- 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 编译生成的虚拟节点，也就是vue组件的产物，又叫做virtual dom
- oldVnode：上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。一般只在patch的过程中涉及二者的对比
3: 可以看到指令中主要还是涉及到dom元素的获取以及属性的赋值，不要滥用自定义指令！
4: 一个移动端无限加载指令的例子
- 下拉一定距离实现加载数据
// 使用
const loadMore = {
directives: {
'load-more': {
bind: (el, binding) => {
let windowHeight = window.screen.height; // 屏幕高度
let height;
let setTop;
let paddingBottom;
let marginBottom;
let requestFram;
let oldScrollTop;
let scrollEl;
let heightEl;
// 获取元素属性
let scrollType = el.attributes.type && el.attributes.type.value;
let scrollReduce = 2; // 这个是一个缓冲值，处理手指滑动与实际移动距离
// 根据type确定scroll对象
if (scrollType == 2) {
scrollEl = el;
heightEl = el.children[0];
} else {
scrollEl = document.body;
heightEl = el;
}
// 移动端事件处理三段式
el.addEventListener('touchstart', () => {
height = heightEl.clientHeight;
if (scrollType == 2) {
height = height
}
// 返回当前元素相对于其 offsetParent 元素的顶部的距离
setTop = el.offsetTop;
paddingBottom = getStyle(el, 'paddingBottom');
marginBottom = getStyle(el, 'marginBottom');
}, false)
el.addEventListener('touchmove', () => {
loadMore();
}, false)
el.addEventListener('touchend', () => {
oldScrollTop = scrollEl.scrollTop;
moveEnd();
}, false)
const moveEnd = () => {
requestFram = requestAnimationFrame(() => {
if (scrollEl.scrollTop != oldScrollTop) {
oldScrollTop = scrollEl.scrollTop;
moveEnd()
} else {
cancelAnimationFrame(requestFram);
height = heightEl.clientHeight;
loadMore();
}
})
}
const loadMore = () => {
// 滚动值逻辑触发loadmore
if (scrollEl.scrollTop + windowHeight >= height + setTop + paddingBottom + marginBottom - scrollReduce) {
// 实际绑定在指令的函数调用
binding.value();
}
}
}
}
}
};5: 比较好奇的是v-model背后做了什么？
基于以上的理解我们可以来自己一步步实现v-model
- v-model做了什么，在这种写法下
在代码中修改text值，输入框显示改变 model->view,直接在输入框中修改显示的值，监听onchange事件打印text值修改 model->view。从数据流的角度考虑vue是单向流动，v-model的实现只是一种语法糖。我们实际还是遵守的model->view。
//data到模版的部分vue已经做了
directives: {
'model': {
bind: (el, binding) => {
// 监听onchange即可
el.addEventListener('onChange', () => {
this.text = binding.value
// text的修改触发视图变化，实际还是数据驱动
}, false)
}
}
}插件
插件plugin的使用比指令的范围更广，而且插件的目的是全局使用，它的install方法决定在vue实例上挂载相应属性
插件通常会为 Vue 添加全局功能。插件的范围没有限制——一般有下面几种：
- 1.添加全局方法或者属性，如: vue-custom-element
- 2.添加全局资源：指令/过滤器/过渡等，如 vue-touch
- 3.通过全局 mixin 方法添加一些组件选项，如: vue-router
- 4.添加 Vue 实例方法，通过把它们添加到 Vue.prototype 上实现。
- 5.一个库，提供自己的 API，同时提供上面提到的一个或多个功能，如 vue-router
我们知道在注册插件的时候一般是 vue.use(xxxplugin)
- 安装 Vue.js 插件。如果插件是一个对象，必须提供 install 方法。如果插件是一个函数，它会被作为 install 方法。install 方法调用时，会将 Vue 作为参数传入。
- install其实就是手动提供vue实例全局挂载的方式，可以是指令，全局方法，属性等，这个需要看提供的xxxplugin是哪一种形式,别问，问就全局生效！
export function initUse (Vue: GlobalAPI) {
// use的参数是函数或者对象
Vue.use = function (plugin: Function | Object) {
// 检查是否已经注册过
const installedPlugins = (this._installedPlugins || (this._installedPlugins = []))
if (installedPlugins.indexOf(plugin) > -1) {
return this
}
// additional parameters
// 提供的参数除了插件以外的数组
const args = toArray(arguments, 1)
// 头部是vue实例
args.unshift(this)
if (typeof plugin.install === 'function') {
// 执行obj本身的install
plugin.install.apply(plugin, args)
} else if (typeof plugin === 'function') {
// 没有就直接把plugin当Install执行
plugin.apply(null, args)
}
installedPlugins.push(plugin)
return this
}
}参考阅读
https://segmentfault.com/a/1190000016256277（use源码）