VueJs（十四）

vue 2.x和1.x的最大不同在于使用了Virtual Dom（虚拟DOM）来更新DOM节点，提升了渲染性能

Virtual DOM
不是真正意义上的DOM对象，而是一个轻量级Js对象，状态发生变化的时候，会进行Diff运算，来更新只需要被替换的DOM，而不是全部重载

下面是一个普通的DOM节点

<div id="main">
    <p>文本内容</p>
    <p>文本内容</p>
</div>

下面是使用Virtual DOM创建的JS对象 //virtual的中文意思是虚拟的（计算机）

var vNode = {
    tag:'div',
    attributes:{
           id:'main'
    },
    children:[
       //p节点
     ]
}

vNode对象通过一些特定的选项描述了真实的DOM结构

Render函数

大部分网站文章会区分一级标题、二级标题…为了方便分享url，他们都做成了锚点，点击一下会将内容加在网址后面，以“#”分割。

在一些比较冗长又重复的的分级代码中，使用render函数可以简化代码

   render:function(createElement){
        return createElement(
          'h' + this.level,
          [
             createElement{
                 'a',
                 {
                   domProps:{
                       href:'#' + this.title
                       }
                    },
                    this.$slots.defalut
                 )
             ]
          )
}

Render函数通过createElement参数来创建Virtual Dom，结构精简了很多
createElement是学习render的重点

基本参数

createElement构成了Vue Virtual Dom的模板，他有3个参数

createElement（
    //{String|Object|Function}
    
    //一个html标签，组件选项，或一个函数
    //必须Return上述一个              ------------1
    
    'div',
    //{object}
    //一个对应属性的数据对象，可选
    //可以在template中使用         ----------2
    {
    }，
    //{String|Array}
    //子节点,可选                 -------3
    [
       createElement('h1','hello world'),
       createElement(MyComponent,{
           props:{
             someProp:'foo'
          }
        }),
        'bar'
      ]
   )

解析：第一个参数必选，他可以是一个html标签，也可以是一个组件或者函数，第二个是可选参数，数据对象，在template中使用。第三个是子节点，也是可选参数

第二个参数 '数据对象‘’ ，具体的选项如下：

{
      //和v-bind：class一样的API
      ‘class’：{
           foo:true,
           bar:false
      },
      //和v-bind：style一样的API
      style：{
         color:'red',
         fontSize:'14px'
      },
      //正常的html特性
      attrs：{
          id:'foo'
      },
      //组件props
      props：{
         myProp：‘bar’
      }，
      //DOM属性
      domProps{
         innerHTML：‘baz’
      }，
      //自定义事件监听器“on”
      //不支持如v-on：keyup.enter的修饰器
      //需要手动匹配keyCode
      on：{
           click：this.clickHandler
      }，
      //自定义指令
      directives：[
       {
           name:'my-custom-directive',
           value:'2'
           expression:'1+1',
           arg:'foo',
           modifiers:{
              bar:true
           }
        }
 ],
       //作用域slot
       //{ name：props => VNode|Array<VNode>}
       scopedSlots：{
           defalut：props =>h('span',props.text）
       }，
       //如果子组件有定义slot
       slot：‘name-of-slot’
       //其他特殊顶层属性
       key:'myKey',
       ref:'myRef'
}

在之前的template中，我们都是在组件的标签上使用形如v-bind：class、v-bind:style、v-on:click
这样的指令，但是在render函数中，他是将他们都写在了数据对象里面

render不是百分百适用的，看场景选择合适的