LoveSummer

前言希望本篇文章能帮你加深对 Vue 的理解，能信誓旦旦地说自己熟练Vue2/3。内容混杂 + + ，建议收藏，慢慢看。整体来看，变化不大，只是名字大部分需要 + ，功能上类似。使用上 Vue3 组合式 API 需要先引入；Vue2 选项 API 则可直接调用，如下所示。常用生命周期表格如下所示。Tips： 是围绕和生命周期钩子运行的，所以不需要显式地去定义。Vue3 支持了多根节点组件，也就是。Vue2中，编写页面的时候，我们需要去将组件包裹在中，否则报错警告。Vue3，我们可以组件包含多个根节点，

根据原文内容的更新的内容主要有以下 5 块：起初 Vue3.0 暴露变量必须 return 出来，template中才能使用；这样会导致在页面上变量会出现很多次。很不友好，vue3.2只需在script标签中添加setup。可以帮助我们解决这个问题。分析引入 setup 后组件的变化在 script setup 中，引入的组件可以直接使用无需再通过components进行注册，[是不是真的很香啊!]并且无法指定当前组件的名字，它会自动以文件名为主，也就是不用再写name属性了。当我们的页面上需要

本文使用 ref 对 vue 的响应性进行解读，仅仅是响应性原理解析，不涉及 vue 组件等概念。vue 的响应性的实现，在 @vue/reactivity 包下，对应的源码目录为 packages/reactivity。如何调试 vue 源码，可查看该文章ref 比 reactive 的实现简单，且不需要用到 es6 的 Proxy，仅仅需要使用到对象的 getter 和 setter 函数因此，讲述响应性原理，我们用简单的 ref ，尽量减少大家的理解成本这个术语在程序设计中经常被提及，但这是什么意思呢

面临的问题：随着功能的增长，复杂组件的代码变得难以维护， 就随之而来， 使用的越来越多，就是 写的所以能够更好的支持 在这里介绍就这么简单 的绝大多数的特性 在 都能使用，毕竟 是渐进式的响应式原理进行使用 实现， 可以传参了等等新特性打包大小减少41%初次渲染快55%, 更新渲染快133%内存减少54%…使用Proxy代替defineProperty实现响应式重写虚拟DOM的实现和Tree-Shaking…Composition API（组合API）新的内置组件其他改变官方文档：https://c

ECMA（European Computer Manufacturers Association）中文名称为欧洲计算机制造商协会，这个组织的目标是评估、开发和认可电信和计算机标准，1994 年后该组织改名为Ecma 国际ECMAScript 是由 Ecma 国际通过ECMA-262 标准化的脚本程序设计语言。ECMASCRIPTEcma 国际制定了许多标准，而ECMA-262 只是其中的一个，所有标准列表查看：http://www.ecma-international.org/publications/st

模块化：是指解决一个复杂问题时，自顶向下逐层把系统划分成若干模块的过程。对于整个系统来说，模块是可组合、分解和更换的单元编程领域中的模块化，就是遵守固定的规则，把一个大文件拆成独立并互相依赖的多个小模块。把代码进行模块化拆分的好处● 提高了代码的复用性● 提高了代码的可维护性● 可以实现按需加载模块化规范：就是对代码进行模块化的拆分与组合时，需要遵守的那些规则。例如使用什么样的语法格式来引用模块，在模块中使用什么样的语法格式向外暴露成员模块化规范的好处：大家都遵守同样的模块化规范写代码，降低了

在 NPM 包的 目录你将会找到很多不同的 Vue.js 构建版本。这里列出了它们之间的差别：如果你需要在客户端编译模板 (比如传入一个字符串给 选项，或挂载到一个元素上并以其 DOM 内部的 HTML 作为模板)，就将需要加上编译器，即完整版：当使用 或 的时候， 文件内部的模板会在构建时预编译成 JavaScript。你在最终打好的包里实际上是不需要编译器的，所以只用运行时版本即可。因为运行时版本相比完整版体积要小大约 30%，所以应该尽可能使用这个版本。如果你仍然希望使用完整版，则需要在打包

在中创建时传入配置项使用 Vuex 编写Vuex的基本使用初始化数据，配置、，操作文件组件中读取中的数据组件中修改中的数据 或若没有网络请求或其他业务逻辑，组件中也可越过，即不写，直接编写该文件用于创建Vuex中最为核心的storegetters 配置项概念：当state中的数据需要经过加工后再使用时，可以使用加工，相当于全局计算属性在store.js中追加配置组件中读取数据$store.getters.bigSum四个 map 方法的使用方法：用于帮助映

前言在使用vue一个多礼拜后，感觉现在还停留在初级阶段，虽然知道怎么和后端做数据交互，但是对于mounted这个挂载还不是很清楚的。放大之，对vue的生命周期不甚了解。只知道简单的使用，而不知道为什么，这对后面的踩坑是相当不利的。因为我们有时候会在几个钩子函数里做一些事情，什么时候做，在哪个函数里做，我们不清楚。于是我开始先去搜索，发现vue2.0的生命周期没啥文章。大多是1.0的版本...

学习日志： https://router.vuejs.org/zh/installation.html

build命令后占体积最大的竟然是.map文件，webpack如何设置不让编译出.map文件呢？ 解决办法：去config/index.js中改一个参数： productionSourceMap:false 把这个改为false。不然在最终打包的文件中会出现一些map文件map文件的作用：项目打包后，代码都是经过压缩加密的，如果运行时报错，输出的错误信息无法准确得知是哪里的...

创建一个 Vue 实例每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的：var vm = new Vue({ // 选项})虽然没有完全遵循 MVVM 模型，但是 Vue 的设计也受到了它的启发。因此在文档中经常会使用 vm (ViewModel 的缩写) 这个变量名表示 Vue 实例。当创建一个 Vue 实例时，你可以传入一个选项对象。这篇教程主要描述的就是如何...

但是一旦放在了非根目录的其他文件夹里面，这时候index.html里引用的js和css文件路径都会找不到错误如下打开index.html文件发现里面引用的文件路径不对这里只需要更改config/index.js配置就可以了更改后的配置这里也视当前环境的具体环境而定。如果你也遇到这样的问题，希望对您有帮助...

vetur 很多人知道，但在 vscode 下没办法格式化 .vue 里的 html, js 很是头疼，代码风格无法统一。所以不少人直接拆分开，然后在 .vue 中引入，虽然方法很好，但这有违 .vue 单文件组件的初衷。本文详细介绍 vscode 下使用 vetur + prettier + eslint 来统一 vue 编码风格。vetur 插件vetur 经过多个版本迭代，算...