VUE框架重点小总结

1. vue中的虚拟dom

虚拟dom的思想：对复杂的文档DOM结构，进行最小化地DOM操作。虚拟DOM相当于在js和真实DOM中间添加了缓存，利用diff算法避免了没有必要的dom操作，从而提高了性能。

具体实现

1. 用js对象结构表示DOM树的结构，然后根据这个结构构件一个真正的DOM树插入到文档中
2. 当状态改变时候重新构建新的对象树(虚拟dom)然后用新的树和旧的进行比较。记录差异
3. 将记录的差异部分在进行构件，视图更新

2. 双向绑定原理

vue使用ES5提供的Object.defineProperty()方法
angular采用脏值检查

3. vue生命周期的理解

1. beforeCreate--创建之前,组件实例被创建，组件属性计算之前，数据对象data都是undefined,还没有初始化
2. created--实例创建后，组件实例创建完成，属性已经绑定，数据对象data已经存在，但是dom还没有生成，$el还没有挂载,数据的获取一般在created阶段
3. beforeMount--挂载前，Vue实例的$el和data都已经实例化，挂载之前为虚拟dom节点，data.essage还没有替换
4. mounted--挂载到指定dom元素，Vue实例挂载完成，data.message成功渲染，可以操作dom节点
5. beforeUpdate--更新数据，当data中的数据方式变化时候会触发beforeUpdate方法(绑定了setter方法，和getter方法)
6. update--更新完毕
7. beforeDestory--销毁，组件销毁之前调用
8. destoryed--销毁后,组件销毁之后，对data的改变不会再出发周期喊，vue实例解除和dom的绑定，但是dom结构依然存在

4. axios的特点

1. axios是一个机遇promise的http库，支持promise的所有API
2. 可以拦截请求和响应
3. 可以转换请求数据和响应数据，并对响应回来的内容自动转换为json类型的数据
4. 安全性更高，客户端支持防御XSRF

5. axios的常用方法

    // get请求用于列表和信息的查询
    axios.get(url[, config])
    // delete删除
    axios.delete(url,[, config])
    // post请求用于信息的添加
    axios.post(url[, data[, config]])
    // 更新操作
    axios.put(url,[,data[, config]])

6. vuex是什么?如何使用？使用场景

vue框架中的状态管理
使用场景：单页面应用中，组件之间的状态。音乐播放、登录状态、加入购物车等
可以用来在兄弟组件之间传值

    var myStore = new  Vuex.Store()
    state:{
        // 保存了组件之间 的公共状态
        // 在组件中获得this.$store.state.name,一般放在computed属性中
    },
    mutations:{
        // 这里的方法是同步的
        // 显示的更改state中的数据，只有在mutateions中可以修改state中的数据，方法在各个组件之间是公共的
        // this.$store.commit('方法名' ,参数)
    },
    getters:{
        // 获得数据的方法，一般用来对数据进行筛选
        // this.$store.gette.r('方法名',参数)
    },
    actions:{
        // 处理异步的问题，这里不能直接改变状态，需要提交给mutattions让他提交
        add:function(context,value){
            setTimeout(function(){
                context.commit('changeNum','参数')
            })
        }
        // 在组件中派发事件，派发的是actions中的事件，
        // action中的函数被触发，执行提交commit到mutation进行 执行
        // 在组件中派发事件
        changeNum:function(){
            this.$store.dispatch('add',5)
        }
    }

7. 导航钩子有哪些

导航表示 路由正在发生改变
vue-router提供的导航守卫主要用来通过跳转或者取消的方式守卫导航.
参数或者查询的改变不会触发进入/离开导航守卫，可以通过观察$route对象或者使用beforeRouteUpdate的组件内守卫

完整的导航解析流程

1. 导航被触发
2. 在失活的组件里调用离开守卫
3. 调用全局的beforeEach守卫
4. 在重用的组件中调用beforeRounteUpdate守卫
5. 在路由配置中调用beforeEnter
6. 解析异步路由组件
7. 在被激活的组件中使用beforeRouterEnter
8. 调用全局的beforeResolve守卫
9. 导航确认
10. 调用全局的afterEach钩子
11. 触发DOM更新
12. 用创建好的实例调用beforeRouterEnter守卫中传给next的回调函数

全局钩子

    // 点击导航前调用
    router.beforeEach((to, from, next)=>{
        
    })
    // 点击导航后调用
    router.afterEach(route=>{})

当一个导航触发时，全局的 before 钩子按照创建顺序调用。钩子是异步解析执行，此时导航在所有钩子 resolve 完之前一直处于 等待中。

每个钩子方法接收三个参数：

to: Route: 即将要进入的目标 路由对象

from: Route: 当前导航正要离开的路由

next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。

单个路由独享的钩子

在配置路由上直接的定义

    routes:[
        {
            path:'foo',
            beforeEnter:(to,from,next) =>{
                
            },
            afterEnter:(route)=>{
                
            }
            
        }
    ]

组件内的钩子

     beforeRouteEnter (to, from, next) {
    // 在渲染该组件的对应路由被 confirm 前调用
    // 不！能！获取组件实例 `this`
    // 因为当钩子执行前，组件实例还没被创建
  },
  beforeRouteUpdate (to, from, next) {
    // 在当前路由改变，但是该组件被复用时调用
    // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
    // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
    // 可以访问组件实例 `this`
  },
  beforeRouteLeave (to, from, next) {
    // 导航离开该组件的对应路由时调用
    // 可以访问组件实例 `this`
  }

8. 封装vue组件的过程

使用Vue.extend方法创建一个组件，在Vue.component方法注册组件

9. vue.js的template模板编译

先转换为AST树，再得到render函数返回VNode(vue的虚拟DOM节点)

1. 首先童年complie编译器把template编译成AST语法树(abstract syntax tree) 源代码的出项语法结构树，
2. compile是createCompiler的返回值，createCompiler是用来创建编译器的,另外compile还负责合并option,AST会经过generate的到render函数，render函数返回的是VNode,VNode是Vue的虚拟DOM节点，(标签名，子节点、文本等等)

10.哪些项目适合vue框架

1. 数据信息量比较多，企业类的网站就不用考虑
2. 手机web和app应用多端公用一套界面的项目

11.vuex的属性

1. State
   仓库，用来存放对象数据，类似于Vue对象中的data,Vue组件从store中读取数据，如是store中的数据发生了改变，那么依赖数据的组件也会发生改变，童年mapState把群居的state和getters映射到当前组件中的computed
2. Getter
   getters可以对state中的数据进行计算，虽然组件内也可以做计算属性，但是getters可以在多组件之间进行复用
3. Mutation
4. Action
5. Module

12.vuex的问题

1. 可维护性会下降，要修改数据，要维护三个地方
2. 可读性会下降，因为一个组件中的数据，不知道是从哪里来的
3. 增加了耦合度，大量的上传和派发，会让耦合性大大的增加，本来Vue用Component是为了减少耦合度

12.keep-alive