Vue3 入坑 Chapter 3.1

Vue3 入坑 Chapter 3.1

toRefs

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

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

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

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

示例代码

<template>
  <div class="ToRefsTest">
    <h2>toRefs的使用</h2>
    <h3>name: {{ name }}</h3>
    <h3>age: {{ age }}</h3>

    <hr>

    <h3>name: {{ name2 }}</h3>
    <h3>age: {{ age2 }}</h3>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs } from 'vue'

// 当在外部定义了一个 Hook 时, Hook中有 state, 直接将 ref 对象返回
// eslint-disable-next-line @typescript-eslint/no-unused-vars
function useFeatureX () {
  const state = reactive({
    name2: '自来也',
    age2: 47
  })
  return {
    ...toRefs(state)
  }
}

export default defineComponent({
  name: 'ToRefsTest',
  setup () {
    const state = reactive({
      name: '自来也',
      age: 47
    })
    // toRefs 可以把一个响应式对象转换成普通对象, 该普通对象的每一个 property 都是一个 ref
    // const state2 = toRefs(state)
    const { name, age } = toRefs(state)
    // 定时器, 更新数据, (如果数据变化了, 界面也会随之变化, 肯定是响应式的数据)
    setInterval(() => {
      // state2.name.value += '=='
      name.value += '=='
      console.log('==')
    }, 2000)

    const { name2, age2 } = useFeatureX()
    return {
      // ...state, // 不是响应式数据了 ----> {name: '自来也', age: 47}
      name, age, name2, age2
    }
  }
})
</script>

<style lang="scss" scoped>

</style>

ref获取元素

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

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

<template>
  <div class="RefsTest2">
    <h2>ref的另一个作用: 可以获取页面中的元素</h2>
    <input ref="inputRef" type="text">
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, onMounted } from 'vue'

export default defineComponent({
  name: 'RefsTest2',
  // 需求: 当页面加载完毕后, 页面中的文本框可以直接获取焦点(自动获取焦点)
  setup () {
    const inputRef = ref<HTMLElement | null>(null)
    // 页面加载后的声明周期组合 API
    onMounted(() => {
      inputRef.value && inputRef.value.focus() // 自动获取焦点
    })
    return {}
  }
})
</script>

<style lang="scss" scoped>

</style>