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(模块化)

你可能感兴趣的:(vue,vue.js,前端)