数据绑定

数据绑定是Vue的核心特性之一，它允许你将Vue的响应式数据与DOM元素绑定，实现数据与视图的同步。本章节将详细介绍Vue3中的数据绑定方式。

单向数据绑定

单向数据绑定是指数据从数据模型流向视图，当数据发生变化时，视图会自动更新。

1. 插值表达式

语法：

作用：将数据绑定到模板中

示例：

<template>
  <div>
    <h1>{{ message }}</h1>
    <p>{{ count * 2 }}</p>
    <p>{{ user.name }}</p>
  </div>
</template>

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

const message = ref('Hello Vue3!')
const count = ref(0)
const user = reactive({ name: 'John' })
</script>

2. v-bind 指令

语法：v-bind:attribute="expression" 或 :attribute="expression"

作用：绑定HTML属性

示例：

<template>
  <div>
    <img :src="imageUrl" :alt="imageAlt">
    <div :class="{ active: isActive }">Active</div>
    <div :style="{ color: textColor, fontSize: '16px' }">Styled text</div>
  </div>
</template>

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

const imageUrl = ref('https://example.com/image.jpg')
const imageAlt = ref('Example image')
const isActive = ref(true)
const textColor = ref('red')
</script>

双向数据绑定

双向数据绑定是指数据不仅从数据模型流向视图，还从视图流向数据模型，当用户在视图中修改数据时，数据模型也会自动更新。

1. v-model 指令

语法：v-model="expression"

作用：实现双向数据绑定

示例：

<template>
  <div>
    <input v-model="message" type="text">
    <p>{{ message }}</p>
    <input v-model="count" type="number">
    <p>{{ count }}</p>
  </div>
</template>

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

const message = ref('')
const count = ref(0)
</script>

2. v-model 修饰符

lazy：延迟更新，在失去焦点或按下回车键时更新

<template>
  <div>
    <input v-model.lazy="message" type="text">
    <p>{{ message }}</p>
  </div>
</template>

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

const message = ref('')
</script>

number：将输入值转换为数字

<template>
  <div>
    <input v-model.number="count" type="number">
    <p>{{ typeof count }}</p>
  </div>
</template>

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

const count = ref(0)
</script>

trim：去除输入值的首尾空格

<template>
  <div>
    <input v-model.trim="name" type="text">
    <p>{{ name }}</p>
  </div>
</template>

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

const name = ref('')
</script>

响应式数据

在Vue3中，我们使用 ref 和 reactive 来创建响应式数据。

1. ref

作用：创建响应式的基本类型数据

使用方法：

import { ref } from 'vue'

const count = ref(0)
const message = ref('Hello')
const isActive = ref(true)

// 访问值
console.log(count.value)

// 修改值
count.value++

2. reactive

作用：创建响应式的对象或数组

使用方法：

import { reactive } from 'vue'

const user = reactive({
  name: 'John',
  age: 25,
  address: {
    city: 'New York',
    country: 'USA'
  }
})

// 访问值
console.log(user.name)

// 修改值
user.age = 26
user.address.city = 'Los Angeles'

3. toRef 和 toRefs

作用：创建指向响应式对象属性的引用

使用方法：

import { reactive, toRef, toRefs } from 'vue'

const user = reactive({
  name: 'John',
  age: 25
})

// toRef
const nameRef = toRef(user, 'name')
console.log(nameRef.value) // John

// toRefs
const { name, age } = toRefs(user)
console.log(name.value) // John
console.log(age.value) // 25

计算属性

计算属性是基于响应式数据计算出来的值，它会缓存计算结果，只有当依赖的响应式数据发生变化时才会重新计算。

1. 使用计算属性

<template>
  <div>
    <input v-model="firstName" type="text">
    <input v-model="lastName" type="text">
    <p>Full name: {{ fullName }}</p>
  </div>
</template>

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

const firstName = ref('John')
const lastName = ref('Doe')

const fullName = computed(() => {
  return `${firstName.value} ${lastName.value}`
})
</script>

2. 计算属性的 setter

<template>
  <div>
    <input v-model="fullName" type="text">
    <p>First name: {{ firstName }}</p>
    <p>Last name: {{ lastName }}</p>
  </div>
</template>

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

const firstName = ref('John')
const lastName = ref('Doe')

const fullName = computed({
  get: () => `${firstName.value} ${lastName.value}`,
  set: (value) => {
    const [first, last] = value.split(' ')
    firstName.value = first
    lastName.value = last
  }
})
</script>

监听属性

监听属性用于监听响应式数据的变化，当数据发生变化时执行相应的操作。

1. watch

作用：监听响应式数据的变化

使用方法：

<template>
  <div>
    <input v-model="message" type="text">
    <p>{{ message }}</p>
  </div>
</template>

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

const message = ref('Hello')

watch(message, (newValue, oldValue) => {
  console.log(`Message changed from ${oldValue} to ${newValue}`)
})
</script>

2. watchEffect

作用：自动追踪响应式数据的变化

使用方法：

<template>
  <div>
    <input v-model="message" type="text">
    <input v-model="count" type="number">
  </div>
</template>

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

const message = ref('Hello')
const count = ref(0)

watchEffect(() => {
  console.log(`Message: ${message.value}, Count: ${count.value}`)
})
</script>

数据绑定的最佳实践

1. 优先使用单向数据绑定

对于大多数场景，单向数据绑定已经足够，它更加简单和可预测。

2. 合理使用双向数据绑定

双向数据绑定适合用于表单输入场景，它可以简化代码。

3. 使用计算属性处理复杂逻辑

当需要基于响应式数据计算新值时，优先使用计算属性。

4. 合理使用监听属性

当需要在数据变化时执行副作用操作时，使用监听属性。

5. 避免在模板中使用复杂表达式

模板中的表达式应该简单明了，复杂逻辑应该放在计算属性或方法中。

总结

数据绑定是Vue的核心特性，它使得数据与视图的同步变得简单和直观。通过单向数据绑定和双向数据绑定，你可以构建响应式的用户界面；通过计算属性和监听属性，你可以处理复杂的业务逻辑。

在后续的章节中，我们将学习Vue3的指令系统，包括常用指令的使用方法和最佳实践。