什么是vue
vue是通过JavaScript封装的一套前端框架，有自己独特的API和开发模式。
vue开发的是一个单页应用(SPA)，所谓单页应用开发模式就是我们不需要跳到新的页面，只需要在一个模板上加载和卸载不同的子模板来显示不同的页面。
vue的优点
- 轻量级框架
- 双向数据绑定
- 组件化
- 视图、数据和结构分离
- 虚拟DOM
- 运行速度更快
vue的组件化
所谓组件化，就是把页面拆分成多个组件，每个组件依赖的css，js，模板，图片等资源放在一起开发和维护。
虚拟DOM
虚拟dom其实就是vue使用js模拟出真实的dom，若一次操作中有10次更新DOM的动作，虚拟DOM不会立即操作DOM，而是将这10次更新的diff内容保存到本地一个JS对象中，然后一次性进行更新。这样可以提高浏览器的渲染性能。
vue中的key有什么作用
key是为了给虚拟dom添加标识，也就是id。因为vue的更新机制是差异化更新，也就是通过diff算法对比新旧虚拟dom的不同来进行更新，同层兄弟元素默认是按照下标来进行对比的，如果我们添加了key，那么就是对相同key的元素来进行对比，优化了渲染性能。
如何理解Vue的响应式系统
1.视图变化了，数据会自动更新；数据变化了，视图会自动更新
2.响应式原理其实就是双向数据绑定的原理
双向数据绑定
在vue2中，通过Object.defineProperty()完成对vue实例中数据的劫持，通过对data中数据进行set的劫持监听，然后通过
观察者模式，通知对应的节点进行数据更新。
vue3则是通过proxy来进行这个操作。但proxy的不同是它劫持的是整个对象，只要对象中的属性变化了都可以劫持到，而obj.dp只能对对象中的属性一个一个的劫持。所以vue3比vue2在性能方面提升了不少。
观察者模式
当一个对象或者数据被修改时，会自动通知依赖它的对象。
Object.definePropert和Proxy的优缺点？
Proxy：
直接监听整个对象，而非对象某个属性
可以监听数组的变化
Object.definePropert监听对象中的每一个属性
Keep-alive
Keep-alive是vue内置的一个组件，作用是可以缓存不活动的组件。比如我们组件切换之后，默认会进行销毁，如果你想不销毁上一个组件，就可以用keep-alive实现。
1.使用方法：用keep-alive标签包裹router-view标签，然后通过keep-alive的include或exclude属性去匹配需要缓存的组件。Include匹配的会被缓存，exclude匹配的不会被缓存。还可以通过路由里面的meta对象设置keepAlive属性为true进行缓存。
2.对于被缓存的组件，是不会被销毁和重新创建的，所以不会调用created这些生命周期函数，此时可以使用activated和deactivated这两个生命周期函数。
vuex
vuex是一个全局的状态管理，可以实现组件之间的数据共享。它有5个属性：
state：state里面存放数据。
mutation：存放操作state数据的方法。
action：存放异步的方法。
getters：将state里面的数据加工后给全局使用。
modules：模块化状态管理
参考链接
vue的生命周期函数
beforeCreate
created
beforeMount
mounted
beforeUpdate
updated
beforeDestroy
destroyed
activated：被keep-alive缓存的组件中，激活时
deavtivated：被keep-alive缓存的组件中，停用时
**父子组件的生命周期执行顺序
父created > 父beforeMount > 子created+mounted > 父mounted
组件通信
1.父子组件传值：props，
refs，$parent
2.父传子孙：父添加provide，子添加inject
3.vuex，本地存储
vue基本指令
v-text、v-html
v-bind：简写为 ：（冒号）
v-for
v-model：仅限以下标签：input select textarea
v-on：监听dom事件，简写为@；
v-show和v-if
事件修饰符：
- prevent:相当于调用了event.preventDefault()
<button @click.prevent='dianwo'></button>
- keycode:监听某个按键
<button @keydown.enter="login"></button>
<button @keydown.13="login"></button>
路由的四种跳转方式
1.router-link
2.push()
3.replace()
4.go()
参考链接
怎么去封装一个vue的自定义指令
使用vue.directive。
<script>
Vue.directive('color',{
inserted(el,bind){
el.style.background = bind.value
},
update(el,bind){
el.style.background = bind.value
}
})
</script>
<template>
<div v-color="red" ></div>
</template>
实现一个简单的双向绑定
<body>
<div id="app">
<input type="text" id="a">
<span id="b"></span>
</div>
<script type="text/javascript">
let obj={}
let val='he'
Object.defineProperty(obj,'hello',{
get:function(){
console.log('get val:'+val);
return val
},
set:function(newVal){
val=newVal
console.log('set val:'+val);
document.getElementById('a').value=val
document.getElementById('b').innerHTML=val
}
})
document.addEventListener('keyup',function(e){
obj.hello=e.target.value
})
obj.hello //调用get回调
obj.hello='hi' //调用set回调
</script>
</body>
https://blog.csdn.net/wuxy720/article/details/80151610
vue获取动态路由参数
可以通过query，param两种方式。
- param
// 方法1：
<router-link :to="{ name: 'index', params: { id: 123}}">按钮</router-link>
// 方法2：
this.$router.push({name:'index',params:{id:123}})
// 方法3：
this.$router.push('/index/' + 123)
————————————————
配置路由格式:/router/:id
传递后形成的路径：/router/123
通过$route.params.id获取
- query
// 方法1：
<router-link :to="{ name: 'index', query: { uname: tom}}">按钮</router-link>
// 方法2：
this.$router.push({ name: 'index', query:{ uname:tom }})
// 方法3：
<router-link :to="{ path: '/index', query: { uname:tom }}">按钮</router-link>
// 方法4：
this.$router.push({ path: '/index', query:{ uname:tom }})
// 方法5：
this.$router.push('/index?uname=' + name)
————————————————
传递后形成的路径:/route?id=123
通过$route.query获取
vue-router的routes中name属性作用详解
支付
-
支付宝方式：点击支付宝支付，调用后台接口，携带订单号等信息，后台返回一个form表单（html字符串结构），提交form就可以调用支付宝支付了。
04-07_00-25-11.png
