浅析Ref操作Dom在Vue2.x和Vue3.x的不同
就对Ref操作Dom的相关知识点以及应用实例分几个方面来做下剖析
- Ref获取Dom的本质
- Ref操作Dom在Vue2.x和Vue3.x的不同
- Ref操作组件Dom和父子组件单向传递对比
详说
Ref获取Dom的本质
Vue2.x中Vue的对象属性$refs，其实就是所有注册过的ref的一个集合，而ref对应着template模版中，不同组件或普通Dom元素上关联的ref="xx"; 源码中ref的实际获取方式也是通过原生方式getElementById而得到的Dom节点；可以说ref是document.getElementById的语法糖。vue3的ref延续了vue2的用法，还增加了一个作用就是创建响应式数据
也许有人会问了，既然ref和getElementById都能获取到Dom，那么在项目开发中，我选择哪种方式都没什么区别呢？
关于这个问题，经过数据表明，$refs相对document.getElementById的方法，会减少获取dom节点的消耗；而具体原因，等下一篇文章再详细探讨。
Ref操作Dom在Vue2.x和Vue3.x的不同
Vue2.x
我们只需要在相应的Dom元素或者组件加上ref="xx"属性,然后在Vue对象中使用this.$refs.xx,就可以直接获取到该Dom并操作其方法属性,
<user-and-dep-tree-select-modal
ref="avaUserTreeSelect"
title="選擇可見範圍"
:project-id="currentProjectId"
:visible.sync="avaUserModalVisible"
@ok="editAvailableUser"
/>
或者
<div class="user" ref="user">dd</div>// $refs
showManagerModal () {
this.$refs.avaUserTreeSelect.showModal(this.form.managers)
console.log(this.$refs.user.text)
},Vue3.2
在Vue3.2版本使用的方式
//普通Dom
<div class="user" ref="user"></div>
//组件
<batch-adjust-department-modal ref="batchAdjustDepartmentRef" /><script setup>
import { ref } from 'vue';
// modal调整部门弹层Dom
const batchAdjustDepartmentRef = ref(null);
const user = ref(null);
</script>也许这里有人疑问，为什么声明了一个和template的ref中同名的常量变量就绑定了对应的dom? 在这里再补充说明一下：
- Vue3 在早期版本（ 3.0.0-beta.21 之前）中对 composition api 的支持，只能在组件选项
setup函数中使用。而相应式的变量都是通过在setup()方法中return {写入需要在模版中使用的变量或方法}
<script>
import { defineComponent, ref } from 'vue'
export default defineComponent({
name: 'HelloWorld',
setup(props, ctx) {
const count = ref(0)
function add() {
count.value++
}
// 使用return {} 把变量、方法暴露给模板
return {
count,
add,
}
},
})
</script>- 在 3.0.0-beta.21 版本中增加了
<script setup>的实验特性。如果使用了，会提示<script setup>还处在实验特性阶段。 - 在 3.2.0 版本中移除
<script setup>的实验状态，从此，宣告<script setup>正式转正使用，成为框架稳定的特性之一 与组件选项setup函数对比，<script setup>我们只需要写更少、更简洁的代码，不需要使用return {}暴露变量和方法了，使用组件时不需要主动注册了，会自动帮你绑定
所以在<script setup>中声明的变量会自动被加到该Vue对象的本身this中，如
<script setup> | <script> |
|---|---|
const user = ref(null); | this.$ref.user |
Ref操作组件Dom和父子组件单向传递
props父传子，子通过emits传父，这样单方向传递，在控制弹层组件的显示和隐藏方面也可以实现，但是如此一来，我们就会像下面一样 父组件
<template>
<exchange-valid-modal-vue v-model:visible="visibleExchange" />
</template>
<script setup>
// 转让管理员组件
import ExchangeValidModalVue from './modal/ExchangeValidModal.vue';
// modal弹层
const visibleExchange = ref(false); // 转让管理员可视化
const onExchangeAdmin = () => {
visibleExchange.value = true;
};
</script>子组件ExchangeValidModalVue.vue
<template>
<t-dialog
v-model:visible="visibleExchange"
header="转让主管理员"
attach="body"
width="384px"
:confirm-on-enter="true"
:on-close="onCloseExchange"
/>
</template>
<script setup>
const visibleExchange = ref(false);
const props = defineProps({
data: {
type: Object,
default: () => {},
},
visible: {
type: Boolean,
default: false,
},
});
watch(
() => props.visible,
(cur, pre) => {
visibleExchange.value = cur;
if (cur) {
firstTag.value = 1;
}
},
);
watch(
() => visibleExchange.value,
(cur, pre) => {
emits('update:visible', cur);
},
);
</script>从代码里面我们就可以发现通过用父子组件单向传递的方式去实现一个组件的显示和隐藏功能，我们需要如此费劲地声明多个变量，还要做两次监听，万一后面不止一个这样的参数进行传递，那么代码量可想而知，而且也不易维护。
其实显示和隐藏的功能可以直接在内部中进行值的响应即可，并不需要在父级别中操作，如下将上面代码改变一下：
子组件ExchangeValidModalVue.vue
<template>
<t-dialog
v-model:visible="visible"
header="转让主管理员"
attach="body"
width="384px"
:confirm-on-enter="true"
:on-close="onCloseExchange"
/>
</template>
<script setup>
import { ref } from 'vue';
const visible = ref(false);
const emits = defineEmits(['call']);
const onEmitSelectSuperiod = () => { // 省略
emits('call');
}；
const onOpen = () => {
visible.value = true;
};
const onClose = () => {
visible.value = false;
};
defineExpose({
onOpen,
onClose,
});
</script>那么在父组件中，我们只需要通过ref得到该组件Dom，然后操作Dom内部的方法即可；
如：父组件改写
<template>
<exchange-valid-modal-vue ref="exchangeRef" />
</template>
<script setup>
// 转让管理员组件
import ExchangeValidModalVue from './modal/ExchangeValidModal.vue';
// modal弹层
const exchangeRef = ref(null); // 转让管理员可视化
const onExchangeOpen = () => {
exchangeRef.onOpen() // 直接操作dom里defineExpose暴露出来的方法
};
</script>如此，是不是比父子单向数据传递的方式更加高效易用？当然上面所说的只是我举的一个例子，当后续需要在组件内扩展功能也可按类似的方法代替单向数据流的方式扩展
但，请注意；这种操作dom方式，并不是什么场景下都是最佳的选择；我们可以分情况选择，比如当一些数据只需要在子组件的范畴中实现，而不需要父组件外加干涉的情况下，选择ref操作dom更为高效；
补充知识点：
defineExpose
在 Vue3.2 中，默认不会暴露任何在 <script setup> 中声明的绑定，即不能通过模板 ref 获取到组件实例声明的绑定。
Vue3.2 提供了 defineExpose 编译器宏，可以显式地暴露需要暴露的组件中声明的变量和方法
（学习视频分享：vuejs入门教程、编程基础视频）
以上就是浅析Ref操作Dom在Vue2.x和Vue3.x的不同的详细内容，更多请关注编程网其它相关文章！
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
