组合式基础

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 属性时会同时修改对象属性

1	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修改依赖值来修改计算属性
    // ...
  }
})