本文章总结时间： 2020-11-18 17:39:25
前言：本章节总结都是Vue相关的基础知识点， 在网上看到很多比较不错的面试题，大概做了一下总结
vue-cli工程================================================================================
1、 构建的 vue-cli工程都有哪些技术， 它们的作用分别是什么？
① vue.js：vue-cli工程的核心，主要特点是 双向数据绑定 和 组件系统。
② vue-router：Vue官方推荐使用的路由框架。
③ vuex：专为 Vue.js 应用项目开发的状态管理器，主要用于维护vue组件间共用的一些 变量 和 方法。
④ axios（ 或者 fetch 、ajax ）：用于发起 GET 、或 POST 等 http请求，基于 Promise 设计。
⑤ vux等：一个专为vue设计的移动端UI组件库。
⑥ 创建一个emit.js文件，用于vue事件机制的管理。
⑦ webpack：模块加载和vue-cli工程打包器。
2、vue-cli工程常用的npm命令有哪些？
① npm insatll
② npm run dev / npm start
③ npm run build
④ npm run build --report
3、请说出vue-cli工程中每个文件夹和文件的用处
4、config文件夹下index.js的对于工程开发环境和生产环境的配置 （自行百度）
5、请详细介绍一些package.json里面的配置 （自行百度）
Vue核心知识点================================================================================
1、对于Vue是一套渐进式框架的理解 （可自行百度）
参考地址：https://www.cnblogs.com/xiangxiang2020/p/12734547.html
2、Vue.js的两个核心是什么？
① 数据驱动（数据双向绑定）：ViewModel，保证数据和视图的一致性。
② 组件系统：应用类UI可以看作全部是由组件树构成的。
3、v-if 和 v-show有什么区别
① 手段：v-if是动态的向DOM树内添加或者删除DOM元素；v-show是通过设置DOM元素的display样式属性控制显隐；
② 编译过程：v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件；v-show只是简单的基于css切换；
③ 编译条件：v-if是惰性的，如果初始条件为假，则什么也不做；只有在条件第一次变为真时才开始局部编译（编译被缓存？编译被缓存后，然后再切换的时候进行局部卸载); v-show是在任何条件下（首次条件是否为真）都被编译，然后被缓存，而且DOM元素保留；
④ 性能消耗：v-if有更高的切换消耗；v-show有更高的初始渲染消耗；
⑤ 使用场景：v-if适合运营条件不大可能改变；v-show适合频繁切换。
4、Vue常用的修饰符 （自行百度）
参考链接： https://www.cnblogs.com/lgnblog/p/12750071.html
5、v-on可以监听多个方法吗？ v-on可以监听多个方法。
参考链接： https://www.cnblogs.com/gitByLegend/p/10835516.html
6、Vue的for循环中key的作用
key是为每个vnode指定唯一的id，在同级vnode的Diff过程中，可以根据key快速的进行对比，来判断是否为相同节点，利用 key 的唯一性生成 map 对象来获取对应节点，比遍历方式更快,指定key后,可以保证渲染的准确性(尽可能的复用 DOM 元素。)
为什么不建议用index作为key?
用index 作为 key，和没写基本上没区别，因为不管你数组的顺序怎么颠倒，index 都是 0, 1, 2 这样排列，导致 Vue 会复用错误的旧子节点，做很多额外的工作，一般都用数据中的唯一值,比如ID这种,或者实在不行使用UUID库。
7、vue-cli工程升级vue版本（网上有很多方案， 可自行百度）
package.json里面修改Vue的版本， 同时修改 vue-template-compiler为相同的版本， 后者在devdepen里面， 最后执行npm install
8、Vue事件中如何使用event对象？
案例：
9、$nextTick的使用
this.$nextTick()将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它，然后等待 DOM 更新。它跟全局方法 Vue.nextTick 一样，不同的是回调的 this 自动绑定到调用它的实例上。假设我们更改了某个dom元素内部的文本，而这时候我们想直接打印出这个被改变后的文本是需要dom更新之后才会实现的，也就好比我们将打印输出的代码放在setTimeout(fn, 0)中；
10、Vue组件中data为什么必须是函数？
在此之前个人建议先去看一下深拷贝和浅拷贝， 看懂之后在来思考这个题目答案会更显而易见。
堆栈区：基本数据类型是放在栈里面的，它是按值访问，在栈内存中发生复制行为时系统会为新的变量提供新值，所以两个变量互不影响
引用数据类型是放在堆内存中的，它是按引用访问的，在栈内存中有一个地址是指向堆内存中的引用数据类型的，所以我们拷贝引用数据类型其实就是拷贝了栈内存中的地址，因为地址一样，他们都是指向同一个引用数据类型，所以两个变量会相互影响，这时就必须使用深拷贝了
此题答案：在创建或注册模板的时候传入一个 data 属性作为用来绑定的数据。但是在组件中，data必须是一个函数，因为每一个 vue 组件都是一个 vue 实例，通过 new Vue() 实例化，引用同一个对象，如果 data 直接是一个对象的话，那么一旦修改其中一个组件的数据，其他组件相同数据就会被改变，而 data 是函数的话，每个 vue 组件的 data 都因为函数有了自己的作用域，互不干扰。
11、v-if 和 v-for的优先级？
v-for优先级要高于v-if， 且两者是可以同时使用的， But----两者同时使用时v-for遍历之后，v-if才进行判断，如果是一个大型的vue项目，这样容易给浏览器造成不必要的资源浪费
12、Vue中子组件调用父组件的方法？
① 方法是直接在子组件中通过this.$parent.event来调用父组件的方法
② 在子组件里用$emit向父组件触发一个事件，父组件监听这个事件就行了
③ 父组件把方法传入子组件中，在子组件里直接调用这个方法
13、Vue中keep-alive组件的作用？
☆--- 作用： 用于保留组件状态或避免重新渲染（缓存的作用）
比如：当一个目录页面与一个详情页面，用户经常：打开目录页面=>进入详情页面=>返回目录页面=>打开详情页面，这样目录页面就是一个使用频率很高的页面，那么就可以对目录组件使用
☆--- 该标签有两个属性include与exclude：
include：字符串或者正则表达式。只有匹配的组件会被缓存
exclude：字符串或者正则表达式。任何匹配的组件都不会被缓存。
☆--- keep-alive的生命周期：
当引入keep-alive的时候，页面第一次进入，钩子的触发顺序created-> mounted-> activated，退出时触发deactivated。当再次进入（前进或者后退）时，只触发activated
14、Vue中如何编写可复用的组件？
15、什么是Vue生命周期和生命周期钩子函数？
16、Vue生命周期钩子函数有哪些？
17、Vue如何监听键盘事件中的按键？
参考链接： https://blog.csdn.net/qq_43592064/article/details/104989119
18、Vue更新数组时触发视图的更新方法
Vue 包含一组观察数组的变异方法，所以它们也将会触发视图更新。
这些方法如下：
push()、pop()、shift()、unshift()、splice()、sort()、reverse()
反之 filter()、concat()、slice()这些方法不会改变原数组， 但是总会返回一个新数组， 当使用这些非变异方法时， 可以使用新数组替换旧数组
由于javaScript的限制， js中一些操作数组的方法在Vue中使用， 不能够触发视图的更新
例:
①: vm.items[name] = '哈哈哈哈';
②: vm.items.length = 10;
举例子:
var vm = new Vue({ data: { items: ['a', 'b', 'c'] } });
vm.items[1] = 'x' // 不是响应性的
vm.items.length = 2 // 不是响应性的
☆---解决上面①的问题可以如下操作:
一、Vue.set(ArrayName, key, 值); / Vue.$set(ArrayName, key, 值);
二、vm.items.splice(需要更新的值, 所在数组位置(下标), 新值); // Array.prototype.splice
☆---解决上面的②问题:
一、vm.items.splice(number);
19、Vue中对象更改检测的注意事项 (要实现 ① 和 ② 的效果参考本文第十八条)
① 无法利用索引值直接设置(修改/更新)一个项,
② 无法直接修改数组的长度
③ Vue无法检测到对象属性的添加和删除。对于已经创建的实例，Vue 不能动态添加根级别的响应式属性，可以使用 Vue.set(object, key, value) 方法向嵌套对象添加响应式属性, 或者vm.object = Object.assign({}, vm.object, {key: value, key: value,...})。
20、解决非工程化项目初始化页面闪动问题
vue页面在加载的时候闪烁花括号{{}}，v-cloak指令和css规则如[v-cloak]{display:none}一起用时，这个指令可以隐藏未编译的Mustache标签直到实例准备完毕。
案例：/*css样式*/ [v-cloak] { display: none; }
- {{item.text}}
21、v-for产生的列表， 实现active的切换
提示： 无非就是css的样式动态切换， 这个可自行百度
22、v-model语法糖的组件中的使用
额， 这个这个， 也是自己百度吧，在下描述不好
23、十个常用的自定义过滤器
24、Vue等单页面应用及其优缺点
参考链接: https://blog.csdn.net/qq_41115965/article/details/89225686
☆---优点： Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件，核心是一个响应的数据绑定系统。MVVM、数据驱动、组件化、轻量、简洁、高效、快速、模块友好。
☆---缺点： 不支持低版本的浏览器，最低只支持到IE9；不利于SEO的优化（如果要支持SEO，建议通过服务端来进行渲染组件）；第一次加载首页耗时相对长一些；不可以使用浏览器的导航按钮需要自行实现前进、后退。
25、什么是Vue的计算属性，（解释Vue计算属性和方法的区别）
如果模板中的表达式存在过多的逻辑，那么模板会变得臃肿不堪，维护起来也异常困难，因此为了简化逻辑出现了计算属性
特点：在一个计算属性里可以完成各种复杂的逻辑，包括运算、函数调用等，只要最终返回一个结果就可以；
计算属性拥有的两个方法：getter setter 用来实现数据的双向绑定
计算属性缓存（最大的特点）-----属性变化才执行getter函数，否则使用缓存 默认为true使用缓存-----(cache:false)
计算属性 And 方法区别：
① methods方法和computed计算属性，两种方式的最终结果确实是完全相同
② 不同的是计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值，多次访问 getAge 计算属性会立即返回之前的计算结果，而不必再次执行函数。
③ methods方法，每当触发重新渲染时，调用方法将总会再次执行函数。
④ 官网的一句话：对于任何复杂逻辑，你都应当使用计算属性。
26、vue-cli提供的几种脚手架模板 自行百度
27、Vue父组件如何向子组件传递数据
props： 在父组件中使用v-bind命令将要传递的数据绑定到子组件上。比如我们要从父组件中给子组件传递两条数据
28、vue-cli开发环境使用全局变量
29、vue-cli生产环境使用全局变量
30、Vue弹窗后如何禁止滚动条滚动？
methods : {
//禁止滚动
stop(){
var mo=function(e){e.preventDefault();};
document.body.style.overflow='hidden';
document.addEventListener("touchmove",mo,false);//禁止页面滑动
},
/***取消滑动限制***/
move(){
var mo=function(e){e.preventDefault();};
document.body.style.overflow='';//出现滚动条
document.removeEventListener("touchmove",mo,false);
}
}