vue 常用知识点梳理

1、vue2双向绑定原理

采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。

2、Vue3.x响应式数据原理

• Vue3.x改用Proxy替代Object.defineProperty 。
• 因为Proxy可以直接监听对象和数组的变化，并且有多达13种拦截方法。并且作为新标准将受到浏览器厂商重点持续的性能优化。
• Proxy只会代理对象的第一层，Vue3是怎样处理这个问题的呢？
  • 判断当前Reflect.get的返回值是否为Object，如果是则再通过reactive方法做代理， 这样就实现了深度观测。
  • 监测数组的时候可能触发多次get/set，那么如何防止触发多次呢？我们可以判断key是否为当前被代理对象target自身属性，也可以判断旧值与新值是否相等，只有满足以上两个条件之一时，才有可能执行trigger。

3、vue生命周期

beforeCreate( 组件的data和methods以及页面DOM结构，都还没有初始化)、

created( 实例已初始化，挂载阶段还没开始，$el 属性目前不可见)、

beforeMount（ 此时内存中的模板结构，还没有真正渲染到页面上；页面上看不到真实的数据，用户看到的只是一个模板页面而已）、mounted（ el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子）、

beforeUpdate、

updated、beforeDestory、destoryed

4、vue-router 导航守卫

1）全局守卫

        ① beforeEach（全局前置守卫）

        ② beforeResolve（全局解析守卫， 在导航被确认之前， 同时在所有组件内守卫和异步路由组件被解析之后，解析守卫就被调用）

        ③ afterEach（全局后置钩子， 和守卫不同的是，这些钩子 不会接受  next  函数也不会改变导航本身）

（2）单个路由独享的

         beforeEnter   这些守卫与全局前置守卫的方法参数是一样的）

（3）组件间的守卫

        beforeRouteEnter （ 不能  访问  this ，因为守卫在导航确认前被调用，因此即将登场的新组件还没被创建）

        beforeRouteUpdate

        beforeRouteLeave

5、Vuex有哪几种属性？

有五种，分别是state（存储状态）、getters（相当于计算属性）、mutations(同步更新数据)、a'ctions（异步更新数据）、modules(模块化)