- https://www.bilibili.com/video/BV1dS4y1y7vd/?p=3&spm_id_from=pageDriver
- https://blog.csdn.net/qq1195566313/category_11618172.html?spm=1001.2014.3001.5482
- 初始化项目:
npm init vite@latest
# Ref
- 将一个字段包装成响应式的对象
<script setup lang="ts">
// This starter template is using Vue 3 <script setup> SFCs
// Check out https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup
import HelloWorld from './components/HelloWorld.vue'
import {ref, Ref, isRef} from 'vue'
// 通过ref()函数创建响应式对象，返回Ref<T>类型对象
const message: Ref<string> = ref<string>('我是李达康')
const onInputKeyUp = () => {
// 通过.value获取值
console.log(message.value);
// 判断某个对象是否是Ref类型
console.log(isRef(message));
}
</script>
<template>
<img alt="Vue logo" src="./assets/logo.png"/>
<input type="text" v-model="message" @keyup="onInputKeyUp">
{{ message }}
<HelloWorld msg="Hello Vue 3 + TypeScript + Vite"/>
</template>
# Reactive
- 简单类型用ref
- 复杂对象和数组用reactive()
- reactive({})
- reactive([])
<script setup lang="ts">
// This starter template is using Vue 3 <script setup> SFCs
// Check out https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup
import HelloWorld from './components/HelloWorld.vue'
import {ref, Ref, isRef, reactive} from 'vue'
// 通过ref()函数创建响应式对象，返回Ref<T>类型对象
const message: Ref<string> = ref<string>('我是李达康')
// 复杂对象和数组
const user = reactive({
username: '李达康',
age: 18,
// 引用的也是个响应式对象
message: message
})
const users = reactive([user, user])
{{ user }}
<br/>
{{ users }}
image.png
