Vue篇(010)-vue3如何通过ref属性获取元素

齐丶先丶森

发布于 2022-05-12 21:09:49

3.4K0

发布于 2022-05-12 21:09:49

参考答案：

1.在template中的写法跟vue2一样，给元素添加个ref='xxx' 2.在setup中，先创建一个响应式数据，并且要把响应式数据暴露出去 3.当元素被创建出来的时候，就会给对应的响应数据赋值 4.当响应式数据被赋值之后，就可以利用生命周期方法onMounted中获取对应的响应式数据，即DOM元素

解析：

在vue2.x中，可以通过给元素添加ref='xxx'属性，然后在代码中通过this.$refs.xxx获取到对应的元素

<template>
  <div ref="box">
    I am div
  </div>
</template>

console.log(this.$refs.box);

在 Vue3 的组合 API 中，采取了新的方案来执行对应的 ref 标签属性获取。过去我们采用的是 this.$refs 的方案，现在，要首先创建 ref 对象，然后再将这个 ref 对象创建出来，以实现监听。

<template>
  <div ref="box">
    I am div
  </div>
</template>

<script>
import { ref } from 'vue';
export default {
  name: 'App',
  setup() {
    let box = ref(null);
    return {box};
  }
}
</script>

首先我们创建了一个 box 的监听对象，然后将这个监听对象暴露出去，从而实现 setup 函数中和节点box 的绑定。

但由于 setup 函数的执行时间要先于 html 标签的渲染，所以我们不能直接在 setup 函数中初始化 box 标签。

  beforeCreate
  setup // setup函数在这两个生命周期之间执行
  Created

setup() {
  let box = ref(null);
  // 所以此时的 box 虽然监听 div，但控制台打印的是 null。
  console.log(box.value);
  return {box};
}

如果存在有初始化或类似的操作，需要借用生命周期函数，而在 setup 中，要寻找生命周期需要用到 on+生命周期 的 api。

Not needed*

通常来说，使用的会是 onMounted.

<template>
  <div ref="box">
    I am div
  </div>
</template>

<script>
import { onMounted, ref } from 'vue';
export default {
  name: 'App',
  setup() {
    let box = ref(null);
    console.log(box.value);

    // 由于 template 中的 div 属性 ref 引用了一个对象 box，因此 box 将与这个 div 执行绑定。
    // 但由于 setup 执行时期，还未创建实际的 div，所以如果要进行与 box 的交互，必须在生命周期中间执行获取。
    // onMounted() 中的行为会在声明周期 mounted 中执行。
    onMounted(() => {
      console.log('box.value', box.value);
    })
    return {box};
  }
}
</script>

至此，我们成功获取到了 box 指定的 div 标签。