vue响应式相关源码总结

响应式数据的原理

• 核心点：object.defineProperty

• 默认vue在初始化数据时，会给data中的属性使用object.defineProperty重新定义所有属性，当页面取到对应属性时，会进行依赖收集（收集当前组件的watcher） 如果属性发生变化会通知相关依赖进行更新操作

原理

• initDate——初始化用户传入的data数据

• new Observer —— 将数据进行观测

• this.walk(value)——进行对象的处理

• defineReactive——循环对象属性定义响应式变化

• Object.defineProperty——使用object.defineProperty重新定义数据

 

Vue为何采取异步渲染

• 如果不采取异步更新，每次更新数据都会对当前组件进行重新渲染，所以为了性能的考虑，vue会在本轮数据更新之后，再去一步更新视图

• 源码中depend（）中的notify（）

 

nextTick的实现原理是什么

• nextTick方法主要是使用了宏任务和微人物定义一个异步方法。多次调用nextTick会将方法存入队列中，通过这个异步方法清空当前队列，所以这个nextTick方法就是异步方法

• 注：$nextTick()是当页面被重新渲染之后，才会去指定回调函数中的代码，许多时候，由于从后端服务器请求的数据，当修改页面参数的时，前端页面还没有渲染完成，会造成数据和页面显示的内容不是我们想得到的效果，所以需要采用异步的方法，等待页面渲染完成，进行修改代码的回调。

 

Vue中的Computed的特点

• computed watch method的区别：

• method只要用到模板上，就会进行视图渲染，会使消耗很大

• computed只进行一次彻底的计算后，会将数据渲染并保留在木板上，可以随意调用，避免了视图的多次渲染，有点类似于精灵图。

• 当数据需要频繁的渲染和调用的时候，推荐使用computed

其实没有几年的工作经验的，看源码这东西确实挺难受的，做个简单的比喻，当你上小学一年级的时候，你会发现小学一年级的知识好难，学起来很吃力，但是当你五年级的时候在开始看到一年级的知识的时候，就会说这种傻逼题，也配给我看？（手动狗头。。。）