一次在 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