Vue3 中操作 DOM 的最佳方式

一般来说操作DOM有很多种方式，那么什么方式是适合 Vue3 的呢，我个人觉得是 ref，那么我们该如何使用呢？

ref 操作步骤

1. import 从 vue 导入 ref
2. 在需要操作的 DOM 上绑定的 ref 属性
3. setup 函数中定义好绑定的 ref 属性
4. return 中将绑定好 ref 给返回出去
5. 在需要的时候去操作DOM

ref 在 Vue3 的使用场景

密码框内容的显示和隐藏

<template>
<!-- 2. 在需要操作的 DOM 上绑定对应的 ref 属性 -->
<input type="password" placeholder="请输入密码" ref="pwd" />
</template>

<script>
// 1. 导入 ref
import { ref } from 'vue'
setup() {
	// 2. 定义绑定的 ref 属性
        const pwd = ref()

        // 5.在点击小眼睛的时候修改 input 输入框 type 属性
        const changePwdState = () => {
            // 通过 pwd.vlaue 属性获取 DOM，可以 pwd.value.vlaue 获取 DOM 里面的值
            pwd.value.type = data.pwdState ? 'text' : 'password'
        }
        return {
            // 4. 导出 pwd
            pwd,
            changePwdState,
        }
    },
</script>

此时我们就可以在 点击小眼睛 的时候实现如下效果