目录
22. vue-router实现路由懒加载（ 动态加载路由 ）
24. 请说出vue.cli项目中src目录每个文件夹和文件的用法？
1. vue的优点
- 低耦合：View独立于Model的变化和修改，当View变化的时候Model可以不变，当Model变化的时候View也可以不变
- 可重用性：可以把一个视图逻辑放在一个ViewModel里，让很多View重用这段视图逻辑
- 独立开发：开发人员可以专注于业务逻辑和数据的开发，设计人员可以专注于页面设计
- 可测试：可以针对ViewModel来写测试
2. vue的两个核心点
数据驱动： ViewModel，保证数据和视图的一致性。组件系统： 应用类UI可以看作全部是由组件树构成的。
3. vue和jQuery的区别
jQuery是使用选择器（ $ ）选取DOM对象，对其进行赋值、取值、事件绑定等操作，其实和原生的HTML的区别只在于可以更方便的选取和操作DOM对象，而数据和界面是在一起的。比如需要获取label标签的内容：$(“lable”).val();,它还是依赖DOM元素的值。Vue则是通过Vue对象将数据和View完全分离开来了。对数据进行操作不再需要引用相应的DOM对象，可以说数据和View是分离的，他们通过Vue对象这个vm实现相互的绑定。这就是传说中的MVVM。
4. 组件化思想
什么是组件化：独立的，可复用的，整体化的 。
为什么要组件化：1.实现功能模块的复用 2.高效执行 3.开发单页面复杂应用
如何进行拆分：1.300行原则 2.复用原则 3.业务复杂性原则
组件带的问题：1.组件状态管理（vuex）2.多组件的混合使用，多页面，复杂业务（vue-router）3.组件间的传参，消息，事件管理（props，emit/on，bus）
5. 请说下封装 vue 组件的过程？
- 建立组件的模板，先把架子搭起来，写写样式，考虑好组件的基本逻辑。
- 准备好组件的数据输入。
- 即分析好逻辑，定好
props里面的数据、类型。 - 准备好组件的数据输出。即根据组件逻辑，做好要暴露出来的方法。
- 封装完毕了，直接调用即可
6. MVVM
- MVVM是Model-View-ViewModel的缩写，是一种设计思想
- Model代表数据模型，也可以在Model中定义数据修改和操作的业务逻辑
- View代表UI组件，它负责将数据模型转化成UI展现出来
- ViewModel是一个同步View和Model的对象
- View和Model之间并没有直接的联系，而是通过ViewModel进行交互
- Mode和ViewModel之间的交互是双向的，因此View数据的变化会同步到Model中，而Model数据的变化也会立即反应到View上
- ViewModel通过双向数据绑定，把View层和Model层连接起来，而View和Model之间的同步工作完全是自动的，无需人为干涉
- 因此开发者只需关注业务逻辑，不需要手动操作DOM，不需要关注同步问题，复杂的数据状态维护由MVVM统一管理
7. 双向绑定
vue 双向数据绑定是通过 数据劫持 结合 发布订阅模式的方式来实现的，也就是说数据和视图同步，数据发生变化，视图跟着变化，视图变化，数据也随之发生改变；核心：关于VUE双向数据绑定，其核心是 Object.defineProperty() 方法。
vue实现数据双向绑定主要是：采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty（）来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应监听回调。当把一个普通 Javascript 对象传给 Vue 实例来作为它的 data 选项时，Vue 将遍历它的属性，用 Object.defineProperty 将它们转为 getter/setter。用户看不到 getter/setter，但是在内部它们让 Vue 追踪依赖，在属性被访问和修改时通知变化。
vue的数据双向绑定 将MVVM作为数据绑定的入口，整合Observer，Compile和Watcher三者，通过Observer来监听自己的model的数据变化，通过Compile来解析编译模板指令（vue中是用来解析 {{}}），最终利用watcher搭起observer和Compile之间的通信桥梁，达到数据变化 —>视图更新；视图交互变化（input）—>数据model变更双向绑定效果。
8. watch和computed？
computed 是计算属性，依赖其他属性计算值，并且 computed 的值有缓存，只有当计算值变化才会返回内容。
watch 监听到值的变化就会执行回调，在回调中可以进行一些逻辑操作。
所以一般来说需要依赖别的属性来动态获得值的时候可以使用 computed，对于监听到值的变化需要做一些复杂业务逻辑的情况可以使用 watch。
computed : 当一个属性受多个属性影响的时候就需要用到 computed ，最典型的栗子：购物车商品结算的时候
watch : 当一条数据影响多条数据的时候就需要用 watch ，栗子：搜索数据
9. 什么是计算属性
计算属性类似于方法，但我们把它看作是属性，如果需要频繁调用，建议使用计算属性
计算属性自带set和get方法，但我们一般不考虑set方法
所以，我们把每个计算属性写成一个函数，函数中使用return返回属性值
10. v-if和v-show
共同点： 都能控制元素的显示和隐藏
不同点： 实现本质方法不同，v-show本质就是通过控制 css 中的 display 设置为 none，控制隐藏，只会编译一次；v-if 是动态的向 DOM 树内添加或者删除 DOM 元素，若初始值为 false ，就不会编译了，即只会渲染一个dom元素。而且 v-if不停的销毁和创建比较消耗性能。
总结：对于一次选择或者数据更新不频繁时，选择v-if;如果需要频繁切换，需要v-show，用display：none控制隐藏和显示效果比较好，否则用v-if会导致dom结点频繁的销毁加载。
11. v-if和v-for的优先级
当 v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级，这意味着 v-if 将分别重复运行于每个 v-for循环中。所以，不推荐 v-if 和 v-for 同时使用。如果 v-if 和 v-for 一起用的话，vue中的的会自动提示 v-if应该放到外层去。
12. vue事件修饰符
v-on
- stop：阻止事件冒泡
- prevent：阻止表单自动提交
- enter：只监听回车键
- once：只触发一次事件
- native：监听组件的原生事件
v-model
- lazy：让data在失去焦点或按下回车时才更新
- number：让表单输入的内容自动转换成数字类型
- trim：去除输入的内容两边的空格
13. vue常用指令
- v-if：根据表达式的值的真假来显示或隐藏元素
- v-show：和v-if功能类似
- v-for：循环创建元素，vue2.0以上必须配合key值使用
- v-bind：动态绑定属性
- v-on：监听指定元素的DOM事件
- v-model：实现表单的value与vue实例的data的双向绑定
- v-pre：用来显示原始的Mustache标签，跳过它的编译过程
- v-once：只渲染元素和组件一次
14. 组件间通信
（1）父组件向子组件传值
在组件的vue实例中，设置props对象，对象中的每个成员，都是父组件要传递的数据
在父组件中，把data使用v-bind绑定给子组件需要的数据
（父组件访问子组件：给子组件添加ref属性；通过this.$refs.ref属性值来访问子组件，可以直接调用子组件的data和methods）
（2）子组件向父组件传值
在子组件中绑定一个事件
在事件对应的方法中，使用this.$emit()向父组件发出事件，参数为事件名
父组件使用v-on来监听子组件传递的事件，将该事件绑定给某个方法
（子组件访问父组件：通过this.$parent来访问父组件；通过this.$root来访问子组件）
（3）兄弟组件
A. 兄弟之间传递数据需要借助于事件中心，通过事件中心传递数据; 提供事件中心 var hub = new Vue()
传递数据方，通过一个事件触发hub.$emit(方法名，传递的数据)
接收数据方，通过mounted(){} 钩子中 触发hub.$on()方法名
销毁事件 通过hub.$off()方法名销毁之后无法进行传递数据
B. 多级组件嵌套需要传递数据时，通常使用的方法是通过vuex。
C. 但如果仅仅是传递数据，而不做中间处理，使用 vuex 处理，未免有点大材小用。为此Vue2.4 版本提供了另一种方法----$attrs/$listeners
D.方法六、$parent / $children与 ref
ref：如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件实例$parent/$children：访问父 / 子实例
参考链接： https://juejin.im/post/5cde0b43f265da03867e78d3
15. 生命周期
通常可以分为3个阶段：挂载阶段---更新阶段---销毁阶段
beforeCreate(), created(), beforeMounte(), mounted(), beforeupdate(), updated(), beforeDestroy(), destoryed()
- beforeCreate：创建前，vue实例的data和挂载元素el都还拿不到
- created：创建后，能拿到data的值，但挂载元素el还拿不到 （http请求在此处发出）
- beforeMount：挂载前，挂载元素el初始化，但还是虚拟的DOM节点
- mounted：挂载后，vue实例挂载成功 （最早可以在此进行DOM操作）
- beforeUpdate：更新前，data变化后触发
- Updated：更新后，data变化后触发
- activated：进入页面后触发
- deactivated：离开页面后触发
- beforeDestroy：销毁前，调用destroy方法后触发
- destroyed：销毁后，调用destroy方法后触发，Vue实例销毁
16. created和mounted的区别
- created:在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图。
- mounted:在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作。
17. Vuex
（1）vuex的作用
- Vuex提供一个在多个组件间共享状态的插件
- 把需要多个组件共享的变量全部存储在一个对象里面
- 把这个对象放在顶层的Vue实例中，让其它组件可以使用
（2）vuex原理
- Vuex是vue的一个插件，只能用在vue上，因为它高度依赖vue的插件系统
- Vuex中的store对象，本质就是没有template的隐藏着的vue组件
（3）vuex框架核心流程
- Vuex规定所有的数据操作，都必须通过Vue Components -> Actions -> Mutations -> State的流程来进行
- 也就是：
- 首先，在组件中关联actions：
this.$store.dispatch() - 接着，在actions中，关联mutations：
context.commit() - 最后，在mutations中，修改state：
state.info = ...
- 首先，在组件中关联actions：
（4）使用场景：需要构建一个中大型单页应用，可能会考虑如何更好地在组件外部管理状态时
18. vuex有哪几种属性？
有五种，分别是 State、 Getter、Mutation、Action、 Module
state =>基本数据(数据源存放地)
getters => 从基本数据派生出来的数据
mutations => 提交更改数据的方法，同步！
actions=> 像一个装饰器，包裹mutations，使之可以异步。
modules => 模块化Vuex
19. vue-loader是什么？使用它的用途有哪些？
vue文件的一个加载器，将template/js/style转换成js模块。
用途：js可以写es6、style样式可以scss或less、template可以加jade等
20. vue-router有哪几种导航钩子？
第一种：是全局导航钩子：router.beforeEach(to,from,next)，作用：跳转前进行判断拦截。
第二种：组件内的钩子。
第三种：单独路由独享组件。
21. vue-router
- Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。
组件包含<router-link>和<router-view>和<keep-alive>vue-router两种模式- hash：原理是onhashchage事件，可以在window对象上监听这个事件
-
history：利用了HTML5 History Interface 中新增的pushState()和replaceState()方法。需要后台配置支持。如果刷新时，服务器没有响应响应的资源，会刷出404，
22. vue-router实现路由懒加载（ 动态加载路由 ）
第一种： vue异步组件技术 ==== 异步加载，vue-router配置路由 , 使用vue的异步组件技术 , 可以实现按需加载 .但是,这种情况下一个组件生成一个js文件。
第二种： 路由懒加载(使用import)。
第三种：webpack提供的require.ensure()，vue-router配置路由，使用webpack的require.ensure技术，也可以实现按需加载。这种情况下，多个路由指定相同的chunkName，会合并打包成一个js文件。
23. keep-alive
Vue 内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染
- include：只有匹配的组件会保留状态
- exclude：只有匹配的组件不会保留状态
24. 请说出vue.cli项目中src目录每个文件夹和文件的用法？
assets 文件夹是放静态资源；components 是放组件；router 是定义路由相关的配置; app.vue是一个应用主组件；main.js 是入口文件。
25. $nextTick的使用
当你修改了data 的值然后马上获取这个dom 元素的值，是不能获取到更新后的值， 你需要使用 $nextTick 这个回调，让修改后的 data值渲染更新到dom元素之后在获取，才能成功。
26. vue组件中data为什么必须是一个函数？
因为 JavaScript的特性所导致，在 component 中，data 必须以函数的形式存在，不可以是对象。组建中的 data写成一个函数，数据以函数返回值的形式定义，这样每次复用组件的时候，都会返回一份新的 data，相当于每个组件实例都有自己私有的数据空间，它们只负责各自维护的数据，不会造成混乱。而单纯的写成对象形式，就是所有的组件实例共用了一个 data ，这样改一个全都改了。
27. vue slot
简单来说，假如父组件需要在子组件内放一些DOM，那么这些DOM是显示、不显示、在哪个地方显示、如何显示，就是slot分发负责的活。
28. axios
axios是基于promise用于浏览器和node.js的http客户端。vue自2.0开始，vue-resource不再作为官方推荐的ajax方案，转而推荐使用axios。
特点：支持浏览器和node.js；支持promise；能拦截请求和响应；能转换请求和响应数据；能取消请求；自动转换json数据；浏览器端支持防止CSRF（跨站请求伪造）
29. webpack
Webpack是一个打包工具，可以用它管理模块依赖；它可以很好地管理与打包Web开发中所用到的HTML、JS、CSS以及各种静态文件，让开发过程更高效
30. 如何让CSS只在当前组件中起作用?
在组件中的 style 前面加上scoped
31. 如何获取dom?
ref=“domName” 用法：this.$refs.domName
32. 单页面应用和多页面应用区别及优缺点
单页面应用（SPA），通俗一点说就是指只有一个主页面的应用，浏览器一开始要加载所有必须的 html, js, css。所有的页面内容都包含在这个所谓的主页面中。但在写的时候，还是会分开写（页面片段），然后在交互的时候由路由程序动态载入，单页面的页面跳转，仅刷新局部资源。多应用于pc端。
多页面（MPA），就是指一个应用中有多个页面，页面跳转时是整页刷新
单页面的优点：用户体验好，快，内容的改变不需要重新加载整个页面，基于这一点spa对服务器压力较小；前后端分离；页面效果会比较炫酷（比如切换页面内容时的专场动画）。
单页面缺点：不利于seo；导航不可用，如果一定要导航需要自行实现前进、后退。（由于是单页面不能用浏览器的前进后退功能，所以需要自己建立堆栈管理）；初次加载时耗时多；页面复杂度提高很多。
33. iframe的优缺点？
iframe也称作嵌入式框架，嵌入式框架和框架网页类似，它可以把一个网页的框架和内容嵌入在现有的网页中。
优点：（1）解决加载缓慢的第三方内容如图标和广告等的加载问题
（2）Security sandbox（3）并行加载脚本（4）方便制作导航栏
缺点：（1）iframe会阻塞主页面的Onload事件
（2）即使内容为空，加载也需要时间， （3）没有语意
34. vue3.0新特性
参考链接：https://blog.csdn.net/weixin_43932097/article/details/106787507?utm_source=app
965
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
