Vue 3 基础语法进阶：补充知识

引子

Vue.js 作为一种流行的前端框架，以其响应式数据绑定、组件化开发和清晰的语法而著称。深入掌握 Vue 3 的基础语法，可以帮助开发者构建健壮、高效的 web 应用程序。本文将探索一些补充的语法知识，助力你提升 Vue 3 的使用技巧。

对象引用、浅拷贝、深拷贝

1.1 对象的引用赋值

在 JavaScript 中，对象是通过引用进行赋值的，这意味着两个变量指向同一个对象实例。因此，对其中一个变量的修改也会影响另一个变量。

const obj1 = { name: 'John' };
const obj2 = obj1;

obj2.name = 'Jane';

console.log(obj1.name); // 输出：Jane

1.2 浅拷贝

浅拷贝创建一个新对象，其中包含原始对象的所有属性的引用。这意味着对新对象的属性的修改不会影响原始对象，但对原始对象属性的修改会影响新对象。

const obj1 = { name: 'John' };
const obj2 = Object.assign({}, obj1);

obj2.name = 'Jane';

console.log(obj1.name); // 输出：John
console.log(obj2.name); // 输出：Jane

1.3 深拷贝

深拷贝创建一个新对象，其中包含原始对象所有属性的副本。这意味着对新对象的属性的修改不会影响原始对象，对原始对象属性的修改也不会影响新对象。

const obj1 = { name: 'John' };
const obj2 = JSON.parse(JSON.stringify(obj1));

obj2.name = 'Jane';

console.log(obj1.name); // 输出：John
console.log(obj2.name); // 输出：Jane

生命周期钩子

Vue 3 中的生命周期钩子允许开发者在组件生命周期的不同阶段执行自定义逻辑。这为管理组件状态、响应用户交互和优化性能提供了更大的灵活性。

2.1 beforeCreate

在组件实例创建之前调用。适合初始化数据或与其他组件进行交互。

2.2 created

在组件实例创建之后立即调用。适合与 Vuex store 进行交互或执行需要访问组件实例的异步操作。

2.3 beforeMount

在挂载组件到 DOM 之前调用。适合最后修改组件状态或对 DOM 进行操作。

2.4 mounted

在组件挂载到 DOM 之后立即调用。适合与 DOM 交互或进行与 DOM 相关的操作。

2.5 beforeUpdate

在组件更新之前调用。适合在更新组件之前进行数据验证或执行其他操作。

2.6 updated

在组件更新之后立即调用。适合响应组件更新或对 DOM 进行操作。

2.7 beforeDestroy

在组件销毁之前调用。适合清理资源或解除与其他组件的关联。

2.8 destroyed

在组件销毁之后立即调用。适合进行最终的清理操作。

事件处理

Vue 3 提供了多种处理事件的方式，包括：

3.1 v-on 指令

<button @click="handleClick">点击</button>

3.2 JavaScript 事件侦听器

mounted() {
  this.$el.addEventListener('click', this.handleClick);
}

3.3 事件修饰符

<button @click.prevent="handleClick">点击</button>

**修饰符	**
.stop	阻止事件传播
.prevent	阻止默认事件
.capture	使用捕获阶段
.once	触发一次后停止侦听事件

总结

深入理解 Vue 3 基础语法的补充知识，可以提升开发者构建健壮、高效的 web 应用程序的能力。对象引用、生命周期钩子、事件处理等方面的熟练掌握，为开发者提供了更大的灵活性、控制性和可扩展性。

---