1.在学习Vue的过程中。发现后天的webpack都是配置,想提高开发效率,所以中断了Vue的学习进程(有兴趣的时候再去看吧)
2.这两天也是隔离的最后两天。于是3分热度的又想探索Vue是怎么实现双向绑定的。所以花了点时间学习了Vue MVVM的实现简单实现过程。https://www.bilibili.com/video/av54530725?t=2678&p=2
3.发现这个老师挺牛逼。手动实现,思路也挺清晰。
4.个人理解能力不强,看到第二个课程的时候跟不上了。没怎么明白是怎么实现双向绑定的。于是傻乎乎的跟着敲完实现了同样的功能。
5.我还是想弄清楚是一个怎么样的调用过程。于是乎花了几个小时的时间进行剖析代码执行
总的来说,
1.修改data中的对象声明方式。使用definepropery这个函数进行重新定义。使用这个函数的好处是,当数据发生改变的时候会触发get,set方法
Object.defineProperty(obj,key,{
get(){
//创建watcher时,会取到对应的target内容
//取的时候 存放这个watcher
Dep.target && dep.addSub(Dep.target)
return value;
},set:
(newVal)=>{ //{{persson.name}} = {}
if(value != newVal){
this.observer(newVal) //所以要监控/防止 person ={a:1}被后台改了
value = newVal;
//设置的时候通知
dep.notify()
}
}
})
2.进行编译(让页面中使用Vue标签的展现为正常内容)
- 添加watcher
- 添加事件(input)
- 替换html页面中展现的Vue标签-触发当前对象的set方法(Dep notify当前对象的观察者(watcher))
其他实现的一些内容还得重新理解理解。才能够自己动手的写出来
想要源码的可以联系我哈。。。。。。。。。
来源:CSDN
作者:wp_wnd
链接:https://blog.csdn.net/qq_33606071/article/details/104732584