第III章-ⅠVue3进阶语法-易微帮

vue3进阶语法

setup 函数
Vue方法计算属性及监听器
- methods方法
computed计算属性
- - ref函数
watch 监听器
Vue的表单绑定
- v-model实现表单绑定
- v-model修饰符

setup 函数

Vue 3 引入了组合式 API，其中核心是 setup 函数。这个函数是组件中所有 Composition API 特性的入口点。

组织逻辑：setup 函数允许开发者更灵活地组织代码，将相关功能逻辑组合在一起，而不是分散在 data, methods, computed 等选项中。
复用逻辑：通过使用 Composition API，开发者可以更容易地提取和复用逻辑，尤其是跨组件的逻辑。
更好的 TypeScript 集成：setup 函数提供了更好的类型推断，使得与 TypeScript 的集成更为紧密和有效。

<script setup>
</script>

Vue方法计算属性及监听器

methods方法

用于定义组件的功能方法，可以在模板中通过事件绑定或直接调用。

<template>
    <button @click="handleClick">Click Me</button>
</template>

<script setup>
function handleClick() {
    console.log("Button clicked.");
}
</script>

在这里，handleClick 方法通过 @click 绑定到按钮的 click 事件。区别：在 Vue 3 中，methods 方法可以通过组合式 API 中的 setup 函数直接定义。这与 Vue 2 中通过选项 API 定义 methods 略有不同。

computed计算属性

用于定义具有缓存机制的属性，其值由其他响应式数据派生。

<template>
    <div>{{ fullName }}</div>
</template>

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

const firstName = ref("John");
const lastName = ref("Doe");

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

在这里，fullName 是一个计算属性，它通过 computed 方法定义并由 firstName 和 lastName 变量派生。区别：Vue 3 中的 computed 使用组合式 API 进行定义，而 Vue 2 中是通过选项 API 的 computed 属性进行定义。

ref函数

ref 用于创建一个响应式的引用对象，其主要用途是维持一个内部值，并确保 Vue 的响应式系统能够追踪到其变化。当你在组件中使用 ref 时，你可以将普通类型（如字符串、数字、布尔值）转换成响应式对象。这个响应式对象有一个名为 value 的属性，用来存储其实际的值。它将普通 JavaScript 值转换为响应式对象，使其能够在 Vue 组件中进行双向绑定、依赖追踪等响应式操作。

const count = ref(0);
count.value = 1; // 更新响应式状态

count 是一个响应式引用，通过修改 count.value，Vue 的响应式系统能够捕捉到这一变化并相应地更新 UI。
提示：在模板中直接使用 count 而不是 count.value，Vue 自动处理了解包。在 JavaScript 代码中 Vue 不会自动解包 ref，你需要显式地通过 .value 属性来操作它的值。

watch 监听器

用于监听一个或多个响应式数据，并在数据变化时触发特定逻辑。

<template>
    <div>{{ count }}</div>
</template>

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

const count = ref(0);

watch(count, (newValue, oldValue) => {
    console.log(`Count changed from ${oldValue} to ${newValue}`);
});

function increment() {
    count.value += 1;
}
</script>

在这里，watch 监听了 count 变量，并在其变化时记录新旧值。区别：Vue 3 中的 watch 使用组合式 API 定义，而 Vue 2 中是通过选项 API 的 watch 属性定义。

Vue的表单绑定

v-model实现表单绑定

用于将输入控件与响应式数据绑定，从而实现双向数据绑定。

<template>
    <input v-model="name" />
    <p>{{ name }}</p>
</template>

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

const name = ref("");
</script>

在这里，v-model 绑定了输入框的值与 name 变量，实现了双向数据绑定。区别：Vue 3 中的 v-model 支持多种形式，可以绑定多个属性，例如：

<input v-model:name="userName" />
<input v-model:email="userEmail" />

v-model修饰符

.lazy：仅在输入框失去焦点时更新变量：

<input v-model.lazy="name" />

在这里，name 变量仅在输入框失去焦点时更新。

.number：自动将输入转换为数值：

<input v-model.number="age" />

在这里，age 变量会自动转换为数值。

.trim：自动去除输入的空白字符：

<input v-model.trim="username" />

在这里，username 变量会自动去除输入的空白字符。
v-model 修饰符在 Vue 3 和 Vue 2 中的作用一致，但 Vue 3 提供了更灵活的多属性绑定方式。

第III章-ⅠVue3进阶语法