Vue（三）watch 插槽 渲染函数的使用

渲染函数的使用

代替原生JS的DOM操作，放入渲染函数中可在浏览器初始化成功前渲染好虚拟DOM。
另外渲染函数功能十分强大，支持动态的载入渲染函数，动态渲染DOM。
渲染函数传入createElement，然后再返回createElement函数

• crateElement函数第一个参数可传入组件或者字符串形式的HTML标
• 函数第二参数传入的是数据对象，其中包括：

{
   
  // 1 可传入class, 与在组件上 `v-bind:class` 的 API 相同，接受一个字符串、对象或字符串和对象组成的数组
  'class': {
   
    foo: true,
    bar: false
  },
  // 2 可传入style, 与 `v-bind:style` 的 API 相同，接受一个字符串、对象或字符串和对象组成的数组
  style: {
   
    color: 'red',
    fontSize: '14px'
  },
  // 3 可传入普通的 HTML attribute
  attrs: {
   
    id: 'foo'
  },
  // 4 可传入 组件 prop , 当 第一个参数为tempalte 的时候可以使用
  props: {
   
    myProp: 'bar'
  },
  // 5 可传入DOM属性
  domProps: {
   
    innerHTML: 'baz'
  },
  // 6 可传入监听事件，相当于 @on:click = clickHandler()
  on: {
   
    click: this.clickHandler
  },
  // 7 仅用于组件，用于监听原生事件，而不是组件内部使用,`vm.$emit` 触发的事件。
  nativeOn: {
   
    click: this.nativeClickHandler
  },
  // 8 传入自定义指令。注意，你无法对 `binding` 中的 `oldValue`赋值，因为 Vue 已经自动为你进行了同步。
  directives: [
    {
   
      name: 'my-custom-directive',
      value: '2',
      expression: '1 + 1',
      arg: 'foo',
      modifiers: {
   
        bar: true
      }
    }
  ],
  // 9 传入作用域插槽的格式为   { name: props => VNode | Array<VNode> }
  scopedSlots: {
   
    default: props => createElement('span', props.text)
  },
  // 如果组件是其它组件的子组件，需为插槽指定名称
  slot: 'name-of-slot',
  // 其它特殊顶层 property
  key: 'myKey',
  ref: 'myRef',
  // 10  如果你在渲染函数中给多个元素都应用了相同的 ref 名，
  // 那么 `$refs.myRef` 会变成一个数组。
  refInFor: true
}

• 第三个参数是传入其子元素，下面demo直接写入行内的文本作为子元素

demo

该demo动态的传入上级的标签 ul 和 foods 数据，同时数据对象中设置 stlye 和on 点击事件

</