今日-Vue框架

news2024/11/25 10:10:55

什么是VUE框架？

Vue 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。Vue 的核心是一个响应的数据绑定系统，它让数据与 DOM 保持同步非常简单。Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。它不仅易于上手，还便于与第三方库或既有项目整合。Vue 也被称为渐进式框架，因为它可以自底向上逐层应用，适用于不同的项目规模和需求，从简单的页面到复杂的单页应用。Vue 的设计非常注重灵活性和“可以被逐步集成”这个特点。关于定义，这个在很多地方都可以搜的到类似的内容，我觉得有点烦这个定义，简单点理解，就是VUE框架就一个软件或网页的结构，就是大楼的内部的墙体，柱子等，我们需要在这个基础上对这个楼进一步进行装修，精加工，开拓出更多的功能、更加美观、甚至是更加坚固。

VUE框架的架构模式（MVVM）

其实，我觉得和python中的Django框架有点像。

Model（模型）：
- 通常指的是数据层，也就是应用程序的状态。在Vue中，这通常是一个JavaScript对象，它包含了应用程序的数据。在单文件组件中，这个模型位于data函数返回的对象中，或者在Vuex中，它位于state对象中。
View（视图）：
- 在Vue中，视图是通过模板（template）来定义的。模板是HTML代码，它使用Vue的模板语法来声明式地绑定数据和指令，从而将模型的数据展示给用户。
ViewModel（视图模型）：
- 在Vue中，ViewModel的概念被组件本身所取代。组件的data、computed、methods、watch等选项可以看作是ViewModel的一部分，它们定义了如何响应数据变化和如何与视图交互。ViewModel的逻辑部分主要在组件的methods和computed属性中实现。

简单代码示例：

<template>
  <!-- View（视图）: 使用模板语法绑定数据和事件 -->
  <div>
    <h1>{{ message }}</h1>
    <button @click="updateMessage">Change Message</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // Model（模型）: 应用程序的状态
      message: 'Hello, Vue!'
    };
  },
  computed: {
    // ViewModel（视图模型）: 计算属性可以看作是ViewModel的一部分
    reversedMessage() {
      return this.message.split('').reverse().join('');
    }
  },
  methods: {
    // ViewModel（视图模型）: 方法也可以看作是ViewModel的一部分
    updateMessage() {
      this.message = 'Vue is awesome!';
    }
  }
};
</script>

MVVM 模式的工作原理如下：用户与视图进行交互，例如点击按钮、输入文本等。视图将用户的操作传递给视图模型。视图模型根据用户的操作更新模型。模型的变化会触发视图模型的更新。视图模型将更新后的模型数据传递给视图。视图根据新的数据更新自己的显示。这种模式的好处是，它允许开发者将业务逻辑和用户界面分离开来，使得代码更加清晰和易于维护。同时，由于视图和模型之间的通信是通过视图模型进行的，这也使得单元测试变得更加容易。在你的代码示例中，虽然没有直接体现 MVVM 模式的实现，可以通过 Vue 的指令和方法来实现数据的双向绑定和事件处理，这是 MVVM 模式的核心特性之一。说到这里，我更加觉得和python的django框架在特性上很相似。

常见的Vue指令

关于常见的v命令，这里以v-bind、v-on、v-if、v-show、v-model和v-for

v-bind：绑定的是元素的属性，比如超链接href

v-on:

绑定的是方法（函数），经常用于事件监听机制

v-if:

包括v-else-if、v-else,判断是否符合条件以判断是否进行渲染

v-show:

和v-if类似，但是不一样的是v-show是根据条件决定是否通过 CSS 的 display 属性来显示或隐藏元素。元素始终会被渲染，只是不符合条件的元素会被隐藏。

v-model:

在表单元素上创建双向数据绑定，我觉得这个很有意思

v-for:

实现循环渲染数据，比如数组的数据的渲染

VUE的生命周期

提供了一套生命周期钩子（lifecycle hooks），允许我们在不同阶段执行代码。以下是Vue组件的生命周期钩子及其特点：

这个周期一直搞得我很烦啊！我一直很好奇为什么叫钩子？

创建阶段

挂载阶段

更新阶段

销毁阶段这四个大阶段也可以分为八个阶段：

beforeCreate（创建前）：
- 在实例初始化之后，数据观测（data observer）和event/watcher事件配置之前被调用。
- 在这个阶段，组件实例的data、methods、watch等属性还未被初始化，因此不能访问。
created（创建后）：
- 实例已经创建完成之后被调用，此时已经完成了数据观测，属性和方法的运算，watch/event事件回调。
- 这个阶段不能访问$el属性，因为DOM还未被渲染。
- 可以访问data和methods。
beforeMount（挂载前）：
- 在挂载开始之前被调用，相关的render函数首次被调用。
- $el属性对模板的DOM还未生成，挂载阶段还没开始。
- 组件的data已经被设置，但是DOM还未渲染，所以$el不可见。
mounted（挂载后）：
- 实例被挂载后调用，$el属性包含了模板的DOM。
- 可以访问到DOM元素，执行DOM操作。
- 适用于执行依赖于DOM的操作，如使用this.$refs。
beforeUpdate（更新前）：
- 数据更新时调用，发生在虚拟DOM打补丁之前。
- 可以在这个钩子中进一步地更改状态，这不会触发额外的更新循环。
updated（更新后）：
- 由于数据更改导致的虚拟DOM重新渲染和打补丁后调用。
- 可以执行依赖于DOM更新后的操作。
- 此时$el和数据已经更新，可以执行DOM操作。
beforeDestroy（销毁前）：
- 实例销毁之前调用，此时实例仍然完全可用。
- 在这一步，实例仍然连接到父实例，并且$el仍然存在。
- 可以执行清理工作，如解绑事件。
destroyed（销毁后）：
- 实例销毁后调用，调用后，Vue实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。
- 这个阶段实例不可用，$el和数据已经不可访问。
activated 和 deactivated（活动/非活动状态切换）：
- 这两个钩子是专门为<keep-alive>元素设计的。
- activated在组件被激活时调用。
- deactivated在组件被停用时调用。
errorCaptured（错误捕获）：
- 当捕获一个来自子孙组件的错误时被调用。
- 可以访问err（错误对象）、vm（抛出错误的组件实例）和info（包含错误来源信息的字符串）。