20200308-学习MVVM思想

女生的网名这么多〃 提交于 2020-03-08 16:38:55

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))

其他实现的一些内容还得重新理解理解。才能够自己动手的写出来
想要源码的可以联系我哈。。。。。。。。。

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!