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 属性。

待更正补充...

热门相关:总裁别再玩了   修真界败类   修真界败类   处女心经   上神来了