vue全局过滤器(vue全局过滤器格式化数据)

vue骚作之this.$options(个人笔记)

过滤器被用于一些常见的文本格式化，被添加在表达式的尾部，由“管道”符号指示。

vue全局过滤器(vue全局过滤器格式化数据)

vue全局过滤器(vue全局过滤器格式化数据)

试想一个场景，不仅模板内用到这个函数，在 mod 里也需要同样功能的函数。但过滤器无法通过 this 直接引用，难道要在 mods 再定义一个同样的函数吗？

要知道，选项配置都会被存储在实例的 $options 中，所以只需要获取 this.$options.filters 就可以拿到实例中的过滤器。豁然开朗.jpg

除了能获取到实例的过滤器外，还能获取到全局的过滤器，因为 this.$options.filters 会顺着 proto 向上查找，全局过滤器就存在原型中。

在vue单文件组件里有时需要重置data中的数据，比如表单填写一半，用户想重新填写。

也可以通过给组件 $data 对象赋值来重置来重置整个 $data 。

vue自定义指令（过滤器/函数）保留小数点后两位

一、自定义指令

1.在mainjs中写入

2.使用方法

或者

1.在mainjs中写入

2.使用方法

二、过滤器 （全局数据，不适用于input 的v-model）

1.在mainjs中注册

二、在assets/js中新建 filters.js

三、使用方法

三、函数 保留两位小数，不够自动用零补齐

1.在mainjs中引入注册

二、在assets/js中新建 公共js文件filters.js

三、使用方法

Vue之在mods中使用filter的方法

Vue之在mods中使用filter的方法

全局定义filter

在main.js或者其他定义全局filter

那当然，也可以在当前组件中定义filter，这是针对当前组件使用的。

在html使用filter

基本使用

过滤器可以串联：

过滤器是 JaScript 函数，因此可以接收参数：

在mods使用filter

React 18 发布、Vue 3、Vitest、Pinia 正式成为 Vue 的状态

Pinia 终于转正了，它具有与 Vuex 5 几乎完全相同或者增强的 API，简单来说，它就是和 Vuex 5 名字不同。Vuex 3 和 4 仍会继续维护，但是新功能不太可能会添加了。Pinia 也支持渐进式迁移，Vuex 和 Pinia 可以安装在同一个项目中，新项目的话建议直接使用 Pinia。

Vite 发布了 v2.9.0。

React 18 终于发布了，团队从 v16 就开始普及并发概念，到正式版发布时难免少了一些新鲜感。照目前的发展趋势看，React 未来会朝着前端底层“作系统”的方向发展，会变得越来越复杂。这些复杂的作又会被元框架(Next.js、Remix)消化掉，开发者并不会直接接触，使用这些元框架开发即可。

稳定不停滞，支持增量升级，v5、v6 的版本代码可以同时存在。

下面是其他的发布信息和 TC39 提案的一些推进情况，大家可以找感兴趣的自行查阅。

下面我们来看技术资料。

和卡颂一起在做的项目： 前端赏金猎人 。

这是一个用单纯的金钱关系维系的前端学习社区，悬赏答题 + 答题赚钱。

期待你的加入，如果觉得有价值的话，可以给个 Star 鼓励一下。

把技术名词的大小写拼写正确是基本的素养，但很多人都不重视，这个项目可以帮助你纠正错误的大小写。

免费的编程中文书籍索引，项目已有 90.1k Star。

从 2008 年谷歌浏览器推出至今的 100 个精彩瞬间回 忆录。

在这里插入描述

Pinia 是 Vue.js 的轻量级状态管理库，最近很受欢迎。它使用 Vue 3 中的新反应系统来构建一个直观且完全类型化的状态管理库。

Pinia的成功可以归功于其管理存储数据的独特功能（可扩展性、存储模块组织、状态变化分组、多存储创建等）。

另一方面，Vuex也是为Vue框架建立的一个流行的状态管理库，它也是Vue核心团队的状态管理库。 Vuex高度关注应用程序的可扩展性、开发人员的工效和信心。它基于与Redux相同的流量架构。

在这篇文章中，我们将对Pinia和Vuex进行比较。我们将分析这两个框架的设置、社区优势和性能。我们还将看一下Vuex 5与Pinea 2相比的新变化。

Pinia 设置

Pinia 很容易上手，因为它只需要安装和创建一个store。

要安装 Pinia，您可以在终端中运行以下命令：

该版本与Vue 3兼容，如果你正在寻找与Vue 2.x兼容的版本，请查看v1分支。

Pinia是一个围绕Vue 3 Comition API的封装器。因此，你不必把它作为一个插件来初始化，除非你需要Vue devtools支持、SSR支持和webpack代码分割的情况：

在上面的片段中，你将Pinia添加到Vue.js项目中，这样你就可以在你的代码中使用Pinia的全局对象。

为了创建一个store，你用一个包含创建一个基本store所需的states、actions和getters的对象来调用 defineStore 方法。

Vuex 也很容易设置，需要安装和创建store。

要安装Vuex，您可以在终端中执行以下命令：

要创建store，你可以使用包含创建基本store所需的states、actions和 getter 的对象调用 createStore 方法：

要访问 Vuex 全局对象，需要在 Vue.js 项目根文件中添加 Vuex，如下所示：

使用 Pinia，可以按如下方式访问该store：

请注意，在访问其属性时省略了 store 的 state 对象。

使用Vuex，可以按如下方式访问store：

这两个状态管理库都相当容易学习，因为它们在 YouTube 和第三方博客上都有很好的文档和学习资源。对于以前有使用 Redux、MobX、Recoil 等 Flux 架构库经验的开发人员来说，他们的学习曲线更容易。

这两个库的文档都很棒，并且以对经验丰富的开发人员和新开发人员都友好的方式编写。

Pinia和Vuex都非常快，在某些情况下，使用Pinia的web应用程序会比使用Vuex更快。这种性能的提升可以归因于Pinia的极轻的重量，Pinia体积约1KB。

尽管Pinia是在Vue devtools的支持下建立的，但由于Vue devtools没有暴露出必要的API，所以一些功能如时间旅行和编辑仍然不被支持。当开发速度和调试对你的项目来说更重要时，这是值得注意的。

Pinia 将这些与 Vuex 3 和 4 进行了比较：

这些是Pinia在其状态管理库和Vuex之间的比较中提出的额外见解：

将 Pinia 2（目前处于 alpha 阶段）与 Vuex 进行比较，我们可以推断出 Pinia 领先于 Vuex 4。

Vue.js核心团队为Vuex 5制定了一个开放的RFC，类似于Pinia使用的RFC。目前，Vuex通过RFC来尽可能多地收集社区的反馈。希望Vuex 5的稳定版本能够超越Pinea 2。

据同时也是 Vue.js 核心团队成员并积极参与 Vuex 设计的 Pinia 的创建者（Eduardo San Martin Morote）所说，Pania 和 Vuex 的相似之处多于不同之处：

尽管 Pinia 足以取代 Vuex，但取代 Vuex 并不是它的目标，因此 Vuex 仍然是 Vue.js 应用程序的状态管理库。

根据我的个人经验，由于Pinea是轻量级的，体积很小，它适合于中小型应用。它也适用于低复杂度的Vue.js项目，因为一些调试功能，如时间旅行和编辑仍然不被支持。

将 Vuex 用于中小型 Vue.js 项目是过度的，因为它重量级的，对性能降低有很大影响。因此，Vuex 适用于大规模、高复杂度的 Vue.js 项目。

批处理是 React将多个状态更新分组到单个重新渲染中以获得更好的性能。

例如，如果你在同一个点击中有两个状态更新，React 总是将它们分批处理到一个重新渲染中。如果你运行下面的代码，你会看到每次点击时，React 只执行一次渲染，尽管你设置了两次状态：

这对性能非常有用，因为它避免了不必要的重新渲染。它还可以防止你的组件呈现仅更新一个状态变量的“半完成”状态，这可能会导致错误。

这可能会让你想起餐厅服务员在你选择道菜时不会跑到厨房，而是等你完成订单。

然而，React 的批量更新时间并不一致。例如，如果你需要获取数据，然后更新handleClick上面的状态，那么 React不会批量更新，而是执行两次的更新。

这是因为 React 过去只在浏览器（如点击）期间批量更新，但这里我们在已经被处理（在 fetch 回调中）之后更新状态：

在 React 18 之前，我们只在 React 处理程序期间批量更新。默认情况下，React 中不会对 promise、setTimeout、本机处理程序或任何其他中的更新进行批处理。

从 React 18 开始createRoot，所有更新都将自动批处理，无论它们来自何处。

这意味着超时、承诺、本机处理程序或任何其他内的更新将以与 React 内的更新相同的方式进行批处理。

我们希望这会导致更少的渲染工作，从而在你的应用程序中获得更好的性能：

注意：作为采用 React 18 的一部分，预计你将升级到createRoot。旧行为的render存在只是为了更容易地对两个版本进行生产实验。

无论更新发生在何处，React 都会自动批量更新，因此：

行为与此相同：

通常，批处理是安全的，但某些代码可能依赖于在状态更改后立即从 DOM 中读取某些内容。对于这些用例，你可以使用ReactDOM.flushSync()选择退出批处理：

2、Suspense 的 SSR 支持

这基本上是端渲染 (SSR) 逻辑的扩展。在典型的 React SSR 应用程序中，会发生以下步骤：

典型 SSR 应用程序的问题在于，在下一步可以开始之前，必须立即完成整个应用程序的每个步骤。这会使您的应用程序在初始加载时变慢且无响应。

React 18 正试图解决这个问题。 组件已经以这样的方式进行了革命性的改变，它将应用程序分解为更小的单元，这些单元经过提到的每个步骤。这样一旦用户看到内容，它就会变成互动的。

我们将状态更新分为两类：

单击、悬停、滚动或打字等紧急更新需要立即响应以匹配我们对物理对象行为方式的直觉。否则他们会觉得“错了”。

然而，转换是不同的，因为用户不希望在屏幕上看到每个中间值。

例如，当您在下拉列表中选择过滤器时，您希望过滤器按钮本身在您单击时立即响应。但是，实际结果可能会单独转换。

一个小的延迟是难以察觉的，而且通常是预料之中的。如果在结果渲染完成之前再次更改过滤器，您只关心看到最新的结果。

在典型的 React 应用程序中，大多数更新在概念上都是过渡更新。但出于向后兼容性的原因，过渡是可选的。

默认情况下，React 18 仍然将更新处理为紧急更新，您可以通过将更新包装到startTransition.

构建流畅且响应迅速的应用程序并不总是那么容易。有时，诸如单击按钮或输入输入之类的小动作可能会导致屏幕上发生很多事情。这可能会导致页面在所有工作完成时冻结或挂起。

例如，考虑在过滤数据列表的输入字段中键入。您需要将字段的值存储在 state 中，以便您可以过滤数据并控制该输入字段的值。您的代码可能如下所示：

在这里，每当用户键入一个字符时，我们都会更新输入值并使用新值来搜索列表并显示结果。

对于大屏幕更新，这可能会导致页面在呈现所有内容时出现延迟，从而使打字或其他交互感觉缓慢且无响应。

即使列表不是太长，列表项本身也可能很复杂并且每次击键时都不同，并且可能没有明确的方法来优化它们的呈现。

从概念上讲，问题在于需要进行两种不同的更新。个更新是紧急更新，用于更改输入字段的值，以及可能会更改其周围的一些 UI。

第二个是显示搜索结果的不太紧急的更新。

用户希望次更新是即时的，因为这些交互的本机浏览器处理速度很快。但是第二次更新可能会有点延迟。

用户不希望它立即完成，这很好，因为可能有很多工作要做。（实际上，开发人员经常使用去抖动等技术人为地延迟此类更新。）

在 React 18 之前，所有更新都被紧急渲染。

这意味着上面的两个状态仍然会同时呈现，并且仍然会阻止用户看到他们交互的反馈，直到一切都呈现出来。我们缺少的是一种告诉 React 哪些更新是紧急的，哪些不是的方法。

新startTransitionAPI 通过让您能够将更新标记为“转换”来解决此问题：

包装在其中的更新startTransition被视为非紧急处理，如果出现更紧急的更新（如点击或按键），则会中断。

如果用户中断转换（例如，连续输入多个字符），React 将抛出未完成的陈旧渲染工作，仅渲染最新更新。

Transitions 可让您保持大多数交互敏捷，即使它们导致显着的 UI 更改。它们还可以让您避免浪费时间渲染不再相关的内容。

上述问题的一个常见解决方案是将第二次更新包装在 setTimeout 中：

这将延迟第二次更新，直到呈现次更新之后。节流和去抖动是这种技术的常见变体。

一个重要的区别是startTransition不安排在以后喜欢的setTimeout是。它立即执行。传递给的函数startTransition同步运行，但其中的任何更新都标记为“转换”。

React 将在稍后处理更新时使用此信息来决定如何呈现更新。这意味着我们比在超时中包装更新更早地开始呈现更新。

在快速设备上，两次更新之间的延迟非常小。在较慢的设备上，延迟会更大，但 UI 会保持响应。

另一个重要的区别是 a 内的大屏幕更新setTimeout仍然会锁定页面，只是在超时之后。

如果用户在超时触发时仍在键入或与页面交互，他们仍将被阻止与页面交互。但是标记为 的状态更新startTransition是可中断的，因此它们不会锁定页面。

它们让浏览器在呈现不同组件之间的小间隙中处理。

如果用户输入发生变化，React 将不必继续渲染用户不再感兴趣的内容。

，因为setTimeout只是延迟更新，显示加载指示器需要编写异步代码，这通常很脆弱。

通过转换，React 可以为您跟踪挂起状态，根据转换的当前状态更新它，并让您能够在用户等待时显示加载反馈。

您可以使用startTransition来包装要移动到后台的任何更新。通常，这些类型的更新分为两类：

总结

React 18 没有任何重大更改，因此，我们将当前的存储库升级到最新版本几乎不需要更改代码，但我们可以享受它们很酷的功能。

【vue】插件

插件通常用来为 Vue 添加 全局功能 ，所谓全局即不需要像组件那样，每次使用他前都需要先引入一次。对于插件只要在 最开始引入一次，在任何组件就可以直接使用 。（类似于我们在window上添加的方法属性那样，任何地方都可以用）

下面几种常见的用途：

主要两种使用方式

一：全局引入方式

（1）使用步骤

通过全局方法 Vue.use() 使用插件。它需要在你调用 new Vue() 启动应用之前完成

也可以传入一个可选的选项对象：

（2）在main.js中配置

比如：使用element-ui为例：

组使用件中

二：组件引入方式

比如，以使用 swiper为例

组件中使用

vue插件其实就是一个简单的 js对象而已 ，然后这个插件对象有一个公开属性 install ，他的值为一个函数，此函数接受两个参数。个参数是 Vue 构造器 , 第二个参数是一个可选的选项对象。

一：开发插件有四种方法

二：添加实例方法

其中最常用的：【4. 添加实例方法】的写法和使用方法，下面举例说明toast 最简单插件开发过：

（1）新建一个plugin目录，编辑插件toast.js文件

（2）在 main.js 中，需要导入 toast.js 并且通过全局方法 Vue.use() 来使用插件

（3）我们在组件中来获取该插件定义的 $msg 属性，比如在根组件App.vue中

控制台输出：Hello World

三：添加全局资源

这里主要介绍过滤器

（1）在plugin目录新建插件filter.js文件

（2）在 main.js 中，需要导入 filter.js 并且通过全局方法 Vue.use() 来使用插件

（3）HelloWorld.vue页面上使用

添加全局资源也可以不放在插件里面实现，可以直接在main.js入口文件创建Vue实例前添加：

其他组件就可以通过this直接使用:

（1）核心区别

简单来说，插件就是指对Vue的功能的增强或补充。

（2）其他区别

一个Vue插件可以是一堆Vue组件的（插件干的事就是把内部的组件帮你倒入到vue全局下），也可以是用来扩展Vue功能的，比如 Vuex， Vue-Router。

测试完成，下面就要把的内容打包发布到npm 上去,具体步骤可以参照

20《Vue 入门教程》Vue 插件

本节我们将介绍 Vue 的插件。包括什么是插件、如何使用插件、如何编写一个简单的插件。其中，编写和使用插件是本节的重点。本节我们将带领大家写一个简单的插件示例，同学们在学完本节后可以尝试编写其他的插件来加深学习。

Vue 插件是对 Vue 全局功能的扩展，他可以给 Vue 添加全局方法、属性、组件、过滤器、指令等等。

通过全局方法 Vue.use () 使用插件。它需要在你调用 new Vue () 启动应用之前完成：

也可以传入一个可选的选项对象：

Vue.use 会自动阻止多次注册相同插件，即使多次调用也只会注册一次该插件。 Vue.js 提供的一些插件 (例如 vue-router) 在检测到 Vue 是可访问的全局变量时会自动调用 Vue.use ()。然而在像 CommonJS 这样的模块环境中，你应该始终显式地调用 Vue.use ()：

awesome-vue 了大量由社区贡献的插件和库。

Vue.js 的插件应该暴露一个 install 方法。这个方法的个参数是 Vue 构造器，第二个参数是一个可选的选项对象：

接下来，我们写一个具体的插件示例：

实例演示

"运行案例" 可查看在线运行效果

代码解释： JS 代码第 3-20 行，我们定义了插件 MyPlugin，该插件中包含一个全局组件 MyButton。 JS 代码第 22 行，通过 Vue.use 使用 MyPlugin。 HTML 代码第 2、4、6、8、10 行，使用 MyPlugin 插件中的 MyButton 组件。

本节，我们带大家学习了 Vue 插件的使用方式。主要知识点有以下几点：