什么是响应式？

Vue3 的响应式是：当更改响应式对象的值改变时，视图会随即自动更新。

ref()

ref() 返回一个响应式对象，可以用 value 属性来访问或更改对象的值。
ref 对象在模板中会自动解包，用变量名不需要加 .value 就能访问。

1
2
3
4
5
6
7
8
9
10
11

<script setup>
import { ref } from 'vue';

const say = ref('hi'); // 定义值为 hi 的响应式变量 say
say.value = 'hello'; // 把 say 的值改为 hello
</script>

<template>
    <!-- 自动解包，不需要些成 {{ say.value }} -->
    <p>{{ say }}</p>
</template>

reactive()

本文总结 Vue3 组件实例在模板中暴露的常用公共属性和方法，以及对应的 组合式 API 函数。

$data/$props/$options 属性在 组合式 API 下几乎用不到。
$el 不建议用。
$slots 表示父组件所传入插槽的一个对象，很少用，有兴趣可查看官方文档。

$parent

模板中用 $parent 获取父组件实例，可访问父组件用 defineExpose() 显式暴露的绑定。

组合式 API 先在 setup 中用 getCurrentInstance() 获取到当前组件实例，再用 parent 属性访问父组件。getCurrentInstance().parent 除了能访问父组 defineExpose() 暴漏的绑定外，能访问父组件更多的属性和方法，多用于组件的开发，在应用开发中一般不建议用。

1
2
3
4
5

import { getCurrentInstance } from 'vue';

const parent = getCurrentInstance().parent; // 获取父组件的实例
parent.exposed // 访问父组件 defineExpose() 暴露的绑定
parent.refs // 父组件中的模板引用，在模板中用 $parent.$refs

$root

父组件传参数到子组件 - props

在 <script setup> 中用 defineProps() 声明组件的属性，在父组件模板中引用子组件时，就可以给通过属性给子组件传参数（可以是值、变量、函数、对象等）。

defineProps 是编译器宏，Vue3 编译器宏不需要导入，并且只能在 <script setup> 中使用。

ex: 子组件声明、调用属性

1
2
3
4
5
6
7
8
9
10
11
12
13

<!-- HelloWorld.vue 子组件-->
<script setup>
// 声明属性
defineProps([{
    msg: String
}])
</script>

<template>
  <div>
    {{ msg }}
  </div>
</template>

ex: 父组件使用属性

1
2
3
4
5
6
7
8

<!-- Demo.vue 父组件 -->
<script setup>
import HelloWorld from './HelloWorld.vue'
</script>

<template>
  <HelloWorld msg="Welcome"/>
</template>

父组件传递事件到子组件

<script setup> 是在单文件组件 (SFC) 中使用组合式 API 的编译时语法糖。当同时使用 SFC 与组合式 API 时该语法是默认推荐。

基本语法

在 <script> 标签上添加 setup 属性启用该语法，里面的代码会背编译成组件 setup() 函数的内容，每次组件实例被创建时执行。

1
2
3

<script setup>
// 组合式 API 写在这里
</script>

如果要使用 TypeScript，加上 lang="ts" 属性即可。

1
2

<script lang="ts" setup>
</script>

当使用 <script setup> 的时候，任何在 <script setup> 声明的顶层的绑定 (包括变量，函数声明，以及 import 导入的内容) 都能在模板中直接使用。

响应式

响应式即变量数据变化的时候，视图跟着变化。
响应式状态需要明确使用 响应式 API 来创建.
常用 API：

• ref()
• reactive()
• computed()
• watch()
• watchEffect()
• readonly()