前端面试十二之vue3基础-EW帮帮网

一、ref和reactive

在 Vue 3 中，ref 和 reactive 是两种主要的响应式数据创建方式，它们各有特点和适用场景。

1.ref

ref 主要用于创建单个值的响应式引用，通常用于基本类型数据，如数字、字符串等。使用 ref 创建的引用对象可以通过 .value 属性访问内部的值。例如：

import { ref } from 'vue';

const count = ref(0); // 创建一个初始值为 0 的响应式引用
console.log(count.value); // 输出 0
count.value++; // 修改引用对象的值
console.log(count.value); // 输出 1

ref 创建的数据是被追踪的，但是只有在访问 .value 属性时才会触发依赖追踪。

2.reactive

reactive 主要用于创建包含多个属性的响应式对象，通常用于创建对象。使用 reactive 创建的响应式对象直接访问属性，并进行修改，就像操作普通 JavaScript 对象一样。例如：

import { reactive } from 'vue';

const person = reactive({
  name: 'John',
  age: 30
});

console.log(person.name); // 输出 'John'
console.log(person.age); // 输出 30

person.name = 'Jane'; // 修改对象的 name 属性的值为 'Jane'
person.age = 25; // 修改对象的 age 属性的值为 25

console.log(person); // 输出 { name: 'Jane', age: 25 }

reactive 创建的对象及其内部属性都是被完全追踪的，当任何属性被修改时，所有依赖于这些属性的视图都会自动更新。

3.应用场景

如果你只需要管理单个值的响应性，或者需要在模板中使用响应式数据，那么 ref 是一个不错的选择。
如果你需要创建包含多个属性的对象，并且希望这些属性都是响应式的，那么 reactive 更适合用于创建对象。

4.总结

ref 和 reactive 在 Vue 3 中是两种不同的响应式数据创建方式，它们各有特点和适用场景。根据具体需求选择合适的方式来管理组件中的数据，将会让你的代码更加清晰和易于维护。

二、属性绑定与事件绑定

在 Vue 3 中，属性绑定和事件绑定是将数据和事件处理逻辑与模板连接起来的重要方式。它们使得在模板中可以直接使用组件的属性和监听事件，从而实现动态的用户界面。

属性绑定（Property Binding）

属性绑定允许你将组件的属性动态地绑定到模板中的元素或组件上。这可以通过使用 v-bind 指令（通常缩写为 :）来实现。

事件绑定（Event Binding）

事件绑定允许你在模板中监听 DOM 事件或组件事件，并将它们连接到组件的方法上。这可以通过使用 v-on 指令（通常缩写为 @）来实现。

<template>
  <div>
    <!-- 文本内容的属性绑定 -->
    <p :text="message"></p>

    <!-- 图片 src 属性的绑定 -->
    <img :src="imageUrl" alt="Description">

    <!-- 数据更新按钮，点击时修改 message -->
    <button @click="updateMessage">Change Message</button>
  </div>
</template>

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

// 定义响应式数据
const message = ref('Hello Vue 3');
const imageUrl = ref('https://example.com/image.jpg');

// 更新 message 的函数
function updateMessage() {
  message.value = 'Updated message in Vue 3!';
}
</script>

三、表单绑定

在 Vue 3 中，表单绑定是一个常见的需求，用于将表单元素（如 <input>、<select>、<textarea> 等）与组件的数据进行双向绑定。Vue 3 提供了灵活的表单绑定方法，包括 v-model 指令和 v-model 的使用方式。

1.v-model 指令

v-model 是 Vue 3 中用于实现双向数据绑定的特殊指令。它自动将表单元素的值与组件的数据属性进行同步。

<template>
  <div>
    <!-- 文本输入 -->
    <input v-model="message" placeholder="Type something..." />

    <!-- 复选框 -->
    <input type="checkbox" v-model="checked" />

    <!-- 单选按钮 -->
    <input type="radio" value="one" v-model="picked" />
    <input type="radio" value="two" v-model="picked" />

    <!-- 选择框 -->
    <select v-model="selected">
      <option disabled value="">Please select one</option>
      <option>A</option>
      <option>B</option>
      <option>C</option>
    </select>

    <!-- 输出 -->
    <p>Message: {{ message }}</p>
    <p>Checked: {{ checked }}</p>
    <p>Picked: {{ picked }}</p>
    <p>Selected: {{ selected }}</p>
  </div>
</template>

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

const message = ref('');
const checked = ref(false);
const picked = ref('one');
const selected = ref('');
</script>

2.修饰符

Vue 3 为 v-model 提供了一些修饰符，以增强其功能：

.lazy：在默认情况下，v-model 在每次 input 事件触发时更新数据。使用 .lazy 修饰符可以改为在 change 事件触发时更新。
.number：自动将用户的输入值转换为数值类型。

.trim：自动过滤用户输入的首尾空格。

<template>
  <div>
    <!-- 默认情况下，每次 input 事件触发时更新 -->
    <input v-model="message" placeholder="Type something..." />

    <!-- 使用 .lazy 修饰符，在 change 事件触发时更新 -->
    <input v-model.lazy="messageLazy" placeholder="Type something..." />

    <!-- 使用 .number 修饰符，自动转换为数值类型 -->
    <input v-model.number="age" type="number" />

    <!-- 使用 .trim 修饰符，自动过滤首尾空格 -->
    <input v-model.trim="messageTrim" placeholder="Type something..." />
  </div>
</template>

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

const message = ref('');
const messageLazy = ref('');
const age = ref(0);
const messageTrim = ref('');
</script>

四、计算属性

在 Vue 3 中，计算属性（Computed Properties）是一种声明式的方法，用于声明性地描述一个值是如何根据组件的响应式数据计算得来的。计算属性是基于它们的响应式依赖进行缓存的，只有当相关响应式数据发生变化时，计算属性才会重新计算。

<template>
  <div>
    <p>Message: {{ message }}</p>
    <p>Reversed Message: {{ reversedMessage }}</p>
  </div>
</template>

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

const message = ref('Hello Vue 3');

// 定义计算属性
const reversedMessage = computed(() => {
  return message.value.split('').reverse().join('');
});
</script>

计算属性的选项

computed 函数可以接受一个选项对象，其中包含 get 和 set 函数：

get 函数：用于计算属性的值。

set 函数（可选）：用于设置属性的值，这使得计算属性也可以是可写的。

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

const message = ref('Hello Vue 3');

// 定义可写的计算属性
const reversedMessage = computed({
  get: () => {
    return message.value.split('').reverse().join('');
  },
  set: (newValue) => {
    message.value = newValue.split('').reverse().join('');
  }
});
</script>

前端面试十二之vue3基础