vue3的toRefs函数及ref函数

客官°小女子只卖身不卖艺 2022-09-07 06:14 140阅读 0赞

##  toRefs函数 ##

把一个响应式对象转换成普通对象，该普通对象的每个 property 都是一个 ref

应用: 当从合成函数返回响应式对象时，toRefs 非常有用，这样消费组件就可以在不丢失响应式的情况下对返回的对象进行分解使用

问题: reactive 对象取出的所有属性值都是非响应式的

解决: 利用 toRefs 可以将一个响应式 reactive 对象的所有原始属性转换为响应式的 ref 属性

<template>
      <div>
        <h2>toRefs的使用</h2>
        <h3>name: {
       {name}}</h3>
        <h3>age: {
       {age}}</h3>
      </div>
    </template>
    
    <script>
    import { defineComponent, reactive, toRefs } from 'vue'
    
    export default defineComponent({
      setup () {
        const state = reactive({
          name: '123',
          age: 23
        })
    
        // toRefs可以把一个响应式对象转换成普通对象，该普通对象的每个property都是ref
        // 定时器，更新数据（如果数据变化，界面也会随之变化，肯定是响应式的数据）
        setTimeout(() => {
          state.name += '==='
        },1000)
        return {
          ...toRefs(state),
          // ...state   // 不是响应式的数据  {name:'123',age:23}
        }
      }
    })
    </script>

## ref函数 ##

利用ref函数获取组件中的标签元素

功能需求: 让输入框自动获取焦点

<template>
      <div>
        <h2>ref的另一个作用：可以获取页面中的元素</h2>
        <input type="text" ref="inputRef"/>
      </div>
    </template>
    
    <script>
    import { defineComponent, ref, onMounted } from 'vue'
    
    export default defineComponent({
      name: 'App',
      // 需求：当页面加载完毕，页面中的文本框以直接获取焦点（自动获取焦点）
      setup () {
        // 默认是空的，页面加载完毕，说明组件已经存在，获取文本框元素
        const inputRef = ref(null)
        // 页面加载后的生命周期组合Api
        onMounted(() => {
          inputRef.value&&inputRef.value.focus() // 
        })
        return {
          inputRef
        }
      }
    })
    </script>