仿Vue手把手带大家从零开始搭建一款MVVM框架

课程介绍 本套课程，大喵将带着大家手把手，编辑每一行代码，使用原生Javascipt及ES6的一些新特性，仿照目前国内非常流行的Vue框架的源码，开发构建一个属于你们自己的MVVM框架。 让大家能够很清晰的学习及掌握，模板编译，数据绑定，响应式，文档碎片，观察者模式，发布订阅模式等等，这些Vue的核心知识点，都是怎么回事，它们之间有哪些关联，是如何进行双向数据绑定的等等。 在使用vue2.x的核心Object.defineProperty构建完成框架后，大喵也会使用Vue3.0引入的数据劫持的Proxy新特性，来改造我们的MVVM框架，提升我们的框架性能。 最终，大喵会手把手带着大家，从0开始配置webpack.config.js配置文件以及引入babel-loader，配置.babelrc文件，转换我们JS文件中的的ES6语法，最终压缩输出我们的MVVM框架库文件。 课程目录 01 手把手搭建MVVM框架 课程介绍、02 文件结构及基础类创建、03 入口类DamiaoMvvm的实现、04 模板编译、05 元素节点解析编译、06 v-model 数据绑定逻辑梳理、07 v-model 数据绑定实现、08 模板文本编译逻辑梳理、09 模板文本渲染绑定、10 观察者Wather逻辑梳理、11 Wather 逻辑实现、12 Object.defineProperty()、13 defineProperty 小案例、14 observer数据劫持梳理、15 defineProperty数据劫持实现、16 发布订阅类实现、17 Proxy 介绍与概述、18 使用Proxy改造MVVM框架、19 使用Proxy实现响应式、20 webpack 打包配置、21 babel 配置及文件输出、22 Mvvm Proxy 框架打包、23 Mvvm 框架搭建课程总结 MVVM框架介绍 MVVM是 Model-View-ViewModel 的缩写。mvvm是一种设计思想。Model 层代表数据模型，也可以在Model中定义数据修改和操作的业务逻辑；View 代表UI 组件，它负责将数据模型转化成UI 展现出来，ViewModel 是一个同步View 和 Model的对象。 在MVVM架构模式下，View 和 Model 之间并没有直接的联系，而是通过ViewModel进行交互，Model 和 ViewModel 之间的交互是双向的， 因此View 数据的变化会同步到Model中，而Model 数据的变化也会立即反应到View 上。 ViewModel 通过双向数据绑定把 View 层和 Model 层连接了起来，而View 和 Model 之间的同步工作完全是自动的，无需人为干涉，因此开发者只需关注业务逻辑，不需要手动操作DOM, 不需要关注数据状态的同步问题，复杂的数据状态维护完全由 MVVM 来统一管理。