vue相关的一些知识总结

前言

这里会记录一些Vue的学习和实践路上的一些琐碎知识的总结，很多东西不用深入去了解，或者简单记录即可，深入了解可以去搜别的开发者的总结。

---

如题所示。

这里会记录学习Vue的时候遇到的一些生涩的词语，进行总结

Vite 和 Vue CLI

两者都是用于构建 Vue.js 应用程序的两种不同的构建工具，简称脚手架。

首先，两者的关系：

• Vite 是由 Vue.js 核心团队开发的下一代前端构建工具，专为现代浏览器进行快速开发而设计。虽然它最初是为 Vue.js 3 开发的，但它实际上是一种通用的构建工具，可以用于构建任何类型的前端项目。
• Vue CLI 是由 Vue.js 官方团队提供的标准化的 Vue.js 项目脚手架工具。它集成了一系列的开发工具和最佳实践，使得创建和管理 Vue.js 项目变得更加简单和高效。

其次，两者的区别：

• 构建方式： Vite 使用现代的 ES 模块原生浏览器构建，利用浏览器的原生 ES 模块支持进行快速开发，不需要预构建。Vue CLI 则使用传统的基于 webpack 的构建方式，将所有模块打包成一个或多个 JavaScript 文件。
• 性能： 由于 Vite 不需要预构建，它在开发过程中可以实现非常快速的冷启动和热更新，因此具有优秀的性能。Vue CLI 在开发时可能会受到 webpack 的瓶颈影响，导致较慢的构建速度。
• 生态系统： 由于 Vue CLI 是 Vue.js 官方提供的脚手架工具，因此有着丰富的插件和社区支持，可以为 Vue.js 项目提供更多的功能和扩展。相比之下，由于 Vite 是相对较新的项目，其生态系统相对较小，但正在迅速增长。
• 用途： Vite 更适合用于开发小型项目或原型，以及对开发速度要求较高的场景。Vue CLI 则更适合用于构建复杂的、生产级别的 Vue.js 应用程序，因为它提供了更多的功能和配置选项。

最后，vue/cli是一个功能很全，生态很好的脚手架，而vite正如它所说的那样，“为开发提供极速响应”，正在被大家所喜爱。

---

单文件组件和多文件组件

两者的区别：

• 单文件组件（Single File Components，SFC）： 单文件组件是 Vue.js 中一种组织代码的方式，它将组件的模板、逻辑和样式都封装在一个单独的 .vue 文件中。这种方式使得组件的代码更加模块化、可维护性更高，并且提供了更好的开发体验。单文件组件通常包括 <template>、<script> 和 <style> 三个部分，分别用于编写组件的模板、逻辑和样式。如这样：

• 多文件页面： 多文件页面通常是指在传统的网页开发中，页面的结构、样式和行为被分别放在不同的文件中。例如，HTML 结构放在一个 .html 文件中，样式放在一个 .css 文件中，JavaScript 逻辑放在一个 .js 文件中。这种方式是传统的网页开发模式，每个页面可能由多个文件组成，但这些文件彼此独立，没有明确的组织方式。如这样：

       缺点：

  1. 模板编写没有提示： 在非单文件组件中，模板通常是写在 HTML 文件中的，没有像单文件组件那样的语法高亮和提示功能，这可能会增加编码的难度和错误的可能性。

  2. 没有构建过程，无法将 ES6 转换成 ES5： 在非单文件组件的情况下，通常也没有使用构建工具来处理 JavaScript 文件，因此无法享受到诸如 Babel 这样的工具将 ES6 转换成 ES5 的便利。

总的来说，单文件组件是一种更现代化、更模块化的组件编写方式，而多文件页面是传统的网页开发模式，单文件组件通常用于构建复杂的前端应用，而多文件页面通常用于传统的网页开发。 

---

prototype 和 Vue.prototype

 这是JavaScript 中每个函数对象都具有的一个属性，它是一个指向原型对象的指针。原型对象是一个普通的 JavaScript 对象，它包含了该函数的共享属性和方法。

当你创建一个对象Person时，JavaScript 自动为该函数创建一个 prototype 属性，并且给它一个指向一个空对象的引用。你可以通过给这个原型对象添加属性和方法来实现函数的共享行为，这样所有通过该函数创建的对象都可以共享这些属性和方法。

function Person(name, age) {
    this.name = name;
    this.age = age;
}
 
// 通过给原型对象添加方法，实现函数的共享行为
Person.prototype.sayHello = function() {
    console.log("Hello, my name is " + this.name + " and I'm " + this.age + " years old.");
};
 
// 创建 Person 的实例
var person1 = new Person("Alice", 30);
var person2 = new Person("Bob", 25);
 
// 调用原型对象上的方法
person1.sayHello(); // 输出：Hello, my name is Alice and I'm 30 years old.
person2.sayHello(); // 输出：Hello, my name is Bob and I'm 25 years old.

总结：new 一个实例时，这个实例对象会继承其构造函数的原型对象上的属性和方法。

而Vue.prototype 是 Vue.js 框架中的一个重要概念，它是 Vue 构造函数的原型对象。通过该原型对象，可以向 Vue 实例添加自定义的属性和方法，这些属性和方法将会对所有的 Vue 实例可用。

通常情况下，我们使用 Vue.prototype 来添加全局方法、属性或者共享数据，例如：

在main.js文件里，这样操作：

Vue.prototype.$confirm = ElementUI.MessageBox.confirm

Vue.prototype.$msgbox = ElementUI.MessageBox

Vue.prototype.$message = ElementUI.Message

之后，在任何 Vue 实例中（组件里），都可以通过 $confirm 来使用element-ui的确认提示弹窗。

总的来说，Vue.prototype 可以用来在 Vue.js 应用中实现全局的定制化需求。

---

native修饰符

“native” 修饰符不是 Vue.js 框架中独有的功能。“native” 修饰符是属于 JavaScript 中的原生事件修饰符，用于将 DOM 事件直接绑定到组件根元素上，而不是在子组件上监听事件。

在 Vue.js 中，“native” 修饰符可以简化事件监听操作，以便更容易地将事件绑定到组件的根元素上。这是因为 Vue.js 默认会自动转换为组件的根元素上相应的标准 DOM 事件。

举例来说，在 Vue.js 中，你可以这样使用 native 修饰符：

<template>
  <my-component @click.native="handleClick"></my-component>
</template>
 
<script>
export default {
  methods: {
    handleClick() {
      console.log('Clicked on my-component');
    }
  }
}
</script>

在这个例子中，我们在<my-compomet>组件上使用了 @click.native来监听原生的点击事件，而不是在组件内部的某个子元素上监听。这意味着点击<my-compomet>组件的根元素时，会触发handleClick方法，而不是子组件里的click。当然并非所有的事件都可以使用 “native” 修饰符，通常只有一些基本的 DOM 事件才会被转换为组件根元素上的事件。

在 Java 中，native关键字用于标识一个方法是由本地代码（通常是用其他语言编写的）实现的，而不是由 Java 代码实现的。这意味着该方法的实现并不在 Java 虚拟机（JVM）中，而是通过调用本地操作系统的方法来执行。当你声明一个方法为native时，你需要提供该方法的实现，通常是通过使用 C 或 C++ 等编程语言来实现。这样的方法通常用于与底层系统交互，例如访问硬件或执行与 Java 无关的操作。

public class MyClass {
    public native void myNativeMethod();
}

在这个例子中，myNativeMethod() 方法被声明为 native，但它的具体实现并没有在 Java 代码中提供，而是在其他本地代码中实现。

总之，虽然 Java 和 Vue.js 中都存在 native，但它们的含义和用法是完全不同的。

---

总结

以上就是本文的所有，后续可能会继续补充。