Vue2.x与Vue3.0 ref的区别

在用Vue3.0重新构建我的个人博客的登录界面时，如图所示。

附上代码图

<el-form
:model="form"
:rules="rules"
ref="ref_form"
>
</el-form>

图中ref="ref_form"的意思是获取el-form元素的属性。我就重点说说这个属性在vue2.0与vue3.0中的区别

什么是ref

ref被用来给元素或子组件注册引用信息。

在Vue2.0中this.$refs直接操作属性值，

<div ref="myRef"></div>
通过this.$refs.myRef来获取组件的实例

Vue3.0

<template>
    <div ref="myRef">获取单个的元素</div>
</template>
<script>
import {  defineComponent,ref,onMounted } from 'vue'
export default defineComponent({
    setup(){
        // 绑定myRef
        const myRef = ref(null)
        onMounted(()=>{
            // 对值进行打印
            console.log(myRef.value)
        })
        return{
            myRef
        }
    }
})
</script>

获取多个DOM元素

<template>
  <div>获取多个DOM元素</div>
  <ul class="list">
    <li v-for="(item, index) in arr" :key="index" :ref="setRef">
      {{ item }}
    </li>
  </ul>
</template>

<script>
import { defineComponent, ref, watch } from 'vue';

export default defineComponent({
  setup() {
    const arr = ref([]);

    for (let i = 0; i < 20; i++) {
      arr.value.push(i);
    }

    // 存储dom数组
    const myRef = ref([]);

    const setRef = el => {
      myRef.value.push(el);
    };

    watch(
      () => myRef.value,
      () => {
        console.dir(myRef.value);
      },
      {
        immediate: true
      }
    );

    return {
      arr,
      setRef
    };
  }
});
</script>

<style lang="less" scoped>
.list {
  width: 300px;
  height: 300px;
  margin: 0 auto;
  overflow-y: auto;
}
</style>

总结

在Vue3.0中，关于$ref的获取$refs

1. 在html中写入ref名称
2. setup中声明该变量
3. return出该数据
4. 通过.value访问到数据 在Vue2.0中，则是
5. 在DOM元素上注册ref
6. 通过this.$ref获取属性