wiki►front end

vue 

1
2
3
4
5
6

node -v

npm -v  // 软件安装


html + css + javascript(数据交互)

vue/react - 用于构建用户界面的javascript库 - 封装html + css + javascript


s1: 发送请求获取数据
s2: 处理数据(过滤、整理格式等)
s3: 操作dom呈现页面 - vue/react - 是一个将数据渲染为html视图的开源javascript库且只关注视图
javascript直接操作dom - 浏览器不断重绘重排
html

css

javascript

jquery - javaweb

bootstrap

vueframe - spring

vuecli - springboot


jquery、bootstrap - dhtml

vue - 前后端分离


html - div form(前端的前台)

html - div table(前端的后台)

css - css selector、box、弹性布局

javascript - event、capture、bubble


image-20240425005720372

vue.config.js vite.config.js 简要介绍

vue.config.js 和 vite.config.js 都是用于配置 Vue 项目的文件，但它们针对不同的构建工具和环境。

  1. vue.config.js：这是一个用于配置 Vue CLI 项目的文件。通过修改这个文件，可以对项目的构建过程进行定制化配置，包括Webpack的配置、DevServer的配置、插件的配置等。可以用它来修改默认的Webpack配置、添加自定义的loader、plugin等。

  2. vite.config.js：这是一个用于配置 Vite 项目的文件。Vite是一个新型的前端构建工具，相较于Vue CLI更快速、更轻量。vite.config.js文件用于配置Vite项目的构建过程，可以配置插件、自定义构建规则、代理等。它采用ES Module的方式加载配置，支持热更新，开发体验更加流畅。

总的来说，vue.config.js用于Vue CLI项目的配置，而vite.config.js用于Vite项目的配置，两者都可以帮助开发者根据项目需求进行定制化配置。

ES modules

ES模块是指ECMAScript模块，是一种用于在JavaScript中组织和导入导出代码的标准化模块系统。ES模块允许开发者将代码分割成多个文件，并通过导入和导出语法在不同文件之间共享变量、函数和类等代码。ES模块已经成为现代JavaScript开发中的主流模块化方案，取代了之前的CommonJS和AMD模块系统。

Installing Plugins in an Existing Project$^{[1]}$

When you use vue create to create a new project, some plugins will be pre-installed for you based on your feature selection. In case you want to install a plugin into an already created project, you can do so with the vue add command:

1
vue add eslint

(vue add is specifically designed for installing and invoking Vue CLI plugins. It is not meant as a replacement for normal npm packages. For normal npm packages, you should still use your package manager of choice.)

options_api(vue2)、composition_api(vue3)

在 Vue 2 中，通常使用的是 Options API，它是一种基于选项的方式来编写 Vue 组件。Options API 将组件的属性、生命周期钩子、方法等都放在一个对象中，使得组件的结构相对清晰简单。下面是一个使用 Options API 的简单示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<template>
  <div>
    <h1>{{ message }}</h1>
    <button @click="incrementCount">Click me</button>
    <p>Count: {{ count }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, Vue 2!',
      count: 0
    };
  },
  methods: {
    incrementCount() {
      this.count++;
    }
  }
};
</script>

在上面的示例中，我们使用 Options API 来定义组件的数据和方法。data 选项用于定义组件的数据属性，methods 选项用于定义组件的方法。这种方式在 Vue 2 中非常常见且易于理解。

Options API 的优点包括：

  • 相对简单直观，适合小型项目或初学者
  • 将相关属性和方法放在同一个对象中，便于查看和修改
  • 生命周期钩子函数的定义比较清晰

尽管 Options API 在 Vue 2 中被广泛使用，并且仍然是 Vue 3 中的一部分，但 Vue 3 引入了 Composition API，提供了更灵活、可组合和可重用的方式来编写组件逻辑。

Composition API 是 Vue 3 中引入的新特性，用于更灵活地组织和重用组件逻辑。它提供了一种新的方式来编写组件代码，使得组件更易于理解、维护和测试。下面是一个简单的示例，演示如何在 Vue 3 中使用 Composition API：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<template>
  <div>
    <h1>{{ message }}</h1>
    <button @click="incrementCount">Click me</button>
    <p>Count: {{ count }}</p>
  </div>
</template>

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

export default {
  setup() {
    // 使用 ref 创建响应式数据
    const message = ref('Hello, Vue 3!');
    const count = ref(0);

    // 定义函数来更新数据
    const incrementCount = () => {
      count.value++;
    };

    // 返回响应式数据和函数
    return {
      message,
      count,
      incrementCount
    };
  }
};
</script>

在这个示例中，我们使用了 Composition API 中的 ref 函数来创建响应式数据，并在 setup 函数中定义了一个计数器和一个更新计数器的函数。通过 return 返回这些数据和函数，它们可以在模板中被访问和使用。

Composition API 的优点包括：

  • 更灵活的组织组件逻辑
  • 更好的代码重用性
  • 更容易进行代码拆分和测试
  • 更清晰地分离关注点

使用 Composition API 可以帮助您更好地管理和组织 Vue 3 中的组件代码。

https://www.runoob.com/vue3/vue3-composition-api.html

element plus

1
2
3
4
5
6
7
8
9
10
11
# 选择一个你喜欢的包管理器

# NPM
$ npm install element-plus --save

# Yarn
$ yarn add element-plus

# pnpm
$ pnpm install element-plus

import { ref } from ‘vue’

import { ref } from 'vue' 这行代码是在 Vue 3 中使用 Composition API 的一部分。在 Vue 3 中，Composition API 提供了一种新的方式来组织和重用组件逻辑。ref 是 Composition API 中的一个函数，用于创建一个响应式引用（Reactive Reference）。

当您在 Vue 3 项目中使用 import { ref } from 'vue' 时，您可以在组件中使用 ref 函数来创建响应式数据。这样，当数据发生变化时，Vue 3 可以自动更新相关的视图。

以下是一个简单的示例，演示如何在 Vue 3 组件中使用 ref：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

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

export default {
  setup() {
    // 使用 ref 创建一个响应式数据
    const count = ref(0);

    // 定义一个方法来增加 count 的值
    const increment = () => {
      count.value++;
    };

    return {
      count,
      increment
    };
  }
}
</script>

在这个示例中，我们使用 ref 创建了一个名为 count 的响应式数据，并在 increment 方法中对 count 的值进行增加操作。通过这种方式，Vue 3 可以追踪 count 的变化并更新相关的视图。

dom与虚拟dom

DOM即文档对象模型，它提供了对整个文档的访问模型，将文档作为一个树形结构，树的每个结点表示一个HTML标签或标签内的文本项。DOM树结构精确地描述了HTML文档中标签间的相互关联性。浏览器在解析HTML文档时，会将文档中的元素、注释、文本等标记按照它们的层级关系转换为DOM树。一个元素要想在页面中显示，则必须在DOM中存在该节点，也就是必须将该元素节点添加到现有DOM树中的某个节点下，才能渲染到页面中。同样地，如果需要删除某个元素，也需要从DOM树中删除该元素对应的节点。如果每次要改变页面展示的内容，只能通过遍历查询DOM树，然后修改DOM树，从而达到更新页面的目的，这个过程相当消耗资源。
为了解决这个问题，虚拟DOM概念随着React的诞生而诞生，其由Facebook提出，其卓越的性能很快得到广大开发者的认可。因为每次查询DOM几乎都需要遍历整个DOM树，如果建立一个与DOM树对应的虚拟DOM对象，也就是JavaScript对象，以对象嵌套的方式来表示DOM树及其层级结构，那么每次DOM的修改就变成了对JavaScript对象的属性的操作，由于操作JavaScript对象比操作DOM要快得多，从而可以大幅度减少性能的开支。
Vue从2.0开始也在其核心引入了虚拟DOM的概念，Vue.js 3.x重写了虚拟DOM的实现，从而让性能更加优秀。Vue在更新真实的DOM树之前，先比较更新前后虚拟DOM结构中有差异的部分，然后采用异步更新队列的方式将差异部分更新到真实DOM中，从而减少了最终要在真实DOM上执行的操作次数，提高了页面的渲染效率。

mvc, mvvm

image-20240503172815080

image-20240503173533535

image-20240503181911527

与MVC模式一样，MVVM的主要目的是分离视图（View）和模型（Model），ViewModel层封装了界面展示和操作的属性和接口。通过数据绑定，我们可以将View和ViewModel关联在一起，当ViewModel中的数据发生变化时，View也会同步进行更新，如图所示。

MVVM模式解耦了视图和模型。在模式中，每一个视图都有对应的一个ViewModel，同时ViewModel与模型建立联系。当接收到用户请求后，ViewModel获取模型响应的数据，并通过数据绑定将相应的视图页面重新渲染。模型层的数据只需要传入ViewModel即可实现视图的同步更新，从而实现了视图和模型之间的松散耦合[2]。
与MVC不同的是，MVC是系统架构级别的，而MVVM是用于单页面上的。因此，MVVM的灵活性要远大于MVC。如果将这里的M抛开，只看VVM的话，那这就是一个组件（如treeview）的设计模式。

image-20240503181402315

在处理用户界面时，DOM操作成本是最高的，目前在渲染流程中采用虚拟DOM以降低页面开销，如图所示。

在单向数据绑定中，视图模板和动态数据被渲染成网页后，数据流即中止。之后，由ViewModel接手与View层的数据绑定。View层不可以直接修改Model层的数据，如果需要修改Model层的数据，则由ViewModel发起请求，这中间存在ViewModel和Model之间的数据同步传输。然而，在双向数据绑定中，Model和View始终建立着联系，Model层的数据也一直保持着真实的状态，如图<双向数据绑定>所示。

Vue中最重要的概念就是响应式数据，一方面指衍生数据和元数据之间的响应，通过数据链来实现；另一方面则是指视图与数据之间的绑定。

Vue实例提供了computed计算属性选项，以供开发者生成衍生数据对象。虽然计算属性以函数形式声明，却并不接受参数，也只能以属性的方式调用。由于计算属性的this指向Vue实例，所以它可以获取实例上所有已挂载的可见属性([2]p107)。

是否使用computed选项对视图表现并无影响，但使用了computed之后，组件的代码结构明显清晰了许多，而且即使日后数据的处理方式发生了变化，也只需在选项中修改即可。
与methods一样，computed不能以箭头函数声明，同时它也会被混入Vue实例，并可通过this调用。
由于计算属性依赖于响应式属性，所以当且仅当响应式属性变化时，计算属性才会被重新计算，而且得到的结果将会被缓存，一直到响应式属性再次被修改。相比于使用methods函数求值，这是一种更为高效的机制，如图所示。

image-20240503183326269

每个组件vue实例的data vuex

reference

1

[1] cli.vuejs.org. https://cli.vuejs.org/guide/plugins-and-presets.html#installing-plugins-in-an-existing-project

[2] 刘汉伟, Vue.js从入门到项目实战. 清华大学出版社, 2019.