Vue基础知识点
1、Vue常见的指令有哪些？
v-for：数据循环
v-if v-show：数据的显示隐藏
v-module：双向数据绑定
v-on：事件绑定 简化：@
v-bind：属性绑定 简化：:
v-focus：获取焦点
v-once：只渲染组件和元素一次
v-clock：解决渲染页面时会出现页面的闪烁问题
2、Vue的生命周期
Vue实例从创建到销毁的过程称之为生命周期；
四个阶段八个过程
create创建、mounte加载、update更新、destory删除
beforeCreate:实例初始化之前，数据还未加载
created:实例初始化，数据请求到了，但是还未加载页面
beforeMounte:此时模板已经编译完成，但是还未挂载到页面
mounted:内存中的编译已经挂载到页面
beforeUpdate:页面中的数据还未更新，但是data中的数据已经更新
updated:页面和data中的数据都已经更新完毕
beforeDstory:此时数据已经进入销毁阶段，但是实例还未真正销毁
destoryed:数据已经销毁完成
3、Vue组件之间值的传递
父传子 props 子传父 $emit 同级之间 eventBus
4、Vue中$route与$router的区别
$route：路由信息对象(局部变量)，每一个路由都有它自己的route，route中记录了当前路由的name、path、params、query；
$router：全局的路由实例(全局变量)
路由的传参可以通过params、query来进行传参
query方式：
this.$router.push({path: '/user', query: {id: '231'})
获取通过：this.$route.query.id
params方式
this.$router.push({path: '/user', params: {id: '123'})
获取通过：this.$route.params.id
5、Vue路由的钩子函数
全局钩子：
beforeEach：三个参数 to form next
to：要跳转的页面
form：从那个页面跳转
next：一定要调用该方法resolve这个钩子 * 必须调用
一般用在登录判断时使用此钩子函数
afterEach：没有next方法，不能改变导航钩子，代表已经确定了导航之后如何去执行，附带的一个钩子函数
单个路由独享的钩子：
beforeEnter：(to, form, next){}
beforeLeave: (to, form, next){}
一般用在当你将要关闭页面时，弹出一个对话窗是否关闭
组件内钩子：
beforeRouteEnter：(to, form, next){}
函数内部的this指向undefined，因为执行路由钩子函数beforeRouteEnter时，组件还未创建；先执行beforeRouteEnter再执行的beforeCreate。
beforeRouteLeave：(to, form, next){}
子路由切换时执行此钩子函数
beforeRouteUpdate：(to, form, next){}
页面路由切换，跳转路由离开的时候触发
6、Vue路由的跳转方式
一、router-link :to=""
二、this.$router.push({path: '/uesr', query/params: '123'})
三、this.$router.replace({path: '/uesr', query/params: '123'})
四、this.$router.go(可以正数/负数 -- 正数返回上一个页面)
this.$router.push 与 this.$router.replace的区别
this.$router.push跳转不同的url页面，但是会向history添加一个记录，点击返回按钮可以返回上一个页面；this.$router.replace也会跳转指定的页面，但跳转不会向history添加记录，点击返回按钮会返回上上一个页面，上一页面是不存在的。
7、Vue中计算属性computed、方法methods与侦听属性watch的区别
computed计算属性获取的值会进行缓存，当我们访问时它会立即获取之前的计算结果，而不必在进行多次访问；相反如果不想将值进行缓存，可以使用methods方法；
举个例子：假设有一个性能开销较大的计算属性A，它需要遍历一个庞大的数组来进行大量的计算，然后我们有其他的数据可能会依赖于A，如果没有缓存，将不可避免的多次执行A的 getter；当然，如果不想进行缓存，就使用方法。
watch 它是一个对象，键是需要观察的表达式，也可以是一个方法名。当你需要数据在发生改变的时候需要执行异步操作或者开销较大的操作时使用它；使用watch允许我们执行异步操作(访问一个API)，限制执行操作的频率，在为得到数据之前，可以添加一个中间状态，计算属性是无法做到。
8、Vue第一次加载页面会执行哪些钩子函数？
beforeCreate、created、beforeMounte、ounted
9、Vue实现双向数据绑定的原理
利用object.defineProperty()这个方法，重新定义了对象属性获取属性值get，和设置属性值set的操作来实现。
10、Vue路由hash模式与history模式
hash模式--即地址栏中#以及#后的值。例如http://12.0.0.1:8000/#/user,hash值为#/user。它的特点在于 hash虽然出现在请求当中，但是它不会包含在http请求当中，对后端完全没有任何影响，改变hash值也不会重新渲染页面。
hsitory模式--利用科H5新增的特性pushState()与replaceState()方法，应用于浏览器的历史记录栈，对历史记录提供了修改的功能。当它们执行时，虽然改变了地址的URL，但是不会立即向后端发送请求。
11、Vue中DOM渲染在哪个周期中完成？
在 mounted 中完成
12、Vue常用的修饰符有哪些？
.prevent 阻止默认事件
.stop 阻止冒泡
.onces 事件只触发一次
.self 只有点击当前元素才能触发
13、Vue中key值的作用
更加高效的渲染组件
14、Vue中如何解决跨域问题？
一、后台更改header
二、通过jQuery提供的jsonp请求
三、通过vue-cli脚手架中http-proxy-middleware代理的方式
1、打开config/index.js，在proxyTable加入以下代码
proxyTable: {
'/api': { // 使用api来代替http://127.0.0.1:3000
target: 'http://127.0.0.1:3000', // 原地址
changeOrigin: true, // 改变原
pathRewiter: {
/api: 'http://127.0.0.1:3000'
}
}
}
2、使用axios请求数据时直接使用 /api
getDate(){
axios.get('/api/index.json', res => {
console.log(res)
})
}
通过这中方法去解决跨域，打包部署时还按这种方法会出问题。解决方法如下：
let asd= '/api/' //本地调试时
// let asd= 'http://127.0.0.1:3000' //打包部署上线时
export default {
dataUrl: asd+ 'index.json'
}
15、Vue中created和mounted的区别
created 钩子在每次页面加载时都会进行重复调用
mounted 钩子只有在第一次加载页面时会调用钩子，之后重复打开页面不会再调用
16、Vue获取数据在哪个周期函数？
在created、beforeMounte、mounted
17、Vue中如何定义动态路由？如何获取传递过来的值？
通过 index.js 文件中在 添加 /:id 通过params.id来获取
18、Vue中vue-router有哪几种导航钩子？
一、全局导航钩子
二、单个路由独享钩子
三、组件内的钩子
19、Vuex是什么？
vue中的状态管理工具。单一的状态数。可以理解为一个应用的数据集合，类似一个前端的数据库，让它在各个页面上实现数据的共享，并且可以对它进行操作。
20、Vuex有哪几种属性？
state 可以理解为vue中的data对象，是用来保存最基本的数据
getters 可以理解为vue中的计算属性，对state中的数据处理
mutations 更改vuex中store的唯一方法，只可执行同步操作
actions 与mutations类似，可以执行异步操作
module 将store分割模块，每个模块都有自己的state、getters 、mutations、actions甚至是嵌套子模块
在组件中获取通过 this.$store.state/getters/.***来获取
在组件内提交数据通过 this.$store.commit()
