vue相关的一些知识总结

鹤渺

已于 2024-04-10 19:16:42 修改

阅读量849

点赞数 28

分类专栏： vue vue学习文章标签： vue.js 前端 javascript

于 2024-03-20 11:45:34 首次发布

本文链接：https://blog.csdn.net/ParkChanyelo/article/details/136811454

版权

vue 同时被 2 个专栏收录

12 篇文章 0 订阅

订阅专栏

vue学习

6 篇文章 0 订阅

订阅专栏

一、前言

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

prototype 和 Vue.prototype

二、Vue 相关知识

如题所示。

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

模版语法

vue的模版语法：插值语法、指令语法

1.插值语法：

功能：用于解析标签体内容。

写法：{{xxx}}，xxx是js表达式，且可以直接读取到data中的所有属性。

例如：<span>项目：{{ project }}     名称：{{name }}</span>

2.指令语法：

功能：用于解析标签（包括：标签属性、标签体内容、绑定事件.....）。

举例：v-bind:href="xxx" 或简写为 :href="xxx"，xxx同样要写js表达式，且可以直接读取到data中的所有属性。(vue2）

备注：Vue中有很多的指令，且形式都是：v-????，此处我们只是拿v-bind举个例子。

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 文件中。这种方式是传统的网页开发模式，每个页面可能由多个文件组成，但这些文件彼此独立，没有明确的组织方式。如这样：
缺点：

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

没有构建过程，无法将 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，但它们的含义和用法是完全不同的。

hook与Mixin

vue的逻辑复用功能：

hook——主要是vue3，是Composition API的一部分，主要通过setup()函数来组织组件逻辑
Mixin——主要用于Vue 2中，是Options API的一部分，将复用的逻辑封装在一个Mixin对象中，并在组件中使用mixins选项引入

两者的区别：

hook：提供了更好的复用性，通过函数式API和组合函数，可以更灵活地组织和复用组件逻辑，组件内部的逻辑更清晰，可以根据需要将相关逻辑放在同一个setup()函数中，使用Composition API中提供的响应式API，比如ref、reactive等，可以更精确地控制响应式数据。

Mixin：提供了一种在多个组件之间共享和复用逻辑的机制，但Mixin在多继承的情况下可能会引起命名冲突和代码结构不清晰的问题，Mixin会影响组件的内部结构，可能导致组件的属性和方法命名冲突，不利于代码的维护和理解，会与组件的数据合并，可能会导致数据污染和不必要的响应式更新。

综上所述，hook提供了更灵活和清晰的组件逻辑编写方式，而Mixin是Vue 2中提供的一种组件复用机制，虽然也可以实现逻辑复用，但容易引起一些问题。

三、学习Vue路过的一些知识

闭包

通俗地说，闭包就是一个函数以及该函数被创建时所能访问到的所有变量的组合。这个函数可以在其定义作用域之外被调用，但仍然可以访问其定义时所处的作用域中的变量。

闭包的特点包括：

内部函数可以访问外部函数的变量。
外部函数的变量被保留在内存中，即使外部函数已经执行完毕。
闭包使得函数具有记忆功能，可以“记住”其被创建时的环境。

以JS写个例子：

function outerFunction(x) {
    // 在外部函数中定义了内部函数 innerFunction
    function innerFunction(y) {
        // 内部函数使用了外部函数的参数 x
        return x + y;
    }
    // 外部函数返回内部函数
    return innerFunction;
}

// 创建一个闭包
var closure = outerFunction(10);
//closure 此时就相当于是：
//function innerFunction(y) {
//    return 10 + y;
//}

// 调用闭包
var result = closure(5);
// 相当于：
//var result = innerFunction(5) {
//    return 10 + 5;
//}
console.log(result); // 输出 15

闭包在vue中也有体现，比如在模版中绑定一个方法，方法里访对data的数据进行操作，在函数外部也可以访问。这种方式使得可以在方法中访问并操作组件的数据，实现了数据和行为的封装与隔离，从而更好地管理和维护代码。

四、总结

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

鹤渺

关注

28
点赞
踩
12

收藏

觉得还不错? 一键收藏
0
评论
vue相关的一些知识总结

这里会记录一些Vue的学习和实践路上的一些琐碎知识的总结，很多东西不用深入去了解，或者简单记录即可，深入了解可以去搜别的开发者的总结。以上就是本文的所有，后续可能会继续补充。Vue 相关知识：Vite 和 Vue CLI单文件组件和多文件组件prototype 和 Vue.prototypenative修饰符
复制链接

扫一扫