vue3 学习笔记07 – 定义响应式数据
定义响应式数据主要通过 Vue 3 提供的 reactive、ref 和 computed 这几个 API 来实现
- ref：
用于定义基本类型的响应式数据,如数字、字符串、布尔值等。它返回一个包含响应式数据的对象，通过 .value 访问或修改数据
import { ref } from 'vue';const count = ref(0);// 读取响应式数据console.log(count.value);// 更改响应式数据count.value++;- 在模板中，直接使用 count 而不需要使用 .value 来访问数据。
- reactive:
用于定义一个对象，并使该对象内部所有属性变成响应式的。它返回一个响应式代理对象，可以通过直接访问和修改对象属性来触发视图更新
import { reactive } from 'vue';const state = reactive({count: 0,});// 读取响应式数据console.log(state.count);// 更改响应式数据state.count++; - computed – 具体查看vue3 computed的使用
computed 用于创建一个计算属性，它会根据依赖的响应式数据动态计算返回一个新的值，当依赖数据变化时自动更新。
import { ref, computed } from 'vue';// 定义一个 refconst count = ref(0);// 定义一个 computed 计算属性const doubleCount = computed(() => count.value * 2);const compCount = computed({get() {return count.value + 2;},set(val: number) {count.value = val - 2;},}); - 在组件中使用
<template><div>{{ count }}</div><div>{{ state.count }}</div>
</template><script lang="ts" setup>
import { ref,reactive } from 'vue';
const count = ref(0);
const state = reactive({ count: 0 });
</script>
在每个vue组件中，都去手动引入 ref 和 reactive ,我们可以通过插件来完成自动导入
- 安装插件
npm i unplugin-auto-import -D
- 在 vite.config.ts 中配置
import { defineConfig, loadEnv, UserConfig, ConfigEnv } from 'vite'
export default defineConfig(({ mode }: ConfigEnv): UserConfig => {return {plugins: [vue()],AutoImport({imports: ['vue', '@vueuse/core'],eslintrc: {enabled: false,filepath: './.eslintrc-auto-import.json',globalsPropValue: true},resolvers: [],vueTemplate: true,dts: false // 配置文件生成位置(false:关闭自动生成)// dts: "src/types/auto-imports.d.ts",}),}
})
- tsconfig.json
"include": ["src/**/*.ts","src/**/*.vue","src/types/**/*.d.ts","mock/**/*.ts","vite.config.ts"
],
- 在组件中使用 – 不需要引入
<template><div>{{ count }}</div><div>{{ state.count }}</div>
</template><script lang="ts" setup>
const count = ref(0);
const state = reactive({ count: 0 });
</script>