乐趣区

关于前端:vue原理相关总结

一、vue2.0 的双向绑定是怎么实现的

1、view 和 model 互相实时更新原理:Object.defineProperty 数据劫持 + 发布者 - 订阅者 (依赖收集) 模式
2、observer,compile,watcher(1)observe 是一个数据监听器,外围办法是 Object.defineProperty(2)watcher 是一个订阅者,将 Observer 发来的 update 音讯解决,执行更新(3)compile 是一个指令解析器,对须要监听的节点和属性进行扫描和解析。3、此模式的长处:不须要显式调用,能够间接告诉变动,更新视图;劫持了属性 setter,不须要额定的 diff 操作
4、Object.defineProperty 毛病(1)不能监听数组(2)不能监听整个对象,只能监听属性(3)不能监听属性的增删,只能监听变动
5、3.0 版本应用 Proxy(1)能够监听数组(2)可间接监听整个对象,不必层层递归属性(3)get 和 set 时候间接有参数,不须要独自存储变量(4)new Proxy()会返回一个新对象,不会污染源对象。6、参考文档:https://blog.nowcoder.net/n/8517450fe4fd4220b4078f9c61e42ec1#:~:text=Vue%20%E6%95%B0%E6%8D%AE%E5%8F%8C%E5%90%91%E7%BB%91%E5%AE%9A,%E6%89%A7%E8%A1%8C%E5%AF%B9%E5%BA%94%E7%9A%84%E6%9B%B4%E6%96%B0%E5%87%BD%E6%95%B0%E3%80%82

二、数据不更新的问题

1、更新的原理:在数据读取时收集依赖,在赋值时告诉依赖更新。2、object 有 defineProperty 办法,通过 getter,setter 只监听了属性的读取和赋值,然而新增属性和删除属性没有检测,所以专门提供了 $set 和 $delete 来实现

3、array,没有 defineProperty 办法,没有 setter,通过 get 和新建数组办法拦截器批改原生办法 push,pop,shift,unshift,splice,sort,reserve 来实现监听,而通过批改数组下标操作数组的不会被检测,所以专门提供了 $set 和 $delete 来实现

4、$set(target, key, value)和 $delete(target, propertyName/index)办法原理(1)判断 target 是否是 undefined,null,或者原始类型, 或者 vue 实例,或者 vue 实例的跟数据对象(2)target 为数组,则还是通过调用 splice 操作索引更新数据(3)target 为对象,且为响应式,则调用 defineReactive 操作数据(4)更新完数据后告诉依赖更新

三、computed 和 watch 和 methods

1、computed(1)设计初衷:为了使模板中的逻辑运算更简略(2)实用于数据被重复使用或者计算简单费时的场景;依赖其余数据的场景(3)读取缓存,依赖不变,则不需从新计算。(依据 dirty 标记判断)2、watch 是对数据的监听回调
3、computed 和 watch 的区别
相同点:都会察看页面的数据变动
不同点:(1)computed 是读取缓存,watch 每次都要从新执行;(2)watch 更适宜数据变动时的异步操作和开销较大的操作。4、computed 和 methods 的区别
computed 依赖缓存,能够定义 getter 和 setter,然而 methods 不行

四、vue-router 的模式区别

1、abstract:非浏览器环境下应用
2、hash:(1)默认。监听 hashchange 实现。(2)有点,兼容性好,ie8 反对(3)毛病:看起来奇怪
3、history:(1)h5 新增的。容许开发者间接批改前端路由而不从新触发申请页面(2)实现原理:监听 popstate 事件。能监听到用户点击浏览器的后退后退事件或者手动调用 go,back,forward 事件;不能监听到 pushState 和 replaceState 事件。(3)为了防止浏览器刷新呈现的 404 页面,须要在服务端配置兼容。(4)如果浏览器不反对,会降级到 hash 模式
* 通过 vue.use 插件机制和 vue.mixin 将 store 在 beforeCreate 和 destroyed 生命周期进行混入。

五、vuex 解决了什么问题

1、vuex 解决了 vue 我的项目中的数据状态治理问题
2、是组件通信的一种形式。3、原理:创立了繁多的状态树,蕴含 state,mutation,action,getter,module。4、view(dispatch)action(commit)mutation(mutate)state(render)view
5、通过 vue 的 SATA 和 computed,让 state 变成响应式,6、通过 vue.use 插件机制和 vue.mixin 将 store 在 beforeCreate 生命周期进行混入。
退出移动版