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

在setup中获取DOM元素

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

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

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

模版中的变量 一定要在setup函数中return出去，这样才能在模版中渲染出来。

再来看看如何在watch回调中，获取ref对应的DOM元素（VUE3中使用vuex）

<audio
      ref="audioRef"
></audio>

// vuex提供useStore专门从vuex中拿数据的方法
import { useStore } from 'vuex'
import { computed, watch, ref } from 'vue'

setup() {
    // 获取的时候要先定义
    const audioRef = ref(null)

    // vuex在setup中固定用法
    const store = useStore()

    // 从vuex中获取属性
    const playing = computed(() => store.state.playing)

    // 监听playing值变化，更改歌曲播放或者暂停
    watch(playing, (newPlaying) => {
      // 从ref中获取到DOM元素
      const audioEl = audioRef.value
      // 当有新值的时候 audio元素执行play方法
      newPlaying ? audioEl.play() : audioEl.pause()
    })

    return {
      audioRef
    }
}

在渲染函数中使用并访问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变量，不可写成 “divRef” 字符串
否则访问不到。（在vue2.0中，此处的值是字符串）
*/
			ref: divRef, 
		}, "ref demo")
	}
}
</script>

为什么setup中ref()可以拿到模版中的ref？

比如我最近在看黄老的vue3音乐课程教程：

其中有个同学问道了如下两个问题：

• 为什么setup中ref()可以拿到模板中的rootRef，而且setup中const变量名需要和模板中ref值一样。
• setup return rootRef？ 返回rootRef没有地方用到啊，为什么要返回

setup 返回的  rootRef 就是给模板用的，具体原因你需要去看源码，大致上 setup 返回的数据会挂载到组件的实例的 setupState 中，其中模板中的 ref="rootRef" 会被编译成 { ref: "rootRef" }，然后在节点 patch 过程中执行 setRef，会把其 DOM 节点赋值给 setupState['rootRef']。

推荐大家在使用的过程中，按照（一）中操作来即可，熟悉的时间久了，自然就会明白啦~