视频教程-仿Vue手把手带大家从零开始搭建一款MVVM框架-Vue

weixin_33755903

于 2020-05-28 10:24:00 发布

阅读量366

点赞数

本文链接：https://blog.csdn.net/weixin_33755903/article/details/106513692

版权

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

多年全栈开发经验及讲师培训经验，资深全栈大前端工程师；科盾科技前端开发主管；舆情大数据安全中心研发经验；

李广川

¥39.00

立即订阅

扫码下载「CSDN程序员学院APP」，1000+技术好课免费看

APP订阅课程，领取优惠，最少立减5元 ↓↓↓

视频教程-仿Vue手把手带大家从零开始搭建一款MVVM框架-Vue

学习有效期：永久观看

学习时长：237分钟

学习计划：4天

难度：中

「口碑讲师带队学习，让你的问题不过夜」

讲师姓名：李广川

开发组长/高级工程师

讲师介绍：多年全栈开发经验及讲师培训经验，资深全栈大前端工程师；科盾科技前端开发主管；舆情大数据安全中心研发经验；

☛点击立即跟老师学习☚

「你将学到什么？」

课程介绍

本套课程，大喵将带着大家手把手，编辑每一行代码，使用原生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 来统一管理。