vue自定义指令在Render函数中的使用

最近在做SSR服务端渲染，vue官方提示做自定义指令需要在render函数里面使用，那么如何在render里使用呢？


自定义指令基本用法

//全局注册
Vue.directive('指令名', {
//指令属性
})

//局部注册
var app = new Vue({
el: '#app',
directives:{
  '指令名':{
   //指令属性
  }
}
});

自定义指令的属性有5个钩子函数组成，每个函数都是可选的。

bind 指令第一次绑定到元素时调用，定义初始化动作
inserted 被绑定元素插入到父节点时调用
update 被绑定元素更新时调用，不论绑定值是否改变
componentUpdated 被绑定元素所在模板完成一个更新周期时调用
unbind 只调用一次，指令与元素解除绑定时调用
<input type="text" v-test>

Vue.directive('test', {
bind:function(el){
  el.focus();
}
})

每个钩子函数都有多个可选参数

el 绑定的dom元素
binding 对象，拥有以下属性
name 指令名称，不包含v-前缀
value 指令的绑定值。如果自定义标签的写法是 v-test = “1+1”，那么value就为2
oldValue 指令绑定的前一个值，只在update或者* componentUpdated钩子函数中可以使用
expression 绑定值的字符串形式，v-test = “1+1"这个表达式的字符串就是"1+1”
arg 传给指令的参数 v-test=myData，arg的值就是myData
modifiers 包含修饰符的对象。v-test=myData.value那么modifiers的值就是{myData:true,value:true}
vnode Vue编译生成的虚拟节点
oldVnode 上一个虚拟节点只在update或componentUpdated钩子函数中可以使用

Render函数

Vue2与Vue1最大的区别是Vue2使用虚拟节点更新DOM，提示渲染性能。
Vue中的虚拟节点是一个js对象

var vNode = {
tag:'div',//当前节点标签类型
attributes:{
  id:'main'
},
children:{
  //子节点
}
}

Render函数通过createElement参数创建virtualDom，从而简化组件的写法。适用于组件中有大量代码是重复的场景，使用Render函数在其中通过书写js方法生成virtualDom。

render:function(createElement){
return createElement(
'h' +this.level,//搭配level生成h标签
[
  createElement( //创建子节点
   'a',//生成a标签
   {
    domProps:{
     href:'#' + this.title//定义属性，href超链接到title对应的网址
    }
   },
   this.$slots.default
  )
])
}

createElement的用法

参数

createElement有三个参数，第一个参数为html标签或者组件或者函数，这个参数是必选参数。第二个参数可选，对应属性中的数据对象。第三个参数也是可选参数，对应子节点，子节点也是用createElement方法构建。

createElement(
'div', //String | Object | Function
{},  //Object
[  //String|Array
  createElement('h1')
]
)

第二个参数的可以定义属性类型：

class:{ //类名 参考v-bind:class
className:true
},
style:{ //样式，参考v-bind:style
color:'red'
},
attr:{ //html属性
id:'test'
},
props:{ //组件的props
myData: 'message'
},
domProps:{//Dom属性
innerHtml:'baz'
},
on:{//自定义事件监听器，但是不支持修饰器，需要手动配置
click: this.clickHandler
},
nativeOn:{//监听原生事件
click: this.nativeClickHandler
},
directives:[//自定义指令
{
  name:'myDIrective',
  value:2,
  expression:' 1+1',
  arg:'foo',
  modifiers:{
   bar:true
  }
}
],
scopedSlots:{ //作用域{ name:props => VNode|Array<VNode>}
default: props => h('span',props.text)
},
slot:'name-of-slot', //子组件定义的slot名称
//下面是其他特殊顶层属性
key:'myKey',
ref:'myRef'

Render的写法比较复杂且可读性差，一般都用template来实现，只有特殊的场景才使用Render函数。

在组件树中，VNode如果是组件或者含有组件的slot，那么VNode必须唯一。

好了vue中Render函数的用法就写到这里，希望对大家有帮助。