什么是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， $emit，$ 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

Vue