前端学习第七周总结笔记

Author： Dracowyn
发布时间：December 20, 2023
746 views
4776 words
Categories：笔记

从这一周开始正式学习Vue相关的知识，之前写的Vue项目或多或少因为部分基础知识的欠缺有些不太合理的地方。

# Vue基础用法

## MVC与MVVM

虽然这一部分已经在大学课程里边学过了，但仍然需要重新学习并加深理解，温故而知新。

MVC 指的是 **Model-View-Controller**（模型-视图-控制器）：

* Model（模型）负责管理程序的数据和业务逻辑。
* View（视图）负责显示用户界面和模型数据。
* Controller（控制器）接收用户的输入，并更新模型和视图。

MVC 模式的主要目标是将业务逻辑（Model）和用户界面（View）分离，这样可以使代码更易于理解和维护，也可以提高代码的复用性。Controller 在这里充当一个中介的角色，处理用户的输入并相应地更新 Model 和 View。

MVVM 指的是 **Model-View-ViewModel（模型-视图-视图模型）**：

* Model（模型）负责管理程序的数据和业务逻辑。
* View（视图）负责显示用户界面和模型数据。
* ViewModel（视图模型）是一个连接 Model 和 View 的桥梁。它可以将 Model 的数据和状态转化成 View 可以显示的形式，并反过来将 View 的更改更新到 Model。

MVVM 模式的主要目标是提供一个更清晰的分层和数据绑定，可以专注于数据的处理，而无需关心用户界面的具体实现。ViewModel 在这里充当一个同步器的角色，它可以自动将 Model 的更改反映到 View 上，反之亦然。

## Vue与MVVM

Vue中数据双向绑定的工作原理：

* 利用花括号 {{ }} 在模板中插入动态数据。当Vue实例（ViewModel）的数据发生变化时，Vue会自动更新与这些数据相关的视图。构建了数据到视图的单向绑定关系。这种技术也被称作 **"数据插值"**。
* 用 v-on (或简写为 @) 指令在视图中绑定事件（比如点击Click事件、输入Input事件等）。当这些事件触发时，可以执行一些操作，比如更新数据。构建了视图到数据的单向绑定关系。
* v-model 指令在Vue中用于实现数据双向绑定。**是 :value 和 @input 的语法糖。**:value 指令用于绑定元素的值到数据，@input 事件用于监听元素的输入事件，并在事件触发时更新数据。
* :value 和 @input 实现数据双向绑定的方式。:input 用于绑定元素的值到数据，@change 事件用于监听元素的改变事件，而不是输入事件。当元素的值发生改变时，@change 事件会触发，并更新数据。

通过数据插值和事件绑定，Vue能够实现数据和视图的双向绑定，即数据改变时视图会自动更新，视图改变时数据也会自动更新。

### Vue的生命周期

创建（Creation）阶段： beforeCreate => created
挂载（Mounting）阶段：beforemount => mounted
更新（Updating）阶段： beforeUpdate => updated
销毁（Destruction）阶段： beforeDestroy => destroyed

1. 创建（Creation）阶段：实例被创建出来。主要的生命周期钩子函数有 `beforeCreate` 和 `created`。
   
   * `beforeCreate`：实例的观察者和生命周期方法已经被设置，但是还没有开始编译模板，也没有开始挂载 DOM，所以这时候无法访问到 data、computed、watch、methods 中的数据和方法。
   * `created`：实例已经完成了数据观测，属性和方法的运算，el 属性目前不可见，未开始 DOM 编译，data 与 methods 已经被 Vue 实例代理。
2. 挂载（Mounting）阶段：实例被插入到 DOM 中。主要的生命周期钩子函数有 `beforeMount` 和 `mounted`。
   
   * `beforeMount`：模板已经编译完成，但是还没有开始挂载到 DOM 中。这个钩子函数在服务器端渲染(SSR)中不被调用。
   * `mounted`：实例已经被挂载到了 DOM 中，你可以访问到 DOM 元素。这个钩子函数在服务器端渲染(SSR)中不被调用。
3. 更新（Updating）阶段：实例的数据发生变化，导致视图需要重新渲染。主要的生命周期钩子函数有 `beforeUpdate` 和 `updated`。
   
   * `beforeUpdate`：数据已经改变，但是 DOM 还没有开始重新渲染。这个钩子函数在服务器端渲染(SSR)中不被调用。
   * `updated`：数据已经改变，并且 DOM 已经完成了重新渲染。这个钩子函数在服务器端渲染(SSR)中不被调用。
4. 销毁（Destruction）阶段：实例被销毁。主要的生命周期钩子函数有 `beforeDestroy` 和 `destroyed`。
   
   * `beforeDestroy`：实例仍然完全可用，但是即将被销毁。
   * `destroyed`：实例已经被销毁，所有的事件监听器已经被移除，所有的子实例也已经被销毁。

## 监听 ｜ 条件 ｜ 循环

1. 监听：
   
   * 数据变化：使用 `watch` 选项或 `computed` 选项来响应数据的变化。`watch` 选项允许执行异步操作或较大开销操作，`computed` 选项允许根据依赖缓存计算属性。
   * 事件：使用 `v-on` 指令（简写为 @）来监听 DOM 事件。例如，`<button v-on:click="counter += 1">Add 1</button>`。
2. 条件：使用 `v-if`、`v-else-if`、`v-else` 和 `v-show` 指令来进行条件渲染。`v-if` 指令用于根据一个表达式的真假值来插入/移除元素，`v-else-if` 和 `v-else` 指令用于 `v-if` 的 else-if 和 else 分支，`v-show` 指令用于根据一个表达式的真假值来切换元素的 display CSS 属性。
   **Vue 2.x 在同一个元素上同时使用 v-for会优先作用 Vue 3.x v-if总是优先于v-for生效**
3. 循环：使用 `v-for` 指令来渲染列表。`v-for` 指令用于根据一个数组或对象来渲染元素列表。

## 内置指令与自定义指令

指令是一些带前缀 v- 的特殊属性。指令属性的值预期是单一 JavaScript 表达式 **（v-for 是例外情况）**。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。Vue 提供了很多内置指令，同时也支持自定义指令。

1. 内置指令：
   
   * `v-bind`：动态地绑定一个或多个特性，或一个组件 prop 到表达式。
   * `v-on`：绑定事件监听器。事件类型由参数指定。表达式可以是方法的名字、或一个内联语句，或省略（如在监听器中，有事件参数时）。
   * `v-if` / `v-else-if` / `v-else`：条件性地渲染一块内容。这块内容只会在指令的表达式返回 truthy 值的时候被渲染。
   * `v-for`：基于源数据多次渲染元素或模板块。
   * `v-show`：根据表达式之真假值，切换元素的 display CSS 属性。
   * `v-model`：在表单控件元素上创建双向数据绑定。
   * `v-pre`：跳过这个元素和它的子元素的编译过程。可以用来显示原始 Mustache 标签。
   * `v-cloak`：这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none } 一起用时，这个指令可以隐藏未编译的 Mustache 标签直到编译结束。
2. 自定义指令：
   Example：

```JavaScript
directives: {
	dragon: {
		update: function() {
			// ……
		}
	}
}
```

```html
// v-dragon
<div v-dragon></div>
```

## 事件v-on

是 Vue 提供的事件监听指令，用于在 Vue 实例中处理 DOM 事件，如点击（click）、键盘输入（keyup）、鼠标移动（mousemove）等等。

基本语法如下：

```html

<button v-on:click="doSomething">Click me</button>
```

## 组件化

是 Vue（和其他现代前端框架）的核心概念之一。组件化可以更好的构建大型应用，通过把整个应用拆分成一些小的、独立的、可复用的组件，使得代码的组织和管理变得更加简单和高效。

1. 一般组件
   在 Vue 3 中，通常使用 `defineComponent` 方法来定义一个组件，Example：

```JavaScript
import { defineComponent } from 'vue'

export default defineComponent({
	name: 'MyComponent',
	setup() {
		// 组件逻辑...
	},
	render() {
		// 组件模板...
		return h('div', 'Hello Dracowyn!')
	}
})
```

2. 动态组件
   在 Vue 3 中，可以使用 `<component>` 元素并配合 `is` 属性来实现动态组件。
   Example：

```JavaScript
import { defineComponent, ref } from 'vue'
import MyComponent1 from './MyComponent1.vue'
import MyComponent2 from './MyComponent2.vue'

export default defineComponent({
	components: {
		MyComponent1,
		MyComponent2
	},
	setup() {
		const currentComponent = ref('MyComponent1')
		// 切换组件的函数
		function toggleComponent() {
			currentComponent.value = currentComponent.value === 'MyComponent1' ? 'MyComponent2' : 'MyComponent1'
		}

return {
			currentComponent,
			toggleComponent
		}
  	}
})
```

在模板中使用：

```html
<template>
	<button @click="toggleComponent">Toggle Component</button>
	<component :is="currentComponent" />
</template>
```

Last modification：December 20, 2023

If you think my article is useful to you, please feel free to appreciate

前端学习第七周总结笔记

Discuz!X3使用UTF8MB4+Inoodb的一些研究

完美解决Discuz!X手机版提示“您访问的页面无手机页面,是否进一步访问电脑版?”的问题

CentOS 7 安装OpenStack教程

宝塔Nginx搭建Nextcloud教程

CentOS/Redhat 升级OpenSSH教程

使用Docker compose快速搭建DVWA+Kail Linux环境

Spring Boot JDBC认证笔记

关于OKR

JavaScript的对象、N关键字、继承S理解笔记

简单使用Axios实现GET、POST等方法封装

前端学习第七周总结笔记