Vue3 基础语法指南：响应式系统与 Ref 应用

1、Reactive 的深度响应式

1.1、基本用法

vue

<script setup>
import { reactive } from 'vue'

const state = reactive({
  count: 0,
  user: {
    name: 'Alice',
    age: 30
  }
})

const increment = () => state.count++
const updateName = () => state.user.name = 'Bob'
</script>

1.2、Todolist 实战

vue

<script setup>
import { reactive } from 'vue'

const state = reactive({
  todos: [
    { id: 1, text: 'Learn Vue3', done: false }
  ],
  newTodo: ''
})

const addTodo = () => {
  state.todos.push({
    id: Date.now(),
    text: state.newTodo,
    done: false
  })
  state.newTodo = ''
}
</script>

2、Ref 的灵活应用

2.1、基础使用

vue

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

const count = ref(0)
const user = ref({ name: 'Alice' })

const increment = () => count.value++
const updateName = () => user.value.name = 'Bob'
</script>

2.2、Ref vs Reactive

使用原则：

javascript

// 基本类型
const num = ref(0)

// 浅层次对象
const user = ref({ name: 'Alice' })

// 深层次对象
const complex = reactive({
  a: { b: { c: 0 } }
})

2.3、标签与组件引用

DOM 元素引用：

vue

<template>
  <h1 ref="title">Hello Vue3</h1>
  <button @click="updateTitle">Update</button>
</template>

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

const title = ref<HTMLHeadingElement>(null)
const updateTitle = () => {
  title.value.style.color = 'red'
  title.value.textContent = 'Updated!'
}
</script>

组件实例引用：

vue

<!-- 父组件 -->
<template>
  <MyComponent ref="child" />
  <button @click="callChildMethod">Call Child</button>
</template>

<script setup>
import MyComponent from './MyComponent.vue'
import { ref } from 'vue'

const child = ref()
const callChildMethod = () => {
  child.value.sayHello()
  console.log(child.value.count)
}
</script>

<!-- 子组件 -->
<script setup>
import { ref, defineExpose } from 'vue'

const count = ref(0)
const sayHello = () => console.log('Hello!')

defineExpose({
  count,
  sayHello
})
</script>

总结对比

通过合理运用这些特性，可以构建出更高效、更易维护的 Vue3 应用。