浅谈实现vue2.0响应式的基本思路
最近看了vue2.0源码关于响应式的实现，以下博文将通过简单的代码还原vue2.0关于响应式的实现思路。
注意，这里只是实现思路的还原，对于里面各种细节的实现，比如说数组里面数据的操作的监听，以及对象嵌套这些细节本实例都不会涉及到，如果想了解更加细节的实现，可以通过阅读源码observer文件夹以及instance文件夹里面的state文件具体了解。
首先，我们先定义好实现vue对象的结构
classVue{
constructor(options){
this.$options=options;
this._data=options.data;
this.$el=document.querySelector(options.el);
}
}
第一步：将data下面的属性变为observable
使用Object.defineProperty对数据对象做属性get和set的监听，当有数据读取和赋值操作时则调用节点的指令，这样使用最通用的=等号赋值就可以触发了。
//数据劫持，监控数据变化
functionobserver(value,cb){
Object.keys(value).forEach((key)=>defineReactive(value,key,value[key],cb))
}
functiondefineReactive(obj,key,val,cb){
Object.defineProperty(obj,key,{
enumerable:true,
configurable:true,
get:()=>{
returnval
},
set:newVal=>{
if(newVal===val)
return
val=newVal
}
})
}
第二步：实现一个消息订阅器
很简单，我们维护一个数组，这个数组，就放订阅者，一旦触发notify，订阅者就调用自己的update方法
classDep{
constructor(){
this.subs=[]
}
add(watcher){
this.subs.push(watcher)
}
notify(){
this.subs.forEach((watcher)=>watcher.cb())
}
}
每次set函数，调用的时候，我们触发notify，实现更新
那么问题来了。谁是订阅者。对，是Watcher。。一旦dep.notify()就遍历订阅者，也就是Watcher，并调用他的update()方法
functiondefineReactive(obj,key,val,cb){
constdep=newDep()
Object.defineProperty(obj,key,{
enumerable:true,
configurable:true,
get:()=>{
returnval
},
set:newVal=>{
if(newVal===val)
return
val=newVal
dep.notify()
}
})
}
第三步：实现一个Watcher
Watcher的实现比较简单，其实就是执行数据变化时我们要执行的操作
classWatcher{
constructor(vm,cb){
this.cb=cb
this.vm=vm
}
update(){
this.run()
}
run(){
this.cb.call(this.vm)
}
}
第四步：touch拿到依赖
上述三步，我们实现了数据改变可以触发更新，现在问题是我们无法将watcher与我们的数据联系到一起。
我们知道data上的属性设置defineReactive后，修改data上的值会触发set。那么我们取data上值是会触发get了。所以可以利用这一点，先执行以下render函数，就可以知道视图的更新需要哪些数据的支持，并把它记录为数据的订阅者。
functiondefineReactive(obj,key,val,cb){
constdep=newDep()
Object.defineProperty(obj,key,{
enumerable:true,
configurable:true,
get:()=>{
if(Dep.target){
dep.add(Dep.target)
}
returnval
},
set:newVal=>{
if(newVal===val)
return
val=newVal
dep.notify()
}
})
}
最后我们来看用一个代理实现将我们对data的数据访问绑定在vue对象上
_proxy(key){
constself=this
Object.defineProperty(self,key,{
configurable:true,
enumerable:true,
get:functionproxyGetter(){
returnself._data[key]
},
set:functionproxySetter(val){
self._data[key]=val
}
})
}
Object.keys(options.data).forEach(key=>this._proxy(key))
下面就是整个实例的完整代码
classVue{
constructor(options){
this.$options=options;
this._data=options.data;
this.$el=document.querySelector(options.el);
Object.keys(options.data).forEach(key=>this._proxy(key))
observer(options.data)
watch(this,this._render.bind(this),this._update.bind(this))
}
_proxy(key){
constself=this
Object.defineProperty(self,key,{
configurable:true,
enumerable:true,
get:functionproxyGetter(){
returnself._data[key]
},
set:functionproxySetter(val){
self._data[key]=val
}
})
}
_update(){
console.log("我需要更新");
this._render.call(this)
}
_render(){
this._bindText();
}
_bindText(){
lettextDOMs=this.$el.querySelectorAll('[v-text]'),
bindText;
for(leti=0;idefineReactive(value,key,value[key],cb))
}
functiondefineReactive(obj,key,val,cb){
constdep=newDep()
Object.defineProperty(obj,key,{
enumerable:true,
configurable:true,
get:()=>{
if(Dep.target){
dep.add(Dep.target)
}
returnval
},
set:newVal=>{
if(newVal===val)
return
val=newVal
dep.notify()
}
})
}
functionwatch(vm,exp,cb){
Dep.target=newWatcher(vm,cb);
returnexp()
}
classWatcher{
constructor(vm,cb){
this.cb=cb
this.vm=vm
}
update(){
this.run()
}
run(){
this.cb.call(this.vm)
}
}
classDep{
constructor(){
this.subs=[]
}
add(watcher){
this.subs.push(watcher)
}
notify(){
this.subs.forEach((watcher)=>watcher.cb())
}
}
Dep.target=null；
vardemo=newVue({
el:'#demo',
data:{
text:"helloworld"
}
})
setTimeout(function(){
demo.text="hellonewworld"
},1000)
上面就是整个vue数据驱动部分的整个思路。如果想深入了解更细节的实现，建议深入去看vue这部分的代码。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。