Vue3基础——组合式基础

setup函数

setup函数是使用组合式API的位置

export default {
  name: 'MyVue',
  setup() {
    // ...
  }
}

setup函数的返回值是一个对象，其中包含模板使用的变量和函数

<script lang="ts">
export default {
  name: 'MyVue',
  setup() {
    // 定义data，非响应式变量
    let name = "Hello"
    let age = 20
    
    // 定义methods
    function hello() {
      age = 18
      alert(age)
    }

    // 返回一个对象，将变量和函数暴露出去
    // 若返回一个函数，则该函数作为渲染函数使用
    return {
      name,
      age,
      hello
    }
  }
}
</script>

<template>
  <div>{ {name} }</div>
  <div>{ {age} }</div>
  <button @click="hello">你好</button>
</template>

setup函数的生命周期早于data函数和methods函数，因此在data函数和methods函数中通过this可以获取到setup函数返回的对象中的成员，不推荐在使用setup函数时同时使用data函数和methods函数

在script标签上使用setup属性简化，组件名默认为文件名

<script setup>
// 定义data，非响应式变量
let name = "Hello"
let age = 20
    
// 定义methods
function hello() {
  age = 18
  alert(age)
}
</script>

ref函数

用于定义响应式数据，ref函数返回一个Ref<*>对象，通过value属性获取或设置数据

<script setup lang="ts">
import {ref} from 'vue'
// 基本类型与对象类型
let age = ref(20)
let obj = ref({
  name: "Hello"
})
function hello() {
  // 修改数据
  age.value = 23
  obj.value.name = "My"
}
</script>

<template>
  <div>{ {age} }</div>
  <button @click="hello">你好</button>
</template>

reactive函数

用于定义响应式对象类型数据，通过Proxy代理实现

若需要重新赋值对象，应该使用Object.assign()方法，直接赋值会变为非响应式

<script setup lang="ts">
import {reactive} from 'vue'
let obj = reactive({
  name: "Hello"
})
function hello() {
  // 修改对象属性
  obj.name = "My"
}
</script>

<template>
  <div>{ {obj.name} }</div>
  <button @click="hello">你好</button>
</template>

toRefs与toRef

toRefs函数用于对象解构赋值时，将解构的变量变为响应式数据

toRefs函数实际是将对象里的每一个属性都包装为一个ObjectRefImpl对象，修改value属性时会同时修改对象属性

let obj = reactive({
  name: "Hello",
  age: 20
})
let {name, age} = toRefs(obj)
// 调用name.value、age.value操作数据值

toRef将对象中的一个属性变为响应式数据，返回值为ObjectRefImpl对象，修改value属性时会同时修改对象属性

let age = toRef(obj, 'age')

计算属性

使用computed函数定义一个计算属性，类型为ComputedRef<void>

<script setup lang="ts">
import { ref, reactive, computed } from 'vue'
let name = ref("Hello")
let age = ref(20)

// 传入一个函数定义计算过程，返回计算值，该函数称为getter
let total = computed(() => {
  return `${name.value}-${age.value}`
})
</script>

<template>
  <div>
    name: <input v-model="name" /><br/>
    age: <input v-model="age" /><br/>
    total: <span>{ {total} }</span>
  </div>
</template>

定义可写计算属性，返回值为WritableComputedRef<void>类型

let total = computed({
  get() {
    // ...
  },
  set(value) {
    // 使用value修改依赖值来修改计算属性
    // ...
  }
})