迷你vue

说一说我对于mvvm模型的理解吧

我第一次接触mvvm也是在学习vue的时候,在我看来vue和react都是数据驱动视图,但是vue属于标准的mvvm模型,react是从组件化演变而来

不多废话,直接粘图

第一次使用mvvm的时候感觉特别的神奇,我只是修改了数据就可以驱动视图的改变

• 学习mvvm模型的作用

一开始就是在学习vue的使用还有vuex等等很多,也能做一些小的网站,但就是没有办法提升自己的vue到一个更高的境界,后来就不断的往深了学习

听过网上的这么一句话

编程世界和武侠世界比较像,每一个入门的程序员,都幻想自己有朝一日,神功大成,青衣长剑,救民于水火之中,但是其实大部分的人一开始学习方式就错了,导致一直无法进入高手的行列,就是过于看中招式,武器,而忽略了内功的修炼,所以任你慕容复有百家武学,还有被我乔峰一招制敌,所以这就是内功差距

原理就是内功修炼的捷径

进入主题

• 原理

Object.defineProperty(obj,name,{get:function(),set:function()})

• 手写

mvvm主要分为两部

• kvue.js

1. 获取数据,先获取options
2. 把options.data的数据通过Object.key()解析
3. 进入主题 Obejct.defineProprety() 进行双向绑定
4. 接下来是两个类 Dep 和 Watcher (关系可以看上面的图片)

• compile.js

1. 获取dom宿主节点 options.el
2. 把宿主节点拿出来遍历,高效 createDocumentFragment()
3. 编译过程 判断是否是文本节点,如果是文本节点就通过正则的分组获取到{{}}插值表达式中间的值
4. 更新函数 初始化更新函数,调用Watcher