Vue2中MVVM框架

最新推荐文章于 2024-05-24 02:05:12 发布
最新推荐文章于 2024-05-24 02:05:12 发布
阅读量362 收藏 1
点赞数
分类专栏： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/MiemieWan/article/details/117035917
版权

代码仓库地址：https://github.com/141110126/write-vue/tree/main/jvue

一、MVVM框架

MVVM 框架的三要素： 数据响应式、模板引擎及其渲染
1.数据响应式：监听数据变化并在视图中更新
  • Object.defifineProperty()
  • Proxy
2.模版引擎：提供描述视图的模版语法
  • 插值：{{}}
  • 指令：v-bind，v-on，v-model，v-for，v-if
3.渲染：如何将模板转换为 html
  • 模板 => vdom => dom

 

二、Vue响应式原理

利用Object.defineProperty()劫持data数据,里面每个属性都定义了get和set方法 监听属性的变化，

依赖收集：每个属性也都有个数组 保存着谁（视图watcher）依赖了它，当获取属性触发get时，收集了依赖，

依赖更新：当属性变化触发set函数时，通知依赖，通知视图（watcher），视图（watcher）开始更新。

  •  Vue：框架构造函数
  • Observer： 执行数据响应化
  • Compile：编译模板，初始化视图，收集依赖（更新函数、watcher创建）
  • Watcher：执行更新函数
  • Dep：管理多个Watcher,批量更新

 

三、 数据拦截与代理

 Object.defineProperty():在一个对象上定义一个新属性，或者修改一个对象的现有属性， 并返回这个对象。

      get 值是一个函数，当属性被访问时，会触发 get 函数

      set 值同样是一个函数，当属性被赋值时，会触发 set 函数

 

Vue 是怎么知道数据被调用或改变的?

Vue对data对象中的每个属性进行了get、set监听，当属性被调用时触发get方法，当属性被改变时触发set方法，所以Vue 能知道数据被调用或改变。

1.defineReactive()：使用Object.defineProperty()对obj中的某一个属性进行拦截

// 对obj中的属性做拦截
defineReactive(obj, key, val) {
  this.observe(val);
  Object.defineProperty(obj, key, {
      get () {
          return val;
      },
      set (newValue) {
          if(val === newValue) {
              return;
          }
          val = newValue; 
          console.log(val);
      }
  })
}

 2.observe(obj): 当obj中有多个属性要做拦截时，我们需要遍历obj中 的属性

创建Observer类：对传入的数据进行判断，再分类（Array、Object）进行操作。

// 遍历对象，给它的属性做响应式处理
function observe(obj){
  // 判断obj是否为对象,若不是则返回
  if(typeof obj !== "object" || obj == null) {
    return obj;
  }
  // 创建Observer实例，传入obj进行判断 遍历
  new Observer(obj);
}

// 判断是否为对象，若为对象再进行遍历
class Observer {
  constructor(obj) {
    if(Array.isArray(obj)){
      // todo
    } else{
      this.walk(obj);
    }
  }
  walk(obj) {
    // 若是对象,则遍历其属性做拦截处理
    Object.keys(obj).forEach(key => defineReactive(obj,key,obj[key]));
  }
}

3.递归：当obj中的属性的属性值为对象时，需要递归遍历属性值中的属性，对深层的属性进行拦截。

当给属性重新赋值一个对象时，也需要对该对象中的属性做拦截处理

// 对obj中的属性做拦截
function defineReactive(obj, key, val) {
  // 当val是一个对象时,需要递归遍历val中的属性做拦截处理
  observe(val);
  // vue2中用Object.defineProperty()对属性进行跟踪拦截
  Object.defineProperty(obj, key , {
    get() {
      return val;
    },
    set(newVal) {
      val = newVal;
      // 当newVal为对象时，需要遍历newVal中的属性做拦截处理
      observe(newVal);
      // update()
    }
  })
}

4.set()：给已有的对象动态添加新的响应式属性

Vue.$sets()实际上就是调用了defineReactive方法

// 给已有的对象动态添加新的响应式属性
function set(obj, key, val) {
  defineReactive(obj, key, val);
}

5.Vue类初始化：获取data中的属性，进行拦截处理，并代理到vue上，这样才能直接从vue中获取和修改属性。

// 将传入对象中的所有属性代理到指定对象上
function Proxy(vm) {
  // 遍历data中的属性，在vm中添加一样的属性，并做拦截处理
  Object.keys(vm.$data).forEach(key => {
    Object.defineProperty(vm, key, {
      get() {
        console.log(vm.$data[key]);
        return vm.$data[key]
      },
      set(v) {
        // 当修改vm中的属性时，data中的属性也跟着修改
        vm.$data[key] = v
        console.log(vm.$data[key]);
      }
    })
  })
}

class JVue {
  constructor(options) {
    // 1.获取data对象
    this.$options = options;
    this.$data = options.data;
    console.log(this.$data);
    // 2.对data做拦截处理
    observe(this.$data);

    // 3.将data中的属性代理到vm中
    Proxy(this);
  }
}

6.测试

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <p>{{count}}</p>
  </div>
<script src="./jvue.js"></script>
<script>
const app = new JVue({
  el: "#app",
  data: {
    count: 1
  }
})
setInterval(() => {
  app.count ++
}, 1000)
</script>
</body>
</html>

7.数组响应式

解析： 数组中有7个方法会改变数组本身，所以在其改变自身时要通知更新，所以需要对这七个方法进行替换。

  • 改变数组自身的7个方法：push,pop,unshift,shift,sort,reverse,splice

思路：创建7个新的方法，当传入的数据为数组时，将其原型替换

// 数组响应式
// 获取Array原型，备份一份，修改备份
const originalProto = Array.prototype;
const arrayProto = Object.create(originalProto);
// 设置七个新的方法
["push", "pop", "shifit", "unshift", "sort", "reverse", "splice"].forEach(
  method => {
    arrayProto[method] = function() {
      // 原始操作
      originalProto[method].apply(this, arguments);
      // 覆盖:通知更新
      console.log("数组执行" + method + "操作");
    };
  }
);

// 判断obj为数组还是对象，分类操作
class Observer {
  constructor(obj) {
    if (Array.isArray(obj)) {
      // 数组类型
      // 覆盖原型
      obj.__proto__ = arrayProto;
      // 递归遍历数组中的子元素
      const keys = Object.keys(obj);
      for (let i = 0; i < obj.length; i++) {
        observe(obj[i]);
      }
    } else {
      // 对象类型
      this.walk(obj);
    }
  }
  walk(obj) {
    // 若是对象,则遍历其属性做拦截处理
    Object.keys(obj).forEach(key => defineReactive(obj, key, obj[key]));
  }
}

 

四、compile编译

遍历传入的子元素，分为节点和文本，再进行编译

 

// 编译
class Compile {
  constructor(el, vm) {
    this.$vm = vm;
    const node = document.querySelector(el)
    this.compile(node);
  }
  // 判断是节点还是文本
  compile(node) {
    // 获取el的子节点
    const childNodes = node.childNodes;
    // 遍历子节点并分类判断
    Array.from(childNodes).forEach(n => {
      // 元素节点
      if(this.isElement(n)) {
        // 当子节点中还有子节点时，进行递归
        console.log(n);
        if(n.childNodes.length > 0) { 
          this.compile(n)
        }
        // 编译节点
        this.compileElement(n);

      } else if(this.isInter(n)) {
        // 插值表达式：编译文本
        this.compileText(n)
        console.log('文本',n.textContent);
      }
    })
    
  }
  // 元素节点
  isElement(n) {
    return n.nodeType === 1;
  }
  // 又是文本节点插值， 又是插值表达式，例：{{count}}
  isInter(n) {
    return n.nodeType === 3 && /\{\{(.*)\}\}/.test(n.textContent);
  }
  // 判断是否为j-指令
  isDir(attrName) {
    console.log(attrName);
    return attrName.startsWith('j-');
  }

  // 编译初始化和更新函数
  update(node, exp, dir) {
    // 编译初始化
    const fn = this[dir + 'Updater'];
    fn && fn(node, this.$vm[exp]);
    // 更新函数: watcher是在遍历节点去编译时创建的
    new Watcher(this.$vm, exp, val => {
      // 接收最新的值，更新
      fn && fn(node, val);
    });
  }

  // 编译插值表达式
  compileText(n) {
    // RegExp.$1：与上方正则表达式匹配的表达式，例：count
    // 查找vm中匹配属性的值，赋给该节点
    // n.textContent = this.$vm[RegExp.$1];
    this.update(node, RegExp.$1, "text");
  }
  // 编译节点：属性分类：j-指令， @事件
  compileElement(n) {
    const attrs = n.attributes;
    console.log(n.attributes);
    // 遍历所有属性，进行分类
    Array.from(attrs).forEach(attr => {
      const attrName = attr.name;
      const exp = attr.value;
      // 若为j-指令
      if(this.isDir(attrName)) {
        // 截取j-后的指令,并执行编译对应指令
        const dir = attrName.substring(2); //text,html,...
        this[dir] && this[dir](n, exp);
      } else {
        // 若为@事件
      }
    })
  }

  // 编译j-text
  text(n, exp) {
    this.update(node, exp, 'text');
  }
  // 真正编译j-text的方法
  textUpdater(node, val) {
    node.textContent = val;
  }

  // 编译j-html
  html(n, exp) {
    this.update(node, exp, 'html');
  }
  htmlUpdate(n, exp) {
    n.innerHTML = this.$vm[exp];
  }
}

 

五、依赖收集、更新

1.watcher：依赖

 

实现思路：

1. defineReactive时为每⼀个key创建⼀个Dep实例

2. 初始化视图时读取某个key，例如name1，创建⼀个watcher1

3. 由于触发name1的getter⽅法，便将watcher1添加到name1对应的Dep中

4. 当name1更新，setter触发时，便可通过对应Dep通知其管理所有Watcher更新 

watcher在编译时创建，应包含和哪个key有关，更新函数是谁：

// 负责dom更新
// watcher: watcher在编译时创建，和哪个key有关，更新函数是谁
class Watcher {
  constructor(vm, key, updater) {
    this.vm = vm;
    this.key = key; 
    this.updater = updater; 
  }
  // 将来会被Dep调用
  update() {
    this.updater.call(this.vm, this.vm[this.key]);
  }
}

watcher是在编译时创建的，所以重构前面的Compile中的编译方法

// 编译
class Compile {
  constructor(el, vm) {
    this.$vm = vm;
    const node = document.querySelector(el);
    this.compile(node);
  }
  // 判断是节点还是文本
  compile(node) {
    // 获取el的子节点
    const childNodes = node.childNodes;
    // 遍历子节点并分类判断
    Array.from(childNodes).forEach(n => {
      // 元素节点
      if (this.isElement(n)) {
        // 当子节点中还有子节点时，进行递归
        if (n.childNodes.length > 0) {
          this.compile(n);
        }
        // 编译节点
        this.compileElement(n);
      } else if (this.isInter(n)) {
        // 插值表达式：编译文本
        this.compileText(n);
      }
    });
  }
  // 元素节点
  isElement(n) {
    return n.nodeType === 1;
  }
  // 又是文本节点插值， 又是插值表达式，例：{{count}}
  isInter(n) {
    return n.nodeType === 3 && /\{\{(.*)\}\}/.test(n.textContent);
  }
  // 判断是否为j-指令
  isDir(attrName) {
    return attrName.startsWith("j-");
  }

  // 编译初始化和更新函数
  update(node, exp, dir) {
    // 编译初始化
    const fn = this[dir + "Updater"];
    fn && fn(node, this.$vm[exp]);

    // 更新函数: watcher是在遍历节点去编译时创建的
    new Watcher(this.$vm, exp, val => {
      // 接收最新的值，更新
      fn && fn(node, val);
    });
  }

  // 编译插值表达式
  compileText(node) {
    // RegExp.$1：与上方正则表达式匹配的表达式，例：count
    // 查找vm中匹配属性的值，赋给该节点
    // n.textContent = this.$vm[RegExp.$1];
    this.update(node, RegExp.$1.trim(), "text");
  }
  // 编译节点：属性分类：j-指令， @事件
  compileElement(n) {
    const attrs = n.attributes;
    // 遍历所有属性，进行分类
    Array.from(attrs).forEach(attr => {
      const attrName = attr.name;
      const exp = attr.value;
      // 若为j-指令
      if (this.isDir(attrName)) {
        // 截取j-后的指令,并执行编译对应指令
        const dir = attrName.substring(2); //text,html,...
        this[dir] && this[dir](n, exp);
      } else if(isEvent(attrName)) {
        // 若为@事件
        // 获取事件名
        const dir = attrName.substring(1);
        this.eventHandler(n, exp, dir);
      }
    });
  }

  // 编译j-text
  text(node, exp) {
    this.update(node, exp, "text");
  }
  // 真正编译j-text的方法
  textUpdater(node, val) {
    node.textContent = val;
  }

  // 编译j-html
  html(node, exp) {
    this.update(node, exp, "html");
  }
  htmlUpdater(node, val) {
    node.innerHTML = val;
  }

  // 判断是否为@指令
  isEvent(attrName) {
    return attrName.indexOf("@") == 0;
  }
  // 处理事件
  eventHandler(node, exp, dir) {
    const fn = this.$vm.$options.methods && this.$vm.$options.methods[exp];
    node.addEventListener(dir, fn.bind(this.$vm));
  }

  // 编译j-model：绑定value值，事件监听
  model(node, exp) {
    this.update(node, exp, "model");
    console.log(11111111111);

    node.addEventListener("input", e => {
      // 新的值赋给数据
      this.$vm[exp] = e.target.value;
    });
  }
  modelUpdater(node, value) {
    // 表单元素赋值
    node.value = value;
  }
}

 

 

2.Dep：收集依赖

依赖收集：data中每个属性都会有一个数组作为依赖收集器，当页面使用某个属性（get）时，页面的watcher就会被放到对应属性的依赖收集器中。

依赖更新：通知属性依赖收集器中的watcher进行更新

代码如下： 

// Dep：保存watcher实例的依赖类
class Dep {
  constructor() {
    this.deps = [];
  }
  // 添加依赖：创建依赖关系时调用
  addDep(dep) {
    this.deps.push(dep);
  }
  // 通知deps数组中的依赖进行更新
  notify() {
    this.deps.forEach(dep => dep.update());
  }
}

1.在defineReactive创建dep实例。

2.在getter中收集依赖，即将watcher放到该属性对应的deps数组中。

           watcher如何放到deps中呢？在watcher中初始化时便将watcher放到全局变量Dep.target中，触发对应属性的getter，             getter中将Dep.target放到deps数组中。

3.在setter中调用dep.notify()通知依赖更新

// 对obj中的属性做拦截
function defineReactive(obj, key, val) {
  // 当val是一个对象时,需要递归遍历val中的属性做拦截处理
  observe(val);

  // 创建Dep实例
  const dep = new Dep();

  // vue2中用Object.defineProperty()对属性进行跟踪拦截
  Object.defineProperty(obj, key, {
    get() {
      // 依赖收集
      Dep.target && dep.addDep(Dep.target);
      return val;
    },
    set(newVal) {
      val = newVal;
      // 当newVal为对象时，需要遍历newVal中的属性做拦截处理
      observe(newVal);
      // 通知更新
      dep.notify();
    }
  });
}

// 负责dom更新
// watcher: watcher在编译时创建，和哪个key有关，更新函数是谁
class Watcher {
  constructor(vm, key, updater) {
    this.vm = vm;
    this.key = key;
    this.updater = updater;

    // 将watcher放到Dep.target(任何一个全局变量都行)，触发getter,getter中会将该Watcher放到该key所对应的Dep数组中
    Dep.target = this;
    this.vm[this.key];
    Dep.target = null;
  }
  // 将来会被Dep调用
  update() {
    this.updater.call(this.vm, this.vm[this.key]);
  }
}

 

六、整体代码

jvue.js:

// 数组响应式
// 获取Array原型，备份一份，修改备份
const originalProto = Array.prototype;
const arrayProto = Object.create(originalProto);
// 设置七个新的方法
["push", "pop", "shifit", "unshift", "sort", "reverse", "splice"].forEach(
  method => {
    arrayProto[method] = function() {
      // 原始操作
      originalProto[method].apply(this, arguments);
      // 覆盖:通知更新
      console.log("数组执行" + method + "操作");
    };
  }
);

// 对象响应式
function defineReactive(obj, key, val) {
  // 当val是一个对象时,需要递归遍历val中的属性做拦截处理
  observe(val);

  // 创建Dep实例
  const dep = new Dep();

  // vue2中用Object.defineProperty()对属性进行跟踪拦截
  Object.defineProperty(obj, key, {
    get() {
      // 依赖收集
      Dep.target && dep.addDep(Dep.target);
      return val;
    },
    set(newVal) {
      val = newVal;
      // 当newVal为对象时，需要遍历newVal中的属性做拦截处理
      observe(newVal);
      // 通知更新
      dep.notify();
    }
  });
}

// 将传入对象中的所有属性代理到指定对象上
function Proxy(vm) {
  // 遍历data中的属性，在vm中添加一样的属性，并做拦截处理
  Object.keys(vm.$data).forEach(key => {
    Object.defineProperty(vm, key, {
      get() {
        return vm.$data[key];
      },
      set(v) {
        // 当修改vm中的属性时，data中的属性也跟着修改
        vm.$data[key] = v;
      }
    });
  });
}

// 遍历对象，给它的属性做响应式处理
function observe(obj) {
  // 判断obj是否为对象,若不是则返回
  if (typeof obj !== "object" || obj == null) {
    return obj;
  }
  // 创建Observer实例，传入obj进行判断 遍历
  new Observer(obj);
}
// 判断obj为数组还是对象，分类操作
class Observer {
  constructor(obj) {
    if (Array.isArray(obj)) {
      // 数组类型
      // 覆盖原型
      obj.__proto__ = arrayProto;
      // 递归遍历数组中的子元素
      const keys = Object.keys(obj);
      for (let i = 0; i < obj.length; i++) {
        observe(obj[i]);
      }
    } else {
      // 对象类型
      this.walk(obj);
    }
  }
  walk(obj) {
    // 若是对象,则遍历其属性做拦截处理
    Object.keys(obj).forEach(key => defineReactive(obj, key, obj[key]));
  }
}

class JVue {
  constructor(options) {
    // 1.获取data对象
    this.$options = options;
    this.$data = options.data;
    // 2.对data做拦截处理
    observe(options.data);

    // 3.将data中的属性代理到vm中
    Proxy(this);

    // 4.编译
    new Compile(options.el, this);
  }
}

// 编译
class Compile {
  constructor(el, vm) {
    this.$vm = vm;
    const node = document.querySelector(el);
    this.compile(node);
  }
  // 判断是节点还是文本
  compile(node) {
    // 获取el的子节点
    const childNodes = node.childNodes;
    // 遍历子节点并分类判断
    Array.from(childNodes).forEach(n => {
      // 元素节点
      if (this.isElement(n)) {
        // 当子节点中还有子节点时，进行递归
        if (n.childNodes.length > 0) {
          this.compile(n);
        }
        // 编译节点
        this.compileElement(n);
      } else if (this.isInter(n)) {
        // 插值表达式：编译文本
        this.compileText(n);
      }
    });
  }
  // 元素节点
  isElement(n) {
    return n.nodeType === 1;
  }
  // 又是文本节点插值， 又是插值表达式，例：{{count}}
  isInter(n) {
    return n.nodeType === 3 && /\{\{(.*)\}\}/.test(n.textContent);
  }
  // 判断是否为j-指令
  isDir(attrName) {
    return attrName.startsWith("j-");
  }

  // 编译初始化和更新函数
  update(node, exp, dir) {
    // 编译初始化
    const fn = this[dir + "Updater"];
    fn && fn(node, this.$vm[exp]);

    // 更新函数: watcher是在遍历节点去编译时创建的
    new Watcher(this.$vm, exp, val => {
      // 接收最新的值，更新
      fn && fn(node, val);
    });
  }

  // 编译插值表达式
  compileText(node) {
    // RegExp.$1：与上方正则表达式匹配的表达式，例：count
    // 查找vm中匹配属性的值，赋给该节点
    // n.textContent = this.$vm[RegExp.$1];
    this.update(node, RegExp.$1.trim(), "text");
  }
  // 编译节点：属性分类：j-指令， @事件
  compileElement(n) {
    const attrs = n.attributes;
    // 遍历所有属性，进行分类
    Array.from(attrs).forEach(attr => {
      const attrName = attr.name;
      const exp = attr.value;
      // 若为j-指令
      if (this.isDir(attrName)) {
        // 截取j-后的指令,并执行编译对应指令
        const dir = attrName.substring(2); //text,html,...
        this[dir] && this[dir](n, exp);
      } else if (this.isEvent(attrName)) {
        // 若为@事件
        const dir = attrName.substring(1);
        this.eventHandler(n, exp, dir);
      }
    });
  }

  // 编译j-text
  text(node, exp) {
    this.update(node, exp, "text");
  }
  // 真正编译j-text的方法
  textUpdater(node, val) {
    node.textContent = val;
  }

  // 编译j-html
  html(node, exp) {
    this.update(node, exp, "html");
  }
  htmlUpdater(node, val) {
    node.innerHTML = val;
  }

  // 判断是否为@指令
  isEvent(attrName) {
    return attrName.indexOf("@") == 0;
  }
  // 处理事件
  eventHandler(node, exp, dir) {
    const fn = this.$vm.$options.methods && this.$vm.$options.methods[exp];
    node.addEventListener(dir, fn.bind(this.$vm));
  }

  // 编译j-model：绑定value值，事件监听
  model(node, exp) {
    this.update(node, exp, "model");
    console.log(11111111111);

    node.addEventListener("input", e => {
      // 新的值赋给数据
      this.$vm[exp] = e.target.value;
    });
  }
  modelUpdater(node, value) {
    // 表单元素赋值
    node.value = value;
  }
}

// 负责dom更新
// watcher: watcher在编译时创建，和哪个key有关，更新函数是谁
class Watcher {
  constructor(vm, key, updater) {
    this.vm = vm;
    this.key = key;
    this.updater = updater;

    // 将watcher放到Dep.target(任何一个全局变量都行)，触发getter,getter中会将该Watcher放到该key所对应的Dep数组中
    Dep.target = this;
    this.vm[this.key];
    Dep.target = null;
  }
  // 将来会被Dep调用
  update() {
    this.updater.call(this.vm, this.vm[this.key]);
  }
}

// Dep：保存watcher实例的依赖类
class Dep {
  constructor() {
    this.deps = [];
  }
  // 添加依赖：创建依赖关系时调用
  addDep(dep) {
    this.deps.push(dep);
  }
  // 通知deps数组中的依赖进行更新
  notify() {
    this.deps.forEach(dep => dep.update());
  }
}

jvue.html:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <p>{{ count }}</p>
      <p j-text="count"></p>
      <p j-html="exp"></p>
      <button @click="add">增加</button>
      <input j-model="value" />
      <p>{{ value }}</p>
    </div>
    <script src="./jvue.js"></script>
    <script>
      const app = new JVue({
        el: "#app",
        data: {
          count: 1,
          exp: "<h3>j-html指令</h3>",
          arr: [1, 2, 3],
          value: ""
        },
        methods: {
          add() {
            this.count++;
          }
        }
      });
      // setInterval(() => {
      //   app.count++;
      //   app.arr.push(app.count);
      //   console.log(app.arr);
      // }, 1000);
    </script>
  </body>
</html>

代码仓库地址：https://github.com/141110126/write-vue/tree/main/jvue

MiemieWan
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
Vue2——MVVM模型
mantou_riji的博客
04-23 955
文章目录含义特点 含义 M: 模型(Model) :对应data中的数据 V: 视图(View):模板，对应的是页面 VM: 视图模型(ViewModel) : Vue实例对象 ViewModel简称vm，又对应着vue，所以vue创建的对象经常使用使用变量名vm接收。 eg： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>D
Vue2：MVVM 设计模式、Vue指令、模板语法
孤安先生的博客，作者主站正在重构中，敬请期待！
11-09 664
基于 Vue 把数据填充到 HTML 标签的代码规则。
Android 三类框架的理解以及MVVM框架的使用
最新发布
2401_85239793的博客
05-24 397
MVP的View层Activity在实际项目中，随着逻辑的复杂度越来越大，Activity臃肿的缺点仍然体现出来了，因为Activity中还是充满了大量与View层无关的代码，比如各种事件的处理派发，就如MVC中的那样View层和Controller代码耦合在一起无法自拔。，Activity在MVP中是View层，在MVC中是Controller层，这是MVC和MVP很主要的一个区别，可以说Android从MVC转向MVP开发也主要是优化Activity的代码，避免Activity的代码臃肿庞大。
Vue2 MVVM原理学习
GonTinyBlack的博客
02-02 150
vue2双向绑定原理学习
Vue学习--MVVM模型
热门推荐
Ahuiyo的博客
02-18 1万+
MVVM模型 MVVM简介   MVVM 是Model-View-ViewModel 的缩写，它是一种基于前端开发的架构模式，其核心是提供对View 和 ViewModel 的双向数据绑定，这使得ViewModel 的状态改变可以自动传递给 View，即所谓的数据双向绑定。   Vue.js 是一个提供了 MVVM 风格的双向数据绑定的 Javascript 库，专注于View 层。它的核心是 M...
MVVM风格架构
leva的博客
02-07 4577
MVVM是Model-View-ViewModel的简写。它本质上就是MVC的改进版。MVVM就是将其中的View的状态和行为抽象化，让我们将视图UI和业务逻辑分开。当然这些事ViewModel已经帮我们完成了，它可以取出Model的数据同时帮忙处理View中由于需要展示内容而涉及的业务逻辑。微软公司的WPF带来了新的技术体验，如Silverlight、声频、视频、3D、动画……这导致了软件UI层更加细节化、可定制化。
vue实现简单的MVVM框架
12-03
本篇文章将深入探讨如何基于Vue的核心概念，实现一个简单的MVVM框架。 首先，理解MVVM模式至关重要。MVVM模式是一种设计模式，它将模型（Model）、视图（View）和视图模型（ViewModel）三者分离，使得开发者可以...
基于vue的MVVM框架的研究与分析
07-20
Vue.js 是一种流行的轻量级前端开发框架，它遵循MVVM（Model-View-ViewModel）设计模式，为开发者提供了一种高效且易用的方式来构建用户界面。Vue的核心特性包括组件化、响应式数据绑定、指令系统以及易于集成的生态...
如何实现Vue的MVVM框架
08-12
大家都知道，vue是个MVVM框架，能够实现view和model的双向绑定，不像backbone那样，model改变需要手动去通知view更新，而vue实现的原理就是通过Object.defineProperty实现数据挟持，定义setter，然后数据改变的时候...
详解Vue中的MVVM原理和实现方法
01-19
下面由我阿巴阿巴的详细走一遍Vue中MVVM原理的实现，这篇文章大家可以学习到： 1.Vue数据双向绑定核心代码模块以及实现原理 2.订阅者-发布者模式是如何做到让数据驱动视图、视图驱动数据再驱动视图 3.如何对元素...
【框架类】—MVVM框架
m0_37616866的博客
08-19 1430
MVVM框架
Android技术框架篇(三)：MVVM框架
看，好自为之的博客！！！
05-19 9936
MVVM框架的介绍
MVVM架构模式
weixin_74239923的博客
08-29 2031
MVVM是Model-View-ViewModel的简写。即是模型-视图-视图模型。MVVM架构模式是一种软件设计模式，它将应用程序分为三个部分：模型（Model）、视图（View）和视图模型（ViewModel）。该模式的目的是将用户界面（UI）逻辑与业务逻辑分离，以便开发人员可以更轻松地管理和修改应用程序。在MVVM模式中，模型表示应用程序中的数据和业务逻辑，视图表示用户界面，视图模型则是连接模型和视图的桥梁。视图模型从模型获取数据并将其转换为视图可以理解的形式，然后将其传递给视图。
MVVM框架
flyersboy的博客
06-25 2247
由于最近在某厂实习，接触到了这个玩意，所以了解一哈~ 1、MVC框架简介 模型-视图-控制器 (MVC) 设计模式为应用程序中的对象分配三个角色之一：模型、视图或控制器。该模式不仅定义了对象在应用程序中扮演的角色，还定义了对象相互通信的方式。这三种类型的对象中的每一种都通过抽象边界与其他对象分开，并通过这些边界与其他类型的对象进行通信。应用程序中特定 MVC 类型的对象集合有时称为*层，*例如模型层。 MVC 是 Cocoa 应用程序良好设计的核心。采用这种模式的好处很多。这些应用程序中的许多对象往往更.
mvvm框架工作原理及优缺
关注我！带你一路 "狂飙" 到底！
02-07 2677
view表示ui组件，负责将数据模型转换为ui展现出来，它做的是数据绑定的声明、 指令的声明、 事件绑定的声明。消息的发布和订阅是在观察者的数据绑定中进行数据的——在get钩子函数被调用时进行数据的订阅(在数据编译时通过 new Watcher() 来对数据进行订阅)，在set钩子函数被调用时进行数据的发布。● 1、bug很难被调试，因为数据双向绑定，所以问题可能在 view 中，也可能在 model 中，要定位原始bug的位置比较难，同时view里面的代码没法调试，也添加了bug定位的难度。
MVVM框架介绍
weixin_44540475的博客
06-27 9239
1、MVVM是什么？ 1、MVVM是Model-View-ViewModel的简写 2、它本质上是MVC 的改进版 3、MVVM（Model-View-ViewModel）框架的由来是MVP（Model-View-Presenter）模 与WPF结合的应用方式时发展演变过来的一种新型架构框架 2、MVVM的优点 MVVM模式和MVC模式一样，主要目的是分离视图（view）和模型（Model）,有几大优点 1、低耦合：视图（View）可以独立于Model变化和修改，一个ViewModel可以绑定到不同的"Vi
案例挑战——MVVM框架理解和实践
理想主义的花最终会盛开在浪漫主义的土壤里，我的热情永远不会熄灭在现实的平凡之中，我们终将上岸，阳光万里。
05-30 2131
最近正在做新版项目的MVVM架构的结合业务的具体落地，前后与领导进行了多次的交流和沟通，从业务的简单例子入手更改了五版代码。最终输出了一版比较完善的符合MVVM架构和业务需求的模板代码。通过这次的案例挑战，对MVVM架构有了相对于此前更为深层次的理解，通过博客总结的方式进行记录和明确自己的收获。1. 通过这一次的案例挑战，对于MVVM架构有了更进一步的理解,理论结合实践，并且需要和高人进行交流和请教高人。 2. 目前只是对MVVM架构有了一些理解，后续还需要再项目实践中进行刻意练习和思考。
深入理解MVVM架构模式
study_way的博客
08-01 6995
MVVM是一种用于构建用户界面的软件架构模式，它的名称代表着三个组成部分：Model（模型）、View（视图）和ViewModel（视图模型）。MVVM的主要目标是将应用程序的UI与其底层数据模型分离，通过数据绑定实现数据和UI的自动同步，从而降低代码的耦合度，提高应用程序的可维护性和可测试性。
Android MVVM架构
weixin_53431933的博客
08-16 1万+
MVVM是Model-View-ViewModel的简写，是M-V-VM三部分组成。它本质上就是MVC 的改进 版。MVVM 就是将其中的View 的状态和行为抽象化，其中ViewModel将视图 UI 和业务逻辑分 开，它可以取出 Model 的数据同时帮忙处理 View 中由于需要展示内容而涉及的业务逻辑。2.MVVM采用双向数据绑定，view中数据变化将自动反映到viewmodel上，反之，model中数据变化 也将会自动展示在页面上。把Model和View关联起来的就是ViewModel。...
vue中MVVM框架组成
04-11
MVVM框架由Model、View、ViewModel三部分组成。其中Model代表数据模型，也可以在Model中定义数据修改和操作的业务逻辑；View代表UI组件，它负责将数据模型转化成UI展现出来；ViewModel是View和Model的桥梁，它处理...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值