Vue的响应式原理
我们先创建一个vue实例,data会被传入到一个observer对象里面,这个观察者的核心就是做了一个object.defineProperty,将我们data中的所有数据都用object.defineProperty 做一个监听,监听他的set ,get。比如在data中传入两个数据,一个name:‘why’,一个age:18,那么他在Observer这个对象里面就要对这两个属性进行劫持,这时所做的事情就是一个属性创建一个Dep对象;在Observe中主要做的就是给我们每个属性创建了Dep对象。
分析解析这一部分,我们从vue实例中将el模板传入到Compile中,解析el模板中的指令,他就根据我们类似于mustache语法,比如说我们用了{{name}},{{name}},{{age}},{{age}},那这样的话,他在解析el的时候,使用了一个{{name}}就创建一个Watcher,创建完Watcher之后,这个Watcher又被加入到name->Dep->subs->[watcher]中去;那么你不觉得它在解析的时候就将我们对应的属性,创建出来对应的Watcher并且添加到对应的Dep的subs中。
Compile除了创建出来对应的Watcher还给它初始化我们的一个View,即界面让其现显示的东西,这是界面上就显示的是why why 18 18 ;
现在我们将实例中的name:‘why’ 改成 name:‘kobe’,此时在Observer对data中的数据进行了一个监听,那就意味着它立马就能监听到name属性发生了变化,就调用一个Dep中的叫做notify函数,遍历我们subs里面的所有属性,对我们的所有的watcher进行一个遍历,调用watcher中的updata方法,而update中的方法就是将我们的界面上的View中之前的 why why 18 18 变成 kobe kobe 18 18
主要解决两个问题
- app.message修改数据,Vue内部是如何监听message数据的改变的;
——Object.defineProperty ->监听对象属性的改变 - 当数据发送改变,Vue是如何知道要通知哪些人,界面发生刷新
——发布订阅者模式
Vue的双向绑定原理
双向数据绑定通常是指我们使用的v-model指令的实现,是Vue的一个特性,也可以说是一个input事件和value的语法糖。 Vue通过v-model指令为组件添加上input事件处理和value属性的赋值。
<template>
<input v-model='localValue'/>
</template>
上面的组件就相当于下面的代码
<template>
<!-- 这里添加了input时间的监听和value的属性绑定 -->
<input @input='onInput' :value='localValue' />
<span>{{localValue}}</span>
</template>
<script>
export default{
data(){
return {
localValue:'',
}
},
methods:{
onInput(v){
//在input事件的处理函数中更新value的绑定值
this.localValue=v.target.value;
console.log(this.localValue)
}
}
}
</script>
因此当我们修改input输入框中的值时,我们通过v-model绑定的值也会同步修改,基于上述原理,我们可以很容易的实现一个数据双向绑定的组件。
区分响应式和双向绑定
- 响应式一般指:数据改变驱动视图改变,是单向的
- 双向绑定:是双向的,视图反过来也可以改变数据。也就是说响应式是双向绑定的一环