Mvvm定义MVVM是Model-View-ViewModel的简写。即模型-视图-视图模型。【模型】指的是后端传递的数据。【视图】指的是所看到的页面。【视图模型】mvvm模式的核心，它是连接view和model的桥梁。它有两个方向：一是将【模型】转化成【视图】，即将后端传递的数据转化成所看到的页面。实现的方式是：数据绑定。二是将【视图】转化成【模型】，即将所看到的页面转化成后端的数据。实现的方式
原创
2021-05-01 22:23:02
529阅读
如何实现 MVVM 类 Vue 迷你框架（五）上面几节课我们已经把数据代理，响应式处理搞完了，接下来需要做什么呢？当然是最难的一部分了，就是我们的编译模板。使用到的dom编程方法eleme...
原创
2022-03-17 18:06:20
88阅读
如何实现 MVVM 类 Vue 迷你框架（一）
MVVM 框架的三大要素：
数据响应式
使用 Object.defineProperty 属性
使用 ES6 Proxy
监听数据变化，更新到视图上
模板插值
提供模板语法与数据绑定
插值：{{ }}
指令：v-bind,v-model 等等。
模板渲染
如果将模板转成 html
将实际数据替换
转载
2021-07-22 14:27:31
157阅读
如何实现 MVVM 类 Vue 迷你框架（六）我们先来讲讲怎么处理 model 以及事件：model 处理跟 text,html 处理相似事件处理需要找到 @ 属性的事件，给对应的节点添加...
原创
2022-03-17 18:06:19
67阅读
如何实现 MVVM 类 Vue 迷你框架（七）还有一件事件我们忘记处理，就是对数组的处理，Vue 内部处理一些数组方法，例如：push,pop,reverse,shift,unshift,...
原创
2021-07-18 14:01:28
109阅读
如何实现 MVVM 类 Vue 迷你框架（七）还有一件事件我们忘记处理，就是对数组的处理，Vue 内部处理一些数组方法，例如：push,pop,reverse,shift,unshift,...
原创
2022-03-17 18:06:19
85阅读
如何实现 MVVM 类 Vue 迷你框架（二）MVue 基础类通过 Observe 类对数据进行响应式处理数据被 get 的时候通过 Dep 收集对应数据的依赖 watcher数据被 se...
原创
2022-03-17 18:06:20
167阅读
如何实现 MVVM 类 Vue 迷你框架（四）接下来我们需要做什么处理呢？数据 getter 的时候将数据添加 watcher 监听数据 setter 的时候，通知 watcher 更新那...
原创
2022-03-17 18:06:22
86阅读
如何实现 MVVM 类 Vue 迷你框架（一）MVVM 框架的三大要素：数据响应式使用 Object.defineProperty 属性使用 ES6 Proxy监听数据变化，更新到视图上模...
转载
2022-03-20 16:56:24
100阅读
如何实现 MVVM 类 Vue 迷你框架（三）接下来我们需要在上节课的基础上，对数据进行响应式处理，大致的框架代码如下：classMVue{constructor(options)...
原创
2022-04-26 14:23:05
119阅读
vue采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty劫持data属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。 MVVM M - Model，Model 代表数据模型，也可以在 Model 中定义数据修改和操作的业务逻辑 ...
转载
2021-08-15 19:57:00
151阅读
2评论
把computed里面的数据，挂载在vm上即可实现function Vue(options = {}) { this.$optio
原创
2023-03-15 09:27:41
66阅读
Vue中的MVVM模型M 模型(Model)：对应data中的数据V 视图(View)：模板VM:视图模型(ViewModel): Vue实例对象这
原创
2022-12-21 10:29:12
73阅读
Vue（MVVM）、React(MVVM)、Angular(MVC)对比React与Vue对比相似点：使用 Virtual DOM提供了响应式 (Reactive) 和组件化 (Composable) 的视图组件。 将注意力集中保持在核心库，而将其他功能如路由和全局状态管理交给相关的库。 区别： 在 React 应用中，当某个组件的状态发生变化时，它会以该组件为根，重新渲...
原创
2022-09-13 12:44:07
309阅读
如何实现 MVVM 类 Vue 迷你框架（一）MVVM 框架的三大要素：数据响应式使用 Object.defineProperty 属性使用 ES6 Proxy监听数据变化，更新到视图上模板插值提供模板语法与数据绑定插值：{{ }}指令：v-bind,v-model 等等。
原创
2021-07-22 11:14:14
121阅读
如何实现 MVVM 类 Vue 迷你框架（四）接下来我们需要做什么处理呢？数据 getter 的时候将数据添加 watcher 监听数据 setter 的时候，通知 watcher 更新那么我们需要一个 Dep 类：需要一个用于添加 watcher 实例需要一个用于通知 watcher 实例更新class Dep { constructor() { this.deps = [] } addDep(watcher) { this.deps.push(w
原创
2022-03-17 18:06:22
71阅读
整体流程图 在10~15分钟完成的自定义Vue EasyFrame observe compile Watcher&Dep proxy
原创
2022-01-13 09:36:21
248阅读
本文能帮你做什么？1、了解vue的双向数据绑定原理以及核心代码模块2、缓解好奇心的同时了解如何实现双向绑定为了便于说明原理与实现，本文相关代码主要摘自vue源码, 并进行了简化改造，相对较简陋，并未考虑到数组的处理、数据的循环依赖等，也难免存在一些问题，欢迎大家指正。不过这些并不会影响大家的阅读和理解，相信看完本文后对大家在阅读vue源码的时候会更有帮助<本文所有相关代码均在git...
转载
2021-07-15 09:56:15
131阅读
如何实现 MVVM 类 Vue 迷你框架（四）
接下来我们需要做什么处理呢？
数据 getter 的时候将数据添加 watcher 监听
数据 setter 的时候，通知 watcher 更新
那么我们需要一个 Dep 类：
需要一个用于添加 watcher 实例
需要一个用于通知 watcher 实例更新
class Dep {
constructor() {
this.deps
原创
2021-07-20 11:06:56
143阅读
如何实现 MVVM 类 Vue 迷你框架（二）MVue 基础类通过 Observe 类对数据进行响应式处理数据被 get 的时候通过 Dep 收集对应数据的依赖 watcher数据被 set 的时候通过 Dep 通知对应的数据的依赖 watcher 进行数据更新操作最后是数据编译，将模板转成 vdom 最后转成 realdom实现 MVue 基础类第一步需要拿到外部传递进来的 options, dataclass MVue { constructor(options) {
原创
2022-03-17 18:06:23
81阅读
