发文时间:2019年01月24日 00:06:55 编辑:Aaron 标签:vue 974
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(模块化)
若无特殊说明,此文章为博主原创。 写稿不易,如需转载,请注明出处: https://www.aaroner.cn/art/18.html
Vue中常见的知识点
发文时间:2019年01月24日 00:06:55 编辑:Aaron 标签:vue 974
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(模块化)
若无特殊说明,此文章为博主原创。
写稿不易,如需转载,请注明出处: https://www.aaroner.cn/art/18.html