自定义指令，生产环境部署

钩子函数

一个指令定义对象可以提供如下几个钩子函数

• bind ： 只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置
• inserted : 被绑定元素插入父节点时调用（仅保证父节点存在，但不一定已被插入文档中）
• update : 所在组建的VNode更新调用，但是可能发生在其子VNode更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新
• componentUpdated : 指令所在组件的VNode及其子VNode全部更新后通用
• unbind : 只调用一次，指令与元素解绑时调用

钩子函数参数

钩子函数的参数（即el,binding,vnode和oldVnode）

指令钩子函数会被传入以下参数

• el : 指令所绑定的元素，可以用来直接操作DOM

• 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中，修饰符对象为

• vnode :Vue编译生成的虚拟节点。

• oldVnode ： 上一个虚拟节点，仅在update和componentUpdated钩子中可用

注意

• 除了 el 之外，其它参数都应该是只读的，切勿进行修改。如果需要在钩子之间共享数据，建议通过元素的 dataset 来进行。

举个例子

Vue.directive('demo', {
bind: function (el, binding, vnode) {
var s = JSON.stringify
el.innerHTML =
'name: ' + s(binding.name) + '
' +
'value: ' + s(binding.value) + '
' +
'expression: ' + s(binding.expression) + '
' +
'argument: ' + s(binding.arg) + '
' +
'modifiers: ' + s(binding.modifiers) + '
' +
'vnode keys: ' + Object.keys(vnode).join(', ')
}
})

new Vue({
el: '#hook-arguments-example',
data: {
message: 'hello!'
}
})

生产环境部署

使用构建工具

webpack

var webpack = require('webpack')

module.exports = {
// ...
plugins: [
// ...
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: '"production"'
}
}),
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
}
})
]
}

Browserify

/ 使用 envify 的自定义模块来定制环境变量
var envify = require('envify/custom')

browserify(browserifyOptions)
.transform(vueify)
.transform(
// 必填项，以处理 node_modules 里的文件
{ global: true },
envify({ NODE_ENV: 'production' })
)
.bundle()

Rollup

const replace = require('rollup-plugin-replace')
rollup({
// ...
plugins: [
replace({
'process.env.NODE_ENV': JSON.stringify( 'production' )
})
]
}).then(...)