vue源码分析（五）——vue render 函数的使用

news2024/12/26 23:33:00

文章目录

前言
一、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。

二、render 源码分析

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

1.执行initRender方法

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

在这里插入图片描述

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

（1）区别

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

在这里插入图片描述

（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: '我是一个双向绑定的数据'
    }
  }
})

在这里插入图片描述

3、原型上的_render方法

（1）renderProxy方法

renderProxy：就是在init.ts初始化的时候判断，是生产环境的时候将vm复制给renderProxy。

（2）initProxy方法

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

①执行initProxy的时机

在这里插入图片描述

②initProxy的详细说明

在这里插入图片描述

③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>