[JavaScript知识库]vue3中如何操作dom

实际开发的过程中总会有那么几个需求，使得我们不得不操作一些dom元素，而vue3给我们也提供了一些方法，来满足我们的那些花里胡哨的需求

方法一 使用官网推荐的 组合式 API

<template> 
  <div ref="root">This is a root element</div>
</template>

<script>
  import { ref, onMounted } from 'vue'

  export default {
    setup() {
      const root = ref(null)

      onMounted(() => {
        // DOM 元素将在初始渲染后分配给 ref
        console.log(root.value) // <div>This is a root element</div>
      })

      return {
        root
      }
    }
  }
</script>

这个是官网的例子，看不懂的话可以去社区留言，说你看不懂~ . ~

方法二 使用 getCurrentInstance

getCurrentInstance?支持访问内部组件实例（这个东西还有很多用处，可以自己去研究一下）。

WARNING

getCurrentInstance?只暴露给高阶使用场景，典型的比如在库中。强烈反对在应用的代码中使用?getCurrentInstance。请不要把它当作在组合式 API 中获取?this?的替代方案来使用。
这里不做深入的研究，我们只研究如何使用这个去操作dom

getCurrentInstance?只能在?setup?或生命周期钩子中调用。

如需在?setup?或生命周期钩子外使用，请先在?setup?中调用?getCurrentInstance()?获取该实例然后再使用

 <span ref="testRef"> 我是测试</span>

//首先引入
import { getCurrentInstance} from 'vue'; 

 setup() {
     const internalInstance = getCurrentInstance();
     //然后我们在一些方法或者生命周期中就可以去访问我们需要访问的dom了
     const save = () => {
         internalInstance.refs.testRef // 这个就可以访问的到了
         //如果在这里面直接调用
         //const internalInstance = getCurrentInstance(); 这里是不行🙅
    }
}

比较懒，凑合看吧

(\ _ /)
( * . *)
/>??