Vue的双向数据绑定原理是什么( 二 ) _组件

Vue的双向数据绑定原理是什么
前端,发布/订阅模式,Vue双向数据绑定
Vue双向绑定原理，教你一步一步实现双向绑定
通俗易懂了解Vue双向绑定原理及实现
深入响应式原理
(注: 在vue3.0中通过Proxy代理对象进行类似的操作)
答：vue.js 是采用数据劫持结合发布者-订阅者模式的方式，通过.()来劫持各个属性的，，在数据变动时发布消息给订阅者，触发相应的监听回调。
vue的数据双向绑定将MVVM作为数据绑定的入口，整合，和三者，通过来监听自己的model的数据变化，通过来解析编译模板指令（vue中是用来解析 {{}}），最终利用搭起和之间的通信桥梁，达到数据变化 —>视图更新；视图交互变化（input）—>数据model变更双向绑定效果。
实现Vue的数据双向绑定,需要如下：
具体步骤：
第四步：MVVM作为数据绑定的入口，整合、和三者，通过来监听自己的model数据变化，通过来解析编译模板指令，最终利用搭起和之间的通信桥梁，达到数据变化 -> 视图更新；视图交互变化(input) -> 数据model变更的双向绑定效果。
说明：实现数据的双向绑定，首先要对数据进行劫持监听，所以我们需要设置一个监听器，用来监听所有属性。如果属性发上变化了，就需要告诉订阅者看是否需要更新。因为订阅者是有很多个，所以我们需要有一个消息订阅器Dep来专门收集这些订阅者，然后在监听器和订阅者之间进行统一管理的。
Proxy与.的优劣对比?
Proxy的优势如下:
.的优势如下:
详细实现见 Proxy比优劣对比?
你是如何理解Vue的响应式系统的?
深入响应式原理
响应式系统简述:
虚拟DOM的优劣如何?
优点:
缺点:
虚拟DOM实现原理?
详细实现见虚拟DOM原理?
既然Vue通过数据劫持可以精准探测数据变化,为什么还需要虚拟DOM进行diff检测差异?
考点: Vue的变化侦测原理
前置知识: 依赖收集、虚拟DOM、响应式系统
现代前端框架有两种方式侦测变化,一种是pull一种是push
pull: 其代表为React,我们可以回忆一下React是如何侦测到变化的,我们通常会用显式更新,然后React会进行一层层的 Dom Diff操作找出差异,然后Patch到DOM上,React从一开始就不知道到底是哪发生了变化,只是知道「有变化了」,然后再进行比较暴力的Diff操作查找「哪发生变化了」，另外一个代表就是的脏检查操作。
push: Vue的响应式系统则是push的代表,当Vue程序初始化的时候就会对数据data进行依赖的收集,一但数据发生变化,响应式系统就会立刻得知,因此Vue是一开始就知道是「在哪发生变化了」,但是这又会产生一个问题,如果你熟悉Vue的响应式系统就知道,通常一个绑定一个数据就需要一个,一但我们的绑定细粒度过高就会产生大量的,这会带来内存以及依赖追踪的开销,而细粒度过低会无法精准侦测变化,因此Vue的设计是选择中等细粒度的方案,在组件级别进行push侦测的方式,也就是那套响应式系统,通常我们会第一时间侦测到发生变化的组件,然后在组件内部进行 Dom Diff获取更加具体的差异,而 Dom Diff则是pull操作,Vue是push+pull结合的方式进行变化侦测的.
vue组件间通信六种方式
详细使用方式参考:
vue组件间通信六种方式（完整版）
方法一、props/$emit
常规父组件与子组件通信方式
方法二、$emit/$on
，就是创建一个事件中心，相当于中转站，可以用它$emit/$on来传递事件和接收事件。项目比较小时，用这个比较合适。
方法三、vuex
vuex 是 vue 的状态管理器，存储的数据是响应式的。但是并不会保存起来，刷新之后就回到了初始状态，如果需要保存数据, 具体做法应该在vuex里数据改变的时候把数据拷贝一份保存到里面，刷新之后，如果里有保存的数据，取出来再替换store里的state