Ref가 Dom을 운영하는 이유는 왜 그렇게 사용하기 쉽고 효율적인가요? 다음 기사에서는 Ref 작업에 대해 설명하고 Dom을 얻는 Ref의 본질, Vue2.x와 Vue3.x의 차이점 등을 소개합니다. 모두에게 도움이 되기를 바랍니다!
우리는 프로젝트를 개발하기 전에 먼저 요구사항 분석을 먼저 수행하는 경우가 많습니다. 프런트 엔드의 경우 작업 효율성을 높이기 위해 기본 구성 요소 라이브러리를 조사하거나 선택할 수 있습니다. 결국, 시간 비용을 중요하게 생각하는 회사의 경우 달력과 같은 구성 요소를 개발하기 위해 TV 시리즈를 시청하고 게임을 할 시간을 주지 않을 것입니다. 그러나 시중에 나와 있는 모든 구성 요소 라이브러리가 우리의 요구 사항을 충족할 수 있는 것은 아닙니다. 이때 컴포넌트를 직접 작성하여 프로젝트에 적용해야 합니다.
그리고 이것이 제가 말하고 싶은 것입니다: 구성요소를 쉽게 적용할 수 있도록(또는 코드 양을 줄이면서) 확장성을 개선하고 수요 변화와 후속 유지 관리를 용이하게 설계하는 방법은 무엇입니까?
여러 가지 방법이 있는데 Ref를 사용하여 Dom을 조작하는 것도 그 중 하나입니다. 그러나 이 방법은 Modal, Popup을 유지 관리하고 실행할 때 문제가 되며, 대화형 구성 요소를 표시하거나 숨기기 위해 Dom을 자주 실행하는 경우를 활용합니다. 그것. [관련 추천 : vuejs 영상 튜토리얼, 웹 프론트 엔드 개발]
Dom을 운영하는 Ref의 관련 지식 포인트와 응용 사례를 여러 측면에서 분석해 보겠습니다
이 문제와 관련하여 데이터에 따르면 $refs는 document.getElementById 메서드에 비해 DOM 노드를 얻는 데 드는 소비를 줄여줍니다. 구체적인 이유는 다음 기사에서 자세히 설명합니다.
Vue2에서 Ref 연산 Dom의 차이점 객체에서 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)
},document.getElementByIdVue3.2
여기 누군가 질문이 있을 수도 있습니다. 템플릿의 참조와 동일한 이름을 가진 상수 변수를 선언하면 해당 DOM이 바인딩되는 이유는 무엇입니까? 다음은 약간의 추가 설명입니다.에서 사용하는 방식입니다. 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>로그인 후 복사
Vue3의 이전 버전(3.0.0-beta.21 이전)의 구성 API 지원은 구성 요소 옵션 setup 기능에서만 사용할 수 있습니다. 해당 변수는 모두 setup() 메서드에 반환됩니다. {템플릿에 사용해야 하는 변수 또는 메서드를 작성하세요}<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>< 스크립트 설정>. 사용하는 경우 <스크립트 설정>이 아직 실험적인 기능 단계에 있다는 메시지가 표시됩니다.
<스크립트 설정>의 실험적 상태를 제거하고 이제부터 <스크립트 설정>을 공식적으로 사용할 예정이라고 합니다. 프레임워크의 안정적인 기능이 됩니다.
구성요소 옵션 setup 함수와 비교할 때 <script setup>은 점점 더 간결한 코드만 작성하면 되며 return {}<을 사용할 필요가 없습니다. /code > 컴포넌트를 사용할 때 변수와 메소드가 노출됩니다. 자동으로 바인딩됩니다.<script setup>에 선언된 변수는 Vue에 자동으로 추가됩니다. 객체 자체는 <script setup> | <와 같이 여기에 있습니다. th>|
|---|---|
const user = ref(null);
this.$ref.사용자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>로그인 후 복사 子组件 <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>로그인 후 복사 从代码里面我们就可以发现通过用父子组件单向传递的方式去实现一个组件的显示和隐藏功能，我们需要如此费劲地声明多个变量，还要做两次监听，万一后面不止一个这样的参数进行传递，那么代码量可想而知，而且也不易维护。 其实显示和隐藏的功能可以直接在内部中进行值的响应即可，并不需要在父级别中操作，如下将上面代码改变一下： 子组件 <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更为高效； 补充知识点：
|
![당신을 가장 잘 이해하는 프론트엔드 강좌: HTML5/CSS3/ES6/NPM/Vue/...[원본]](https://img.php.cn/upload/course/000/000/068/632ae26b9b376240.png)
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
