Vue3之ref取render形式组件jsx元素节点

2023年7月28日22:16:06

ref 取 render 方式组件节点

一开始注意到组件 setup 和 render 一起使用的情况，好奇怎么通过 ref 取到 render 中 jsx 里的节点，一开始试了以下的尝试，结果是 undefined 的：

import { defineComponent, ref, onMounted } from "vue";

export default defineComponent({
  setup() {
    let chartRef = ref()

    onMounted(() => {
      console.log(chartRef.value); // undefined
    })

    return {
      chartRef
    }
  },
  render() {
    return <div ref={this.chartRef} style="{{ width: 200px, height: 100px }}"></div>
  },
});

后来经过大佬指点，改成以下形式：

import { defineComponent, ref, onMounted } from 'vue'

export default defineComponent({
  setup() {
    let chartRef = ref<HTMLDivElement | null>()

    onMounted(() => {
      console.log(chartRef.value) // Element div...
    })

    return {
      chartRef
    }
  },
  render() {
    return <div ref={el => this.chartRef = el} style="{{width: 200px, height: 100px}}"></div>
  }
})

render 这一步就很像 react 里 jsx 的写法了，react 里也有回调 ref，都是一样写法。回调函数参数el引用了 div 元素节点，通过赋值到chartRef。这种方式在 react 里是保持引用响应的，vue3 也是。

这种方式在 vue3 官方文档的函数模板引用是有注明的，这里容易漏，做下记录。

渲染函数 h 引申

在以往的 vue2 中我们会看到如下的代码：

new App({
  el: "app",
  render: (h) => h(App)
});

是不是熟悉起来了？ h 到底是什么意思，h => h(App)箭头函数，如果我把无语义的h参数替换成 createElement 呢？没错，就是这个意思，它是个函数，创建虚拟 dom 的函数，该函数传的参数也是有区分的：

• 如果是组件，App就是一个组件，参数直接传组件就好；
• 如果是标签，第一个参数是渲染的 dom 标签，第二个是渲染该标签内的内容，createElement('h1', 'Hello World!')；

所以在 vue3 中，以上面的例子改写成如下：

import { defineComponent, ref, onMounted, h } from 'vue'

export default defineComponent({
  setup() {
    let chartRef = ref<HTMLDivElement | null>()

    onMounted(() => {
      console.log(chartRef.value) // Element div...
    })

    return {
      chartRef
    }
  },
  render() {
    // return <div ref={(el) => this.chartRef = el} style="{{width: 200px, height: 100px}}"></div>
    return h('div', {style : {width: '200px', height: '100px'}, ref: el => this.chartRef = el}, 'setup&render方式h函数渲染')
  }
})

setup&return 组件写法也是类似：

import { defineComponent, ref, onMounted, h } from 'vue'

export default defineComponent({
  setup() {
    let chartRef = ref<HTMLDivElement | null>()

    onMounted(() => {
      console.log(chartRef.value) // Element div...
    })

    return() => {
      return h('div', {style : {width: '200px', height: '100px'}, ref: chartRef}, 'setup&return方式h函数渲染')
    }
  }
})

相比下就是把setup外部的render配置项拿到了 setup 里用return匿名函数代替了，而且拿到setup里可以直接绑定 ref 属性，在 setup() 内部声明的渲染函数天生能够访问在同一范围内声明的 props 和许多响应式状态这点在vue3官方文档声明渲染函数也有说明。

待更正补充...