1.双向数据绑定?
model => view 以及 view => model 的双向绑定
把Model绑定到View,JS代码更新Model时,View就会自动更新;
用户更新了View,Model的数据也自动被更新了
1.双向绑定由三个重要部分构成:MVVM
1)数据层(Model)
2)视图层(View)
3)业务逻辑层(ViewModel):将数据与视图关联起来
2.ViewModel的功能:1)数据变化后更新视图
2)视图变化后更新数据
3.ViewModel的两个主要部分:1)监听器(Observer):对所有数据的属性进行监听
2)解析器(Compiler):对每个元素节点的指令进行扫描跟解析,根据指令模板替换数据,以及绑定相应的更新函数
4.流程:1)new Vue()首先执行初始化,对data执行响应化处理,这个过程发生Observe中
2)同时对模板执行编译,找到其中动态绑定的数据,从data中获取并初始化视图,这个过程发生在Compile中
3)同时定义⼀个更新函数和Watcher,将来对应数据变化时Watcher会调用更新函数
4)由于data的某个key在⼀个视图中可能出现多次,所以每个key都需要⼀个管家Dep来管理多个Watcher
5)将来data中数据⼀旦发生变化,会首先找到对应的Dep,通知所有Watcher执行更新函数
2.组件通信
1)父子组件之间的通信
1.props / $emit
1)父组件通过props向子组件传递数据:子组件的数据会随着父组件不断更新。
2)子组件通过$emit和父组件通信:$emit绑定一个自定义事件,当这个事件被执行时就会将参数传递给父组件,而父组件通过v-on监听并接收参数。
2.ref / $refs
1)在子组件上,ref的引用指向了子组件的实例。可以通过实例来访问组件的数据和方法。
2)父组件中通过this.$refs来访问
2)兄弟组件之间的通信
1.EventBus
使用场景:兄弟组件传值
创建一个中央事件总线EventBus
兄弟组件通过$emit触发自定义事件,$emit第二个参数为传递的数值
另一个兄弟组件通过$on监听自定义事件
2.$parent 或$ root
通过共同祖辈$parent或者$root搭建通信桥连
兄弟组件:this.$parent.on('add',this.add)
另一个兄弟组件:this.$parent.emit('add')
3)祖孙与后代组件之间的通信
1.$attrs 与$ listeners
使用场景:祖先传递数据给子孙
设置批量向下传属性$attrs和 $listeners
包含了父级作用域中不作为 prop 被识别 (且获取) 的特性绑定 ( class 和 style 除外)。
可以通过 v-bind="$attrs" 传⼊内部组件
2.provide 与 inject
祖先组件通过provide发送传递的值
后代组件通过inject接收值
4)复杂关系的组件间通信
Vuex作用相当于一个用来存储共享变量的容器
3.input输入框的内容发生改变后台怎么知道?
监听