知识点整理：关于vue项目
vue-cli+webpack如何创建一个vue架子
- 先安装node，检查是否安装成功了：node -v
- 安装npm，检查是否安装成功了npm -v
- 进入的地址，cd desktop
- 安装cnpm，npm install -g cnpm --registry=https://registry.npm.taobao.org
- 用cnpm全局安装vue-cli，cnpm install -g vue-cli
- 初始化项目：vue init webpack project (project 是项目名字)
- 然后根据命名行的提问，填写一些东西：标题呀，项目描述呀，作者呀，是否下载路由呀，是否下载eslint语法检查呀
- 项目初始化完成，进入项目cd project
- 启动项目：npm run dev
webpack：https://blog.csdn.net/Crazy_GirlLL/article/details/114657663
https://www.jianshu.com/p/216ed82a3e49
vue2和vue3 的区别
vue.set
vue.set修改数组，因为vue对数组内部改变不敏感，所以，使用其对数组进行修改
vue.set(要改变的数组，要改变的数组的下标，新值）===》vue.set（this.arr，0，2）
vue.set不仅可以修改数组中的某项，还可以用来增加
动态路由：
- 前端写好路由表，然后根据后端请求得到的登录用户的角色，对路由进行筛选，获得该登录用户的路由，然后展示渲染（beforeEach，addRoutes，elementUI的菜单组件）：https://blog.csdn.net/Crazy_GirlLL/article/details/114666818
- 后端返回路由，前端请求接口，获取到路由之后，遍历成自己需要的路由对象，然后展示，渲染（beforeEach，addRoutes，elementUI的菜单组件）：https://blog.csdn.net/Crazy_GirlLL/article/details/114666885
vue-router的scrollBehavior：切换组件时，页面不从顶部开始，从上个页面浏览的位置开始的情况
- 简单粗暴的方法是，router的前值守卫beforeEach中：document.documentElement.scrollTop=0
- 使用scrollBehavior，也可解决keep-alive标签后部分安卓机返回缓存页位置不精确问题
const router = new Router({
scrollBehavior(to, from, savedPosition) {
if (savedPosition && to.meta.keepAlive) {
return savedPosition;
}
return { x: 0, y:0 };
},
});
————————————————
原文链接：https://blog.csdn.net/q3254421/article/details/84777614MVVM，MCV模块化设计模式和开发流程：
**前后端不分离**的应用模式中，前端页面看到的效果都是由后端控制，由后端渲染页面或重定向，也就是后端需要控制前端的展示，前后端的耦合度很高
这种应用模式，比较适合纯网页应用，但是当后端对接APP时，APP可能并不需要后端返回一个HTML网页，而仅仅是数据本身，所以后端原本返回网页的接口，不再适用于前端APP应用，为了对接APP还要再开发一套接口
**前后端分离**是一种开发模式，前端负责将数据按照产品设计渲染以及调用后端接口，实现产品功能，而后端则提供数据接口，功能接口，前后端分离的开发模式是为了让专业的人做专业的事，且现在前端和后端可以通过接口文档实现并行开发，提高开发效率
**MVVM定义**：MVVM是Model-View-ViewModel的简写，即**模型-视图-视图模型**。【模型】是指后端传递的数据。【视图】是指所看到的页面。【视图模型】是mvvm模式的核心，他是连接view和model的桥梁。他有**两个方向**，一是将【模型】转化成【视图】，即后端传递的数据转化成所看到的页面，**实现方式**：数据绑定。二是将【视图】转化成【模型】，即将所看到的页面转化成后端的数据。**实现方式**：DOM事件监听。这两个方向都实现的，我们称之为数据的双向绑定
总结：在MVVM的框架下，视图和模型是不能直接通信的，他们通过ViewModel来通信，viewModel通常要是想一个observer观察者，当数据发生变化，viewModel能够监听到数据的变化，然后通知到对应的视图做自动更新，而当用户操作视图，ViewModel也能监听到视图的变化，然后通知到对应的数据做改动，这实际上就实现了数据的双向绑定，而且MVVM中的view和ViewModel也可以相互通信。
**MVC定义**：MVC是Model-View-Controller的缩写。即模型-视图-控制器，m和v和上述意思一样，c即Controller值得就是页面业务逻辑，使用**MVC的目的就是将M和V代码分离**，MVC是单向通信，也就是View和Model，必须通过Controller来承上启下详见：https://baijiahao.baidu.com/s?id=1596277899370862119&wfr=spider&for=pc
双向绑定的原理
vue最独特的特性之一，是其非侵入性的响应式系统，数据模型仅仅是普通的JavaScript对象，而当你修改他们时，视图会进行更新，这使得状态管理非常简单直接
当数据变化后，会重新对页面渲染，这就是vue的响应式
完成这一过程需要：
1， 检测数据的变化
- 在JavaScript中，使用`Object.definePeoperty`和`Proxy`来检测一个数据的变化，这就是数据劫持或者数据代理
- 前者不支持数组的长度变化，即无法检测到对象属性的添加或删除 ，不能监听数组的变化，需要进行数组方法的重写，若修改数组中的第一个元素，也无法检测数组的变化
- 第二种的兼容性并不好
2，收集视图依赖了哪些数据
- 我们只有通过收集依赖才能知道哪些地方依赖我的数据，以及数据更新时派发更新
- 数据变化时，自动“通知”需要更新的视图部分，并进行更新（发布订阅模式）
- 收集依赖需要为依赖找一个存储依赖的地方，为此我们创建了Dep，它用来收集依赖，删除依赖和向依赖发送消息等，具体点也就是用来存放Watcher观察者对象，我们可以把Watcher理解成一个中介的角色，数据发生变化时通知它，然后他再通知其他地方,
**总结**：
- - 在`New Vue()`后，vue实例会调用`_init`函数初始化，也就是init过程，在这个过程中Data会被observer转化成getter/setter形式，来监测数据的变化，当被设置的对象被读取的时候，会调用`getter`函数，当被赋值的时候，会调用`setter`函数
- - 当外界通过`watcher`来读取数据的时候，会触发`getter`函数将`watcher`添加到依赖中
- - 当修改对象值时，会触发`setter`函数，`setter`函数会通知之前依赖收集得到的Dep中的每一个watcher，告诉他们，值改变 了，需要重新渲染视图，这时，watcher就会调用`update`去更新视图
虚拟dom：
- 浏览器渲染引擎工作流程都差不多，大致分为5步，创建DOM树——创建样式表——创建Render树——布局Layout——绘制Painting
- DOM树的构建是文档加载完成开始的？构建DOM数是一个渐进过程，为达到更好用户体验，渲染引擎会尽快将内容显示在屏幕上。它不必等到整个HTML文档解析完毕之后才开始构建render数和布局。
- Render树是DOM树和CSSOM树构建完毕才开始构建的吗？这三个过程在实际进行的时候又不是完全独立，而是会有交叉。会造成一边加载，一遍解析，一遍渲染的工作现象。
- CSS的解析是从右往左逆向解析的(从DOM树的下－上解析比上－下解析效率高)，嵌套标签越多，解析越慢。
JS操作真实DOM的代价！
传统的开发模式，原生js或者JQ操作DOM时，浏览器会从构建DOM树开始从头到尾执行一遍流程，在一次操作中，我需要更新10个DOM节点， 浏览器收到第一个DOM请求后并不知道还有9次更新操作，因此会马上执行，最终执行10次。
例如，再一次计算完，紧接着下一个DOM更新请求，这个接二店的坐标值就变了，前一次的计算为无用功，如此频繁的操作就有可能出现页面卡顿，影响用户体验
为什么需要虚拟DOM，它有什么好处?
虚拟DOM就是为了解决浏览器性能问题而被设计出来的，如上，若操作一次中有10次更新DOM的操作，虚拟DOM不会立即操作DOM，而是将这10次更新的内容保存到本地的一个js对象中，最终将这个js对象一次性的给到DOM树，再进行后续操作，避免大量无谓的计算量。
所以，用js对象模拟DOM节点的好处是，页面的更新可以先全部反映在JS对象（虚拟DOM）上，操作内存中的JS对象的速度显然要更快，等更新完成之后，再讲最终的js对象映射成真是的DOM ，交由浏览器去绘制
链接：https://www.jianshu.com/p/af0b398602bc
NPM 模块安装机制：
- 发出npm install命令
- 查询node_modules目录之中是否已经存在指定模块
- 若存在，不再重新安装
- 若不存在
- - npm 向 registry 查询模块压缩包的网址
- - 下载压缩包，存放在根目录下的`.npm`目录里
- - 解压压缩包到当前项目的`node_modules`目录
传值方式
- 子传父：子组件this.$emit('fn',val)，父组件中在子组件中绑定监听函数fn，
- 父传子：父组件在子组件中绑定要传入的数据:childMsg="parentMsg"，子组件props:['childMsg']
- bus公共组件：传参组件bus.$emit('fn',val)，获参组件bus.$on('fn',(data)=>{})
- vuex
- 路由传参
- 跳转传参
路由中hash和history的区别：
- history方式：url中不带#，比如“https://baidu.com/home“，是H5新推出的（pushState与replaceState）；build之后本地 index.html 打开是无效的
- hash方式：url中带#，比如“https://baidu.com/#/home”，是vue默认的，支持低版本和IE浏览器；build之后本地 index.html 打开正常！
- hash模式url里面永远带着#号，我们在开发当中默认使用这个模式。那么什么时候要用history模式呢？如果用户考虑url的规范那么就需要使用history模式，因为history模式没有#号，是个正常的url适合推广宣传。当然其功能也有区别，比如我们在开发app的时候有分享页面，那么这个分享出去的页面就是用vue或是react做的，咱们把这个页面分享到第三方的app里，有的app里面url是不允许带有#号的，所以要将#号去除那么就要使用history模式，但是使用history模式还有一个问题就是，在访问二级页面的时候，做刷新操作，会出现404错误，那么就需要和后端人配合让他配置一下apache或是nginx的url重定向，重定向到你的首页路由上就ok啦。
原文链接：http://www.lucklnk.com/godaddy/details/aid/154901038
生命周期函数：
- beforeCreate(创建前)，在数据观测和初始化事件还未开始
- created(创建后)，完成数据观测，属性和方法的运算，初始化事件，$el属性还没有显示出来
- beforeMount(载入前)，编译模板，把data里面的数据和模板生成html。注意此时还没有挂载html到页面上。
- mounted（载入后），在el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用。实例已完成以下的配置：用上面编译好的html内容替换el属性指向的DOM对象。完成模板中的html渲染到html页面中。此过程中进行与页面数据有关的ajax交互。
- beforeUpdate（更新前），在数据更新之前调用，发生在虚拟DOM重新渲染和打补丁之前。可以在该钩子中进一步地更改状态，不会触发附加的重渲染过程。
- updated（更新后），在由于数据更改导致的虚拟DOM重新渲染和打补丁之后调用。调用时，组件DOM已经更新，所以可以执行依赖于DOM的操作。然而在大多数情况下，应该避免在此期间更改状态，因为这可能会导致更新无限循环。该钩子在服务器端渲染期间不被调用。
- beforeDestroy（销毁前），在实例销毁之前调用。实例仍然完全可用。
- destroyed（销毁后），在实例销毁之后调用。调用后，所有的事件监听器会被移除，所有的子实例也会被销毁。该钩子在服务器端渲染期间不被调用。
业务场景
- created:进行ajax请求异步数据的获取、初始化数据
- mounted:挂载元素dom节点的获取
- nextTick:针对单一事件更新数据后立即操作dom
- updated:任何数据的更新，如果要做统一的业务逻辑处理
- watch:监听数据变化，并做相应的处理
- 链接：https://www.jianshu.com/p/57d230ae5538
params和query的区别：
- params：类似ajax的post请求，不会把参数放到url中，只要用name引入；刷新会丢失传参内容
- query：类似ajax的get请求，会把参数放到url中，用name，path引入都行；刷新不会丢失传参内容
vuex的使用：
定义：vuex是一个专门为vue.js应用程序开发的状态管理模式，集中存储应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化
| state | mutations | actions | getters | mapState | mapGetters | mapActions | |
| 作用 | 用来存储全局访问的变量 | 用来修改state里面的数据 | 和mutations一样，用来修改state里面的数据，但这里是异步操作，而且不能直接修改，需要提交到mutations里面让其修改：this.$store.commit('fn')； | 和组件中的computed类似，对state里面数据的二次加工 | 也是获取方法，使用数据，只是 和前面不同，不需要使用this.$store.state.val来调用；
|
同mapState | |
| 使用方法 | this.$store.state.变量 | this.$store.commit('fn'，val)； fn为mutations里面的函数 |
this.$store.dispatch('fn',val)； fn为actions里面的函数 |
this.$store.getters.fn fn为getters里面的函数 |
...mapState({ count1:state=>state.count})
...mapGetters({ count1:state=>state.count}) |
||
至于module的话，感兴趣可以去vuex官网看，也就是当数据多的时候，划分了多个模块，便于编写代码
详情：https://blog.csdn.net/Crazy_GirlLL/article/details/114699180
vuex中保存的东西，刷新之后就没了咋办？
- 使用localstorage，如果vuex里面有数据，就从vuex里面取，如果没有，则从localstorage取
-
插件vuex-persistedstate：https://blog.csdn.net/Crazy_GirlLL/article/details/114700410
公共导出方法，创建a标签的方法？
import axios from "axios";
import fileDownload from "js-file-download";
import { getStore } from "./storage";
import $ from "jquery";
export async function download(url, params, name) {
const res = await axios({
// baseURL: process.env.NODE_ENV === 'production' ? process.env.VUE_APP_BASE_API : '/',
timeout: 2 * 60 * 60 * 1000,
headers: { Authorization: "Bearer " + getStore("MyToken") },
url: url,
method: "get",
params: params,
responseType: "blob"
});
// const disposition = res.headers["content-disposition"];
// const temp = disposition.split(";")[1].split("filename=")[1];
// 强制转码
const iconv = require("iconv-lite");
iconv.skipDecodeWarning = true; // 忽略警告
// const filename = iconv.decode(temp, 'UTF-8')
const filename = name;
// const fileType = res.headers["content-type"];
const resBlob = res;
let resData = null;
try {
const resText = await new Promise((resolve, reject) => {
// 通过 FileReader 接受并解析
const reader = new FileReader();
reader.addEventListener("abort", reject);
reader.addEventListener("error", reject);
reader.addEventListener("loadend", () => {
resolve(reader.result);
});
// 文件
reader.readAsText(resBlob);
});
resData = JSON.parse(resText);
} catch (err) {}
if (resData) {
if (resData.error) {
} else {
}
} else {
fileDownload(resBlob, filename);
}
}nexttick实现原理
实现原理：nextTick方法主要是使用了宏任务和微任务，定义了一个异步方法，先后对promise，mutationObserver，setImmediate，setTImeout的存在进行判断，在每次的事件循环的最后，都会有一个UI render ，也就是更新dom，所以，把nexttick的代码放在UI render步骤后面执行，就能访问到更新后的DOM
MutationObserver：H5新增的API，用来监视DOM变动的接口，可以监听一个DOM对象上发生的子节点删除，属性修改，文本内容修改等
调用优先级：Promise > MutationObserver > setImmediate > setTimeout
1，因为js执行是单线程的，它是基于事件循环的
- 所有的同步任务都会在主线程上执行，形成一个执行栈
- 主线程外，会存在一个任务列队，用来放置异步任务
- 当执行栈中的所有同步任务完成之后，就会读取任务列队，然后挨个执行
由于vue DOM更新是异步执行的，即修改数据时，视图不会立即更新，而是会监听数据变化，并缓存在同一事件循环中，等同一数据循环中的所有数据变化完成之后，在同一进行视图更新，（也就是虚拟dom的作用），为了确保得到更新后的DOM，所以有了vue.nextTick()
事件循环：分为宏任务和微任务。由于宏任务耗费的时间是大于微任务的，所以在浏览器支持的情况下，优先使用微任务。如果浏览器不支持微任务，再使用宏任务
-
宏任务主要包含：script( 整体代码)、setTimeout、setInterval、I/O、UI 交互事件、setImmediate(Node.js 环境)
-
微任务主要包含：Promise、MutaionObserver、process.nextTick(Node.js 环境)
https://blog.csdn.net/Crazy_GirlLL/article/details/114872356
任务列队：分为同步任务和异步任务；所有同步任务执行完成之后，按照优先级顺序，执行任务列队中的异步任务
vue的特性：
- 轻量级的框架
- 双向数据绑定
- 指令
- 插件化
- 模块化
用到过什么UI框架，优缺点，
Ant Design 在 标准、视觉 上更胜一筹，但是 ant-design-vue 相对比较年轻，成熟度上差 Element Ui 一些。
Element-UI 是国内做 Vue 最早，也最成熟的一家。用户群体多，遇到问题基本都能解决
vant：一般用与移动端
vxe-table：表格的各种需求，表尾合计
vue项目APP，首次加载很慢？
- 路由的懒加载
- 组件异步加载：v-if
- 组件的按需加载
- 图片分批加载，压缩，或者vue-lazyload插件，图片懒加载
- 在index.html页面引入资源，使用cdn上的资源
VUE项目强制刷新
- 使用this.$router.go(0) 会出现一段时间空白页，用户体验不好
- 在app.vue中定义reload()方法。说白了，就是在刷新的时候用变量控制路由的隐藏，然后等数据都获取到之后，再改变变量的值，让路由显示
需要强制刷新的页面
axios原理
axios可以用在浏览器和 node.js 中是因为，它会自动判断当前环境是什么，如果是浏览器，就会基于XMLHttpRequests实现axios。如果是node.js环境，就会基于node内置核心模块http实现axios
- axios还是属于 XMLHttpRequest， 因此需要实现一个ajax。或者基于http 。
- 还需要一个promise对象来对结果进行处理。
axios的特点有哪些？
答：
一、Axios 是一个基于 promise 的 HTTP 库，支持promise所有的API
二、它可以拦截请求和响应
三、它可以转换请求数据和响应数据，并对响应回来的内容自动转换成 JSON类型的数据
四、安全性更高，客户端支持防御 XSRF
axios有哪些常用方法？
答：
一、axios.get(url[, config]) //get请求用于列表和信息查询
二、axios.delete(url[, config]) //删除
三、axios.post(url[, data[, config]]) //post请求用于信息的添加
四、axios.put(url[, data[, config]]) //更新操作
说下你了解的axios相关配置属性？
答：url是用于请求的服务器URL
method是创建请求时使用的方法,默认是get
baseURL将自动加在url前面，除非url是一个绝对URL。它可以通过设置一个baseURL便于为axios实例的方法传递相对URL
transformRequest允许在向服务器发送前，修改请求数据，只能用在'PUT','POST'和'PATCH'这几个请求方法
headers是即将被发送的自定义请求头
headers:{'X-Requested-With':'XMLHttpRequest'},
params是即将与请求一起发送的URL参数，必须是一个无格式对象(plainobject)或URLSearchParams对象
params:{
ID:12345
},
auth表示应该使用HTTP基础验证，并提供凭据
这将设置一个Authorization头，覆写掉现有的任意使用headers设置的自定义Authorization头
auth:{
username:'janedoe',
password:'s00pers3cret'
},
'proxy'定义代理服务器的主机名称和端口auth表示HTTP基础验证应当用于连接代理，并提供凭据
这将会设置一个Proxy-Authorization头，覆写掉已有的通过使用header设置的自定义Proxy-Authorization头。
proxy:{
host:'127.0.0.1',
port:9000,
auth::{
username:'mikeymike',
password:'rapunz3l'
}
},
链接：https://www.jianshu.com/p/73f6362889c8
v-for，v-if优先级
v-for的优先级比较高，但是不推荐用在一起，这样比较消耗性能
每次都要先循环，循环完之后，在每个item里面都要去进行v-if判断，数据量大的话就会很消耗性能
- 当判断是否显示该list的时候，可以将v-if放在v-for上一层，
- 当选择list某一个属性去显示时，可以先筛选完之后，将筛选之后的list渲染
v-show，v-if区别
v-show：是根据css中的display：none / block来去显示的，不管为none还是block都会渲染，所以适用于切换操作
v-if：是根据在DOM树上增加或删除元素来实现的，如果为false则不存在该元素 ，如果为true则在DOM树上添加该元素，所以适用于初始化渲染后不会变动的元素，比如权限
$route，$router区别
$route：当前跳转的路由信息对象。里面有params，query，name，path之类的属性
$router：是全局的路由实例对象，里面包所有的路由，还有一些方法和属性，push，history，
data为什么不是个对象而是一个函数
组件是可复用的vue实例，一个组件被创建好之后，就可能被用在各个地方，而组件不管被复用了多少次，组件中的data数据都应该是相互隔离的，互不影响的，基于这一理念，组件每复用一次，data数据就应该被复制一次，当某一处复用的地方组件内的data数据被改变时，其他复用地方组件的data数据不受影响
如果data是一个对象的话，就使得所有组件中组件实例共用了一份data，就会变成一个变了全部都会变的结果
ssl服务器渲染
浏览器端渲染，指的是用 JS 去生成 HTML，例如 React, Vue 等前端框架做的路由。
服务器端渲染，指的是用后台语言通过一些模版引擎生成 HTML，例如 Java 配合 VM 模版引擎、NodeJS配合 Jade 等，将数据与视图整理输出为完整的 HTML 文档发送给浏览器。
用过nuxt.js