20、vue-router有几种导航钩子
有3种
第一种是全局导航钩子，router.BeforeEach(to,from,next)
第二种是组件内部导航钩子，beforeRouterEnter，beforeRouterUpdate，beforeRouterLeave。
第三种是单独路由独享组件：beforeEnter(to,from,nex)
21、怎么定义vue-router的动态路由？怎么获取传过来的值
定义动态路由有2种，一种是params，一种是query
第一种params，通过/router/:参数名，传参，用$route.params.参数名，来获取传过来的值。
第二种是query，通过/route?参数名=123，传参，用$route.query.参数名，来获取传过来的值。
23、$router和$route的区别
$routerj是路由的实例方法，可以认为是全局的路由对象，包含所有路由的对象和属性。$route是一个跳转的路由对象，可以认为是当前组件的路由管理，指当前被激活的路由对象，包含当前URL解析得到的数据，可以获取name，path。
24、Vue3.0特性
- 使用了Proxy替换Object.defineProperty，重构响应式系统
- 优点：
- 1、可以直接监听数组类型的数据变化
- 2、监听目标为对象本身，不需要像Object.defineProperty一样遍历每个属性，有一定的性能提升。
- 3、直接实现对象属性的添加、删除。
25、vue中的data发生变化，视图不更新如何解决？
- 1、用this.$set()方法重置属性
- 2、调用this.$foreUpdate()强制更新视图
26、vue指令
- v-if/show：判断是否显示隐藏
- v-for：数据循环
- v-bind：绑定属性
- v-on：绑定方法
27、如何获取DOM
- 获取dom节点可以用ref属性，这个属性就是来获取dom对象的，this.$refs.属性名
28、虚拟DOM的优缺点
1、虚拟DOM就是JS对象，作用就是记录新树和旧树的差异，最后把差异更新到真实DOM中。
优点：虚拟DOM具有批处理和高效的Diff算法，最终表现在DOM上的修改只是变更的部分，可以保证高效地渲染数据，优化性能。
缺点：第一次渲染大量的DOM，由于加了一层虚拟DOM，所以会比innerHTML慢点。
29、Diff算法
Diff 算法的作用就是对虚拟 dom 进行对比，并返回一个 patch 对象，这个对象的作用是存储两个节点不同的地方，最后用 patch里记录的信息去局部更新真实的 dom。
Diff算法的两个特点：
1、只会同级比较，不跨层级
2、Diff比较循环两边往中间收拢
30、Vue全家桶
Vue全家桶就是项目中所必备的各种插件和框架。
1、vue-cli：脚手架，vue.js开发的标准工具。
2、vue-router：路由管理器，实现单页面应用。
3、vuex：全局管理状态，集中存储所有组件的状态。
4、axios：基于promise的HTTP库，可以用在浏览器和node.js中
31、vue修饰符
- 1、.stop：阻止事件继续传播
- 2、.prevent：阻止标签默认行为
- 3、.self：只有在event.target是当前元素自身时触发处理函数
- 4、.once：事件只能发生一次
- 5、.passive：告诉浏览器你不想阻止事件的默认行为
32、vue2与vue3的区别
一、vue2数据双向绑定核心是通过Obejct.definepropety()对数据进行劫持结合发布-订阅模式的方式来实现的。而vue3是使用了 ES6中 的Proxy对数据进行代理。
好处：
1、defineProperty只能监听某个属性，不能对全对象监听，Proxy直接绑定整个对象即可。
2、Proxy可以监听数组，不用再去单独的对数组做特异性操作，可以检测到数组内部数据的变化
33、渐进式
- 用自己想用或者能用的功能特性，不想用的部分功能可以先不用。VUE不强求你一次性接受并使用它的全部功能特性。
34、ajax
Ajax，它是浏览器提供的一种方法，实现页面无刷新就可以更新数据，提高用户浏览器应用的体验。
应用场景：1、页面上拉加载更多的数据。2、列表数据无刷新分页。3、表单项离开焦点数据验证。4、搜索框提示文字下拉列表。
Ajax原理：Ajax相当于浏览器发送请求与接收响应的代理人，以实现在不影响浏览器页面的情况下，局部更新页面数据，从而提高用户体验。
Ajax的实现步骤：
1、创建Ajax对象：var xhr=new XMLHttpRequest();
2、告诉Ajax请求地址以及请求方式：xhr.open('get','http://www.baidu.com');
3、发送请求：xhr.send();
4、获取服务器端给客户端的响应数据：xhr.onload=function(){console.log(xhr.responseText);}
35、axios
axios是基于promise的http库，可运行在浏览器端和node.js中，简单来说就是ajax的封装。
它的作用就是在保证页面不刷新的时候，向服务器发出请求，提高用户浏览器应用的体验。
使用步骤：
1、安装axios：npm install axios
2、在App.vue中引入axios：import axios from ‘axios’
3、修改为 Vue 的原型属性，Vue.prototype.$axios = axios
36、ajax与axios的区别
Ajax是对原生XHR的封装，是异步的javascript和xml，ajax不是一门新技术，而是多种技术的组合，用于快速的创建动态页面，能够实现无刷新更新数据从而提高用户体验。
Axios 是一个基于 Promise 的 HTTP 库，可以用在浏览器和 node.js 中；是请求资源的模块；通过promise对ajax的封装。
axios和ajax的区别：
axios是通过Promise实现对ajax技术的一种封装，就像jquery对ajax的封装一样。
简单来说就是ajax技术实现了局部数据的刷新，axios实现了对ajax的封装，
axios有的ajax都有，ajax有的axios不一定有。
总结一句话就是axios是ajax，ajax不止axios。
37、vue的挂载过程
1、Vue在初始化的时候调用会调用_init方法，来定义事件和生命周期函数
2、调用$mount对页面进行挂载，主要通过mountComponent方法
3、定义updateComponent更新函数，执行render生成虚拟DOM
4、最后_update将虚拟DOM生成真实DOM结构，并且渲染到页面中
38、webpack
Webpack 是一个前端资源加载/打包工具。
它的作用是将多种静态资源 js、css、less 转换成一个静态文件，减少了页面的请求。
webpack打包原理：将所有依赖打包成一个bundle.js，通过代码分割成单元片段按需加载。
webpack的基本打包配置：
1、初始化：yarn init -y
2、安装依赖包：yarn add webpack webpack-cli -D
3、到package.json文件中配置scripts： "scripts": { "build":"webpack --config webpack.config.js"}
4、配置webpack.config.js文件：module.exports={entry（入口），output（出口），mode（模式）}
5、打包：yarm build
vue打包的话，可以利用vue-cli脚手架自动生成webpack配置，然后npm run build打包即可
