一次在 Vue3 中使用render函数的事故，从源码中找到了答案

最新推荐文章于 2024-08-15 16:42:09 发布

前端_小学生

最新推荐文章于 2024-08-15 16:42:09 发布

阅读量3.7k

点赞数 1

本文链接：https://blog.csdn.net/weixin_44243061/article/details/110918542

版权

在 Vue3 版本 3.0.4 中，使用 render 函数创建组件时，直接通过 ref 获得的数据是原始值而非响应式对象，导致动态绑定失效。本文通过源码分析，发现这是由于在 setup 函数执行后，ref 的值被转换。解决方案是在 setup 函数中返回一个包含 ref 的对象，或者直接返回一个函数作为 render 函数。返回函数时，该函数会被用作组件的 render 函数，从而实现正确显示内容。

摘要由CSDN通过智能技术生成

一次在 Vue3 中使用render函数的事故，从源码中找到了答案

第一遍看 vue3 的源码，有不对的地方，希望各位大佬能指出，感谢！！！

Vue3 版本 3.0.4

在 Vue3.0 创建组件时，在 render 函数中使用 setup 函数中返回的 ref 数据，无法动态绑定

示例：

Vue.createApp({
   
    setup() {
   
        const elRef = Vue.ref(null)
        Vue.onMounted(() => {
   
        	elRef.value.innerHTML = "123"
        })
        return {
   
        	elRef
        }
    },
    render() {
   
        return Vue.h("div", {
   
            ref: this.elRef
        })
    }
}).mount("#app")

浏览器报错

查找问题

1、找到 `render` 函数的执行

源码位置：https://github.com/vuejs/vue-next/blob/master/packages/runtime-core/src/componentRenderUtils.ts 77行

删减后的代码：

export function renderComponentRoot(
  instance: ComponentInternalInstance
): VNode {
   
  const {
   
    proxy,
    withProxy,
    props,
    render,
    renderCache,
    data,
    setupState,
    ctx
  } = instance

  let result
  try {
   
    let fallthroughAttrs
    if (vnode.shapeFlag & ShapeFlags.STATEFUL_COMPONENT) {
   
	  const proxyToUse = withProxy