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