操作dom 元素

1. 原生js获取dom元素

document.querySelector(选择器)

注意：小程序是不能使用getElementById之类的dom

2. Vue3 ref获取单个dom元素

vue官网说法：关于 ref 注册时间的重要说明：因为 ref 本身是作为渲染结果被创建的，在初始渲染的时候你不能访问它们 - 它们还不存在！$refs 也不是响应式的，因此你不应该试图用它在模板中做数据绑定。

解释：如果你该ref绑定的元素不是当前页面的元素，（也就是当前页面调用的某个子组件），那么在mounted中是不能通过$refs来访问的，可以通过this.$nextTick()来访问它，而且得放在methods里面。

为了确保 ref 引用值已经成功绑定上元素。通过通过以下几种方式确保获取

onMounted(()=>{})

nextTick(()=>{})

watchEffect(()=>{})

watch(dom,(val)=>{...})

3. ref获取v-for循环中的dom元素

• 要与v-for在同级

• ref是一个数组ref([])

通过getCurrentInstance

这种方式，与vue2的this.$refs一般无二，只是我们用了getCurrentInstance函数在setup中获取了当前组件实例以替代this。

5.获取Vue实例

在父组件中，我们静态绑定childRef。

在子组件中，我们需要通过defineExpose函数，手动暴露出来ref引用值，该值指向了button元素

6. 在swiper中获取swiper的dom元素

二：在for循环中获取dom元素

三：获取ref中的ref

需要借助Vue3提供的新的方法getCurrentInstance

需要注意的是，getCurrentInstance只能在setup或者生命周期中使用才有效

注意：小程序中，uniapp的ref要绑定在子组件中才能被获取，如果绑定在view，是获取不了的，你得把业务写在一个组件来引用才行。

8.uniapp 获取dom

我们知道在vue中要想拿到dom元素，需要在dom元素挂载到页面上才可以，也就是在mounted()生命周期中，同理在uniapp中需要在页面生命周期中onReady() 或者组件周期mounted()内获取才有效

页面生命周期onLoad和onReady的区别：

onLoad() { //页面初始化执行,用户页面获取参数},
onReady() { //页面初次渲染完毕执行},

onRady(()=>{
//通过$nextTick 获取dom
nextTick(()=>{
     let el = uni.createSelectorQuery().in(this).select('#id');
})
})