关于Vue3下的获取当前组件实例的方法

　　事件发生场景：在写Vue的文件时，如果我们在页面上存在多个相同的组件，然后每个组件中都会存在相同的网页元素标签，当我们在组件内部操作这些标签，比如使用dom方法，  document.querySelector()  用于搜索指定类名的HtmlElement，

因为dom操作是针对全局来搜索DOM树的，因此如果有多个相同挂载的组件，那么你在当前组件下使用dom操作去查找这个类名HtmlElement，会发现也会查找到其他组件下的，此时想对该HtmlElement做一些dom操作，会伴随一个问题，也就是会

同步改变另外相同组件下的这个HtmlElement。

　　解决办法：<div class="test" ref="root">　

　　　　　　const root=ref();//这里root就代表绑定的当前组件下的上的类名为test的 div了，

　　还有一种通过getcurrentInstance的方法来获取当前组件下的实例，这里不推荐，因为该方法主要是在dev环境下使用，当打包为生产环境时如果用到里面的上下文ctx，就会报错，此时的这个ctx是不存在的。

　　顺便在测试时引发一段关于vue的声明周期的思考，vue3的setup函数即代表created周期，当在这里面打印root时，会发现undefined，这是因为这个在created时dom的元素没有初始化出来，而当在mouted中打印时可以看到el对象，但是在created时

如果给ref中赋予null值，打印会出现null，这说明created时数据是初始化的，并且可以使用的。

　　总结一下就是created时数据完成初始化，dom实例没有，此时进行http网络请求是可以的，mouted时数据和dom实例都已经初始化好，一般数据请求还是放在created中，遵守先拿数据，然后出现dom，在dom中渲染数据的顺序

　　另外，props,methods,data和computed的初始化都是在beforeCreated和created之间完成的.

标签：初始化,dom,created,实例,HtmlElement,Vue3,组件
来源： https://www.cnblogs.com/jsyynote/p/14965937.html