事件发生场景：在写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之间完成的.