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

43次阅读

共计 2076 个字符，预计需要花费 6 分钟才能阅读完成。

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）更新完数据后告诉依赖更新

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

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 生命周期进行混入。

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 生命周期进行混入。

正文完