Vue3-组合式API学习之模板Refs

学习来源

模板Refs

当使用组合式API时，reactive refs 和 template refs的概念已经是统一的。为了获得对模板内元素或组件实例的引用，我们可以像往常一样在setup()中声明一个ref并返回它：

<template>
  <div class="home" ref='root'>
      我是hme元素
  </div>
</template>
<script>
  import {ref,onMounted} from 'vue';
  export default {
    setup(){
      const root = ref(null);

      onMounted(()=>{
        console.log(root.value)    // <div class="home"> 我是hme元素 </div>
      })
    
      return {
        root,
      }
    }
  }
</script>

1. 配合render函数/JSX的用法

1.1 配合render函数

<template>
  <div></div>
</template>
<script>
  import { ref, h } from 'vue';
  export default {
    setup() {
      const root = ref(null);

      return () => h('div', {
        ref: root,
        style: "width:100px;height:100px;background:red;"
      })

    }
  }
</script>

1.2 使用JSX语法

<template>
  <div></div>
</template>
<script>
  import { ref } from 'vue';
  export default {
    setup() {
      const root = ref(null);

      return ()=><div ref = {root} style="width:100px;height:100px;background:blue;"/>
    }
  }
</script>

1.3 ref在v-for中的使用

模板ref在v-for中使用vue没有做特殊处理，需要使用函数型的ref来自定义处理方式：

<template>
  <ul>
    <li v-for="(item,i) in list" :ref="el => { divs[i] = el }" :key="i">
      {{item}}
    </li>
  </ul>
</template>
<script>
  import {ref,reactive,onBeforeUpdate} from 'vue';
  export default{
    setup(){
      const list = reactive([1,2,3]);
      const divs = ref([]);

      // 确保在每次变更之前重置引用
      onBeforeUpdate(()=>{
        divs.value = [];
      })

      return {
        list,
        divs
      }
    }
  }
</script>