Vue3 setup 在渲染函数中通过ref访问Dom元素

Vue3.0 中新增了Composition API , 在使用h函数渲染vnode时，如果需要使用ref, 和 vue2.0中有所不同。

先来看在 Vue3 如何在模版语法中使用ref（options语法中获取ref和2.0版本语法无差异）

<template>
	<div ref="divRef">ref demodiv>
template>
<script>
import { ref, onMounted } from "vue";
export default {
	name: "Demo",
	setup() {
		const divRef = ref(); // 初始值需要赋值为空，或者null, 变量名一定要和模版中的ref一致
		
		onMounted(() => {
			console.log(divRef.value) // 此时在mounted周期中可以访问到ref
		})
		
		return {
			divRef
		}
	}
}
script>

在渲染函数中使用并访问ref:

<script>
import { h, ref, onMounted } from "vue";
export default {
	name: "Demo",
	setup() {
		const divRef = ref(); // 初始值需要赋值为空，或者null
		
		onMounted(() => {
			console.log(divRef.value) // 此时在mounted周期中可以访问到ref
		})
		
		return () => h('div', {
			ref: divRef, // 此处ref的值是divRef变量，不可写成 “divRef” 字符串，否则访问不到。（在vue2.0中，此处的值是字符串）
		}, "ref demo")
	}
}
script>