- 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 }}
