vue源码分析(五)——vue render 函数的使用

文章目录

  • 前言
  • 一、render函数
    • 1、render函数是什么?
  • 二、render 源码分析
    • 1.执行initRender方法
    • 2.vm._c 和 vm.$createElement 调用 createElement 方法详解
      • (1)区别
      • (2)代码
    • 3、原型上的_render方法
      • (1)renderProxy方法
      • (2)initProxy方法
        • ①执行initProxy的时机
        • ②initProxy的详细说明
        • ③warnNonPresent警告方法的示例(故意将message 写错为message1)
  • 总结


前言


提示:以下是本篇文章正文内容,下面案例可供参考

一、render函数

1、render函数是什么?

官网介绍:https://v2.cn.vuejs.org/v2/api/#render
简单概括就是 _render 是vue 的一个私有方法,作用是把一个实例编程虚拟Node。
vue源码分析(五)——vue render 函数的使用_第1张图片

二、render 源码分析

路径:src\core\instance\render.ts

1.执行initRender方法

在init初始化方法中执行initRender(vm)方法,也就是把vm传入, 执行initRender初始化render方法。

vue源码分析(五)——vue render 函数的使用_第2张图片

2.vm._c 和 vm.$createElement 调用 createElement 方法详解

(1)区别

区别:
vm._c:被编译生成的render函数 所使用的方法。
vm.$createElement:给手写render函数提供一个创建vnode的方法。

vue源码分析(五)——vue render 函数的使用_第3张图片

(2)代码

通过render函数将数据渲染到视图上

import Vue from 'vue'

var app = new Vue({
  el: '#app',
  render(h) {
    return h('div', {
      attrs: {
        id: 'app1'
      }
    }, this.message)
  },
  data() {
    return {
      message: '我是一个双向绑定的数据'
    }
  }
})

vue源码分析(五)——vue render 函数的使用_第4张图片

3、原型上的_render方法

(1)renderProxy方法

renderProxy:就是在init.ts初始化的时候判断,是生产环境的时候将vm复制给renderProxy。
vue源码分析(五)——vue render 函数的使用_第5张图片

(2)initProxy方法

initProxy:就是在init.ts初始化的时候判断,是开发环境的时候执行的方法。
路径: src\core\instance\proxy.ts

①执行initProxy的时机

vue源码分析(五)——vue render 函数的使用_第6张图片

②initProxy的详细说明

vue源码分析(五)——vue render 函数的使用_第7张图片

③warnNonPresent警告方法的示例(故意将message 写错为message1)

其实有很多这样的方法,这边挑一个常见的说明一下

// main.js vue2项目中
import Vue from 'vue'

var app = new Vue({
  el: '#app',
  data() {
    return {
      message: '我是一个双向绑定的数据'
    }
  }
})

// index.html
<body>
    <div id="app">{{message1}}</div>
  </body>

vue源码分析(五)——vue render 函数的使用_第8张图片


总结

对vue 中 render 函数的简单说明

你可能感兴趣的:(vue2源码分析,vue.js,前端,javascript)