vue3.x中的ref

1、无法通过this.$refs获取DOM元素

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

<script>
import { ref } from 'vue'
export default {
  setup() {
      console.log(this.$refs.box);
  },
};
</script>

因为vue3.x中this不指向vue示例，所以以上代码this.$refs.box不存在，将报以下错误

 

2、正确获取dom元素的方法 

<template>
  <div>
    <div ref="box">this is my box</div>
  </div>
</template>

<script>
import { onMounted, ref } from "vue";
export default {
  setup() {
    const box = ref(null);//声明变量
    console.log(box.value);//null
    onMounted(() => {
        // DOM元素在初始渲染后分配给ref
      console.log(box.value);//<div>this is my box</div>
    });
    return {box}
  },
};
</script>

ref中包含且仅有一个value属性，使用box.value可获取数据。需要注意的是，DOM元素在挂载后才会分配给ref，需在onMounted里面获取DOM元素。

3、ref实现响应式数据

reactive对应一个对象里的双向绑定，而ref只对某一个数据类型进行双向绑定。

<template>
  <div>
    <h1>num:{{num}}</h1>
    <h1>count:{{state.count}}</h1>
    <button @click="change">add</button>
  </div>
</template>

<script>
import { ref ,onMounted, reactive} from 'vue'
export default {
  setup() {
      const state = reactive({
          count:0
      })
      let num = ref(0)
      const change = () =>{
          ++num.value
          ++state.count
      }
      return {state , num ,change}
  },
};
</script>

以上代码中count为使用reactive实现响应式数据，num则使用ref实现，可以看到reactive定义数据是对象形式，使用时必须从对象里调用（state.count），而ref可单独定义一个数据使用。

 结果如上图所示，点击add、num和count的数据均会加1。