Vue3基础(十wu)___ref获取原生dom元素

ref

ref可以生成响应式数据，特点是改变需要.value来操作；

ref也可以获取原生dom，改变也是通过.value；

例子：

<template >
  <div ref="box" class="container">myBox</div>
</template>
<script>
import {
    ref, onMounted } from "vue";
export default {
   
  setup(props) {
   
    let box = ref(null);
    onMounted(() => {
   
      console.log(box.value);
      box.value.style.backgroundColor = "red";
    });
    return {
    box };
  }
};
</script>
<style  scoped>
</style>

我们改变了style下的背景色样式，因为ref的本质是reactive({value:变量})
所以改变ref包裹的数据时，我们需要.value进而改变样式，操作原生dom。