Vue学习(二)之渲染函数


基础

  • 一般我们通过模板可以快速的创建一个HTML;但是在某些情况下使用render 函数可以让我们使用JavaScript更加快速地创建页面
  • vue渲染过程:模板通过编译生成AST,再由AST生成Vue的render函数(渲染函数),渲染函数结合数据生成Virtual DOM树,Diff和Patch后生成新的UI
    
    //render写法
    Vue.component('anchored-heading', {
    render: function (createElement) {
      return createElement(
        'h' + this.level,   // 标签名称
        this.$slots.default // 子元素数组
      )
    },
    props: {
      level: {
        type: Number,
        required: true
      }
    }
    })
    
  • 补充知识:
    • vm.$slots:{[name: string]: ?Array<VNode> }:用来访问被插槽分发的内容。每个具名插槽 有其相应的属性 (例如:slot=”foo” 中的内容将会在 vm.$slots.foo 中被找到)。default 属性包括了所有没有被包含在具名插槽中的节点
    • vm.$scopedSlots:{ [name: string]: props => VNode | Array<VNode> }:用来访问作用域插槽。对于包括 默认 slot 在内的每一个插槽,该对象都包含一个返回相应 VNode 的函数;子组件的数据可以显示在引用的父组件上
    • 模板:Vue的模板基于纯HTML,基于Vue的模板语法,我们可以比较方便地声明数据和UI的关系著作权归作者所有
    • AST:AST是Abstract Syntax Tree的简称,Vue使用HTML的Parser将HTML模板解析为AST,并且对AST进行一些优化的标记处理,提取最大的静态树,方便Virtual DOM时直接跳过Diff
    • 虚拟节点:createElement 返回值会告诉 Vue 页面上需要渲染什么样的节点,及其子节点。我们把这样的节点描述为“虚拟节点 (Virtual Node)”,也常简写它为“VNode”。“虚拟 DOM”是我们对由 Vue 组件树建立起来的整个 VNode 树的称呼
      vdom

深入理解

  • createElement
    // 返回虚拟节点
    createElement(
    /**
    * 必需参数①:一个HTML标签字符串 | 组件选项对象 |
    * 解析前面任意一种的async异步参数
    */
    'div',
    /**
    * 可选参数②:一个包含模板相关属性的数据对象,
    * 可以在 template 中使用这些特性
    */
    {
      // (详情见下一节)
    },
    /**
    * 选参数③:子虚拟节点 (VNodes)或者虚拟节点数组,由`createElement()` 构建而成,
    * 也可以使用字符串来生成“文本虚拟节点
    */
    [
      '先写一些文字',
      createElement('h1', '一则头条'),
      createElement(MyComponent, {
        props: {
          someProp: 'foobar'
        }
      })
    ]
    )
    
  • v-if用判断语句重写
    props: ['items'],
    render: function (createElement) {
    if (this.items.length) {
      return createElement('ul', this.items.map(function (item) {
        return createElement('li', item.name)
      }))
    } else {
      return createElement('p', 'No items found.')
    }
    }
    
  • v-for用map重写
    render: function (createElement) {
    return createElement('div',
      Array.apply(null, { length: 20 }).map(function () {
        return createElement('p', 'hi')
      })
    )
    }
    
  • v-model底层重写
    props: ['value'],
    render: function (createElement) {
    var self = this
    return createElement('input', {
      domProps: {
        value: self.value
      },
      on: {
        input: function (event) {
          self.$emit('input', event.target.value)
        }
      }
    })
    }
    

JSX语法

Babel 插件,用于在 Vue 中使用 JSX 语法,它可以让我们回到更接近于模板的语法上

 new Vue({
  el: '#demo',
  render: function (h) {
    return (
      
        Hello world!
      
    )
  }
})

文章作者: Susie Chang
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 Susie Chang !
 上一篇
Vue学习(三)之数据双向绑定源码解析 Vue学习(三)之数据双向绑定源码解析
基于vue2.0基础知识:TypeScript、ES6、ES5 目录结构我们将通过分析,简化源码概览数据绑定过程 observer中实现数据双向绑定过程 Observer类我们从Observer类的入口开始分析整个数据绑定过程;在源
2018-10-17
下一篇 
Vue学习(一)之概览 Vue学习(一)之概览
参考 Vue.js Vue中的无渲染组件 Vue是什么 Vue是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另
2018-10-15
  目录