涂涂

Vue2：基于正则和递归下降解析，生成较通用的渲染函数，静态优化有限。Vue3：采用逐字符扫描和 Block Tree，结合 PatchFlag，实现精准更新。编译时优化程度更高，直接提升运行时性能。什么是“刷新后二次加载路由”？刷新后二次加载路由，指的是在 Vue 项目中，用户刷新页面后，路由会重新解析并加载，但由于某些原因（如异步路由、权限控制、动态添加路由等），导致路由数据丢失或需要二次加载，甚至页面 404 或白屏的问题。动态路由未持久化（如基于权限的addRoute()添加路由）。

功能Vue 2 生命周期Vue 3 生命周期（组合式 API）使用场景数据初始化createdsetup初始化数据、调用 API初次渲染mountedonMountedDOM 操作、动画数据更新updatedonUpdated监听和响应数据变化组件销毁destroyed清理定时器、事件监听依赖追踪不适用调试性能问题在 Vue 3 中，组合式 API 带来了更高的灵活性，支持更加简洁的生命周期钩子函数，同时还允许在setup阶段完成更多初始化工作。

Vue2// Vue2 自定义指令})Vue3// Vue3 自定义指令})Vue 3 在性能、灵活性、TypeScript 支持等方面都有显著提升。对于大型项目，Vue 3 提供了更强大的 Composition API 和更高效的响应式系统，而对于 Vue 2 开发者来说，Vue 3 的新特性可能需要一段时间的学习和适应。

Vue2 vs Vue3 组件通信方法对比

<input/></div></script>-- 使用 v-model 的组件 --><template><div><input/>

Redux 是一个可预测的状态容器，用于管理 JavaScript 应用的状态。单一数据源：整个应用的状态存储在单个 store 中状态是只读的：唯一改变状态的方式是触发 action使用纯函数进行修改：使用 reducer 来指定状态如何更新可预测的状态管理集中的状态管理易于调试强大的中间件生态大型应用复杂的状态逻辑多人协作项目需要状态持久化使用 TypeScript采用 Redux Toolkit实现状态范式化使用选择器模式。

定位不同路由组件：页面级，负责整体布局和业务逻辑一般组件：功能级，负责特定功能的实现参数传递路由组件：主要通过路由参数一般组件：主要通过 props生命周期路由组件：与路由切换紧密相关一般组件：与父组件更新相关。

MVC适合简单的应用或那些不需要复杂视图逻辑的情况，特别是在 Web 开发中很常见。它的主要优点是清晰的职责分离，易于理解和实现。MVVM则更加适用于需要复杂 UI 交互和状态管理的桌面或移动应用，尤其是支持数据绑定的框架中。它通过 ViewModel 来简化 UI 更新和视图与业务逻辑的分离。两者的核心区别在于，MVC依赖于控制器来管理视图和模型之间的交互，而MVVM通过引入ViewModel并利用数据绑定来简化视图更新和状态管理。

性能更好功能更强大代码更简洁开发体验更好新项目建议使用 Vue3需要兼容 IE11 的项目使用 Vue2大型项目推荐 Vue3（性能优势明显）

Object.defineProperty() 方法允许精确地添加或修改对象的属性。默认情况下，使用此方法添加的属性是不可修改的。参数说明：2.2 访问器描述符3. 实际应用示例3.1 数据劫持（Vue2响应式原理）3.2 私有属性模拟3.3 计算属性实现4. 注意事项和限制4.1 不可扩展对象4.2 继承属性4.3 属性描述符限制5. 性能考虑5.1 大量属性处理5.2 访问器性能6. 最佳实践描述符默认值使用 TypeScript 类型错

Uncaught TypeError: h.createChart is not a function

Luckysheet 在vue中离线使用方法以及引入报错解决方案

方法一：参数传递<el-cascader v-model="value" :options="List" @expand-change="handleChange($event,'222')" /><el-cascader v-model="value" :options="List" @change="handleChange($event,'222')" />参数接收 handleChange(value, path) => {

问题：如描述所说[Vue Router warn]: <router-view> can no longer be used directly inside <transition> or <keep-alive>. Use slot props instead就是vue-router不再使用原来的写法，用slot插槽代替原因：检查vue-router的版本一般是4.x以上的都改用了新的写法解决：改成：<router-view v-sl

Uncaught TypeError: Cannot assign to read only property 'exports' of object '#<Object>' at Module......原因：webpack版本过高，通常出现在拉了别人的代码跑不起来的情况，解决办法：1.删除node_moudules,安装指定版本的webpack2.根目录找到.babelrc文件，注释掉"transform-runtime"...

1. request.js统一封装的请求接口/* * @Author: your name * @Date: 2020-03-20 14:17:34 * @LastEditTime: 2020-03-26 11:27:50 * @LastEditors: your name * @Description: In User Settings Edit * @FilePath: 。。。。。。。。。。 */import axios from 'axios'import { Message

vue组件的继承适用于UI几乎一样，只是数据不一样的情况下，但是这种情况通过统一封装组件也是能实现的，小功能建议用封装，大功能建议用组件继承，因为大功能在结合搜参数的需要多重的判断，这样会导致封装的组件比较繁杂，出现过多的判断，用继承可以改写基类中的方法和数据下面来看个例子基类：<!-- * @Author: your name * @Date: 2020-05-26 15:22:12 * @LastEditTime: 2020-05-27 11:40:49 * @LastEdi

一、安装vue-routernpm install vue-router二、配置vue-router1.src文件下新建文件夹router与store平级，并配置路由/* * @Author: jona * @Date: 2020-05-15 11:30:33 * @LastEditTime: 2020-05-15 15:19:41 * @LastEditors: Please set LastEditors * @Description: 路由 * @FilePath: \

一、安装vuexnpm install vuex --save二、将vuex配置到vue中1. 在src目录下创建store文件夹在store文件夹下面创建module文件夹用于存放不同功能的store目录如下2.index.js对vuex进行配置导出index.js里面配置import Vue from 'vue';import Vuex from 'vuex';Vue.use(Vuex);import login from "./module/login

目录一、vue cli4.0+中使用proxy配置代理转发二、配置使用@路径引入三、改变vue项目启动的端口号和 项目启动时自动在浏览器中打开一、vue cli4.0+中使用proxy配置代理转发这个比较的重要，所以单独提出来首先在demo的根目录下面新建vue.config.js一个文件，注意是新建，vue-cli3.0以后没有这个文件了所以需要自己新建一个如图：module.exports = { devServer: { proxy: {..

一、安装element-uinpm i element-ui -S二、引入 Element这里你可以引入整个 Element，或是根据需要仅引入部分组件也就是俗称的按需加载。1.完整引入在main.js里面配置import Vue from 'vue';import ElementUI from 'element-ui';import 'element-ui/lib/theme-chalk/index.css'; //样式要单独导入import App from './Ap

一、安装脚手架npm install -g @vue/cli安装完成后看看版本vue --version二、创建一个基础demovue create test这里会出现一个基础demo模板的选择，很多人不知道命令行里面的选择是怎么选择的。这里我用的是直接选择需要的模板序，然后回车选择，默认第一个的序号是1。选择自己需要的模板进行基础demo的创建，具体的模板有些什么看官网：https://cli.vuejs.org/zh/guide/creating-a-pro

问题：element-ui中table-column中有循环，子cell又是使用template(scope)渲染的，当循环数据更新（push,splice,或者重新赋值）时，可能出现子cell不变的情况，从而导致页面元素和循环数据对不上的报错问题猜测：可能是template中的scope没有变化导致不更新，或者element-ui做了优化避免不必要更新导致的bug解决：在table上加上...

1.谈谈你对MVVM的理解定义：MVVM分为Model、View、ViewModel 。Model：代表数据模型，数据和业务逻辑都在Model层中定义，俗称的dataView：代表UI视图，负责数据的展示，俗称的html部分，也叫模板部分ViewModel：负责监听Model中数据的改变并且控制视图的更新，处理用户交互操作，在这里是作为一个桥梁来连接Model和ViewMode...

在开发中遇到不管怎么查看数据，都没有，但是表单还是会被回填的情况原因：原因是浏览器里面保存了很多个账号密码，他让你记住密码后下一次免输入密码的机制是去找当前页面的表单中id，name或者 type为password的第一个input ，回填记住的密码，然后把最近的一个type为非number类型的input回填记住的账号；因此，当你的表单中存在类型为password的input的时候就...

目录1.导出html2.导出css3.导出js4.完整代码5.结果：6.包含echarts的导出7.结果：​1.导出html<div ref = 'testd' id ='div' onclick="evetest('11111111')" > <span>导出html</span><div>...

项目创建报错：This dependency was not found:* !!vue-style-loader!css-loader?{"minimize":false,"sourceMap":false}!../../node_modules/vue-loader/lib/style-compiler/index?{"vue":true,"id":"data-v-1d57e5

一、Vue在引入组件后无法显示组件内容且报错如下：[Vue warn]: Do not use built-in or reserved HTML elements as component id: header二、原因是vue里面不允许用特殊的标签来做自定义的标签比如你不能用a来接收一个组件的注册然后在以自定义标签的方式引用会被限制三、解决方案在component里面注册组件的时

刚刚开始的小伙伴是不是空格报错少一行报错各种错？是不是觉得快被限制的失去了自由的思绪了？受折磨后找到了不错的文章来取消eslint语法检测限制，作为学习笔记摘自segmentfault其实我并不反对这些语法检测，但是像许多反个人意愿的那就真的不得不吐槽了，比如vue-cli脚手架创建的默认eslint规则：代码末尾不能加分号;代码中不能存在多行空行tab键

在build/webpack.base.conf.js中找到resolve直接上代码：resolve: { // resolve是webpack的内置选项，顾名思义，决定要做的事情，也就是说当使用 import "jquery"， // 该如何去执行这件事情就是resolve配置项要做的， // import jQuery from "./additiona

一个vue目录建好如下：1.build2.config3.node_modules4.src5.static6.babelrcbabelrc文件是babel的配置文件主要适用于编译es6转义为es5一般用2个插件es2015,stage-2,transfer-runtime"comments": false

1.安装node.js下载安装地址Node.js安装包及源码下载地址为：https://nodejs.org/en/download/。安装步骤安装即可没有什么难度。环境要借助于node，所以要先安装node，借助于node里面的npm来安装需要的依赖等等。 2.安装npm 由于新版的NodeJS已经集成了npm，所以之前npm也一并安装好了。同样可以使用cmd命令行输入"npm -v

1.安装sass的依赖包npm install --save-dev sass-loader//sass-loader依赖于node-sassnpm install --save-dev node-sass2.在build文件夹下的webpack.base.conf.js的rules里面添加配置，如下红色部分{ test: /\.sass$/, l

1.安装方法一：在package.json里的package.json的的pendencies里面添加当前需要安装的版本号，最新的版本号可以去gihub上面去搜 "dependencies": { "stylus": "^0.54.5", "vue": "^2.5.2", "vue-router": "^3.0.1" },配置完成之后再执行npm in

1.方法一：a.在package.json里面配置好："vue-resource": "^1.3.5"版本号来源于GitHubb.执行npm intsallc.重启项目 npm run dev2.方法二：直接执行npm install --save vue-resource然后重新启动项目参考：https://github.com/pagekit/vue

1.v-model 一般用于表单input的双向数据绑定可以用 v-model 指令在表单  及  元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但 v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。v-model 会忽略所有表单元素的 value、checked、selected 特性的初始值而总是将

1.根据表达式之真假值，切换元素的 display CSS 属性。eg 点击按钮我就消失 export default { name: 'HelloWorld', data () { return { hide : true } }, methods:{ greet: function () { thi

1.：class1.1.常规用法 :class="color"这里的color是数据里面的一个数据 数组用法 export default { name: 'HelloWorld', data () { return { color: 'red' } } } .red{ c

其实v-on后面跟的不止是click事件也可以是其他的事件，用法均相似。比如：v-on:click/mouseout/mouseover/mousedown.......以下click为例注意：所有的v-on都可以简写为@，比如说v-click可以简写为@click1.监听事件可以用v-on指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。通常来讲就是

按键修饰符就是在监听键盘事件时，我们经常需要检查常见的键值。Vue 允许为 v-on 在监听键盘事件时添加按键修饰符1.如何获取键盘的键码 @keydown="show($event)" export default { name: 'HelloWorld', data () { return { items: 1 }