<!DOCTYPE html>

<head>

  <meta charset="UTF-8" />

  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />

  <meta http-equiv="X-UA-Compatible" content="ie=edge" />

  <title>proxyVue</title>

  <style>

    #app {

            margin: 100px auto 0 auto;

            width: 300px;

        }

        #btn {

            margin: 10px auto;

        }

    </style>

</head>

<body>

  <div id="app">

    <input type="text" v-model="num" />

    <input id="btn" type="button" value="添加到Todolist" v-click="addList" /><br />

    <span>您输入的是：</span><span v-bind="num"></span><span>{{num}}</span>

    <ul id="list"></ul>

  </div>

</body>

<script>

  class proxyVue {

    constructor(options) {

      this.$options = options || {};

      this.$methods = this._methods = this.$options.methods;

      const data = (this._data = this.$options.data);

      this.subscribe = {};

      this.observe(data);

      this.compile(options.el);

    }

    publish(watcher) {

      if (!this.subscribe[watcher.property])

        this.subscribe[watcher.property] = [];

      this.subscribe[watcher.property].push(watcher);

    }

    observe(data) {

      const that = this;

      let handler = {

        get(target, property) {

          return target[property];

        },

        set(target, property, value) {

          let res = Reflect.set(target, property, value);

          that.subscribe[property].map(item => {

            item.update();

          });

          return res;

        }

      };

      this.$data = new Proxy(data, handler);

    }

    compile(el) {

      const nodes = Array.prototype.slice.call(

        document.querySelector(el).children

      );

      let data = this.$data;

      nodes.map(node => {

        if (node.children.length > 0) this._complie(node);

        if (node.hasAttribute("v-bind")) {

          let property = node.getAttribute("v-bind");

          this.publish(new Watcher(node, "innerHTML", data, property));

        }

        if (node.hasAttribute("v-model")) {

          let property = node.getAttribute("v-model");

          this.publish(new Watcher(node, "value", data, property));

          node.addEventListener("input", () => {

            data[property] = node.value;

          });

        }

        /**

         self ...

        */

        if (/\{\{(.*?)\}\}/.test(node.innerHTML)) {

          let ret = /\{\{(.*?)\}\}/.exec(node.innerHTML)

          let property = ret[1];

          this.publish(new Watcher(node, "innerHTML", data, property));

        }

        // self end

        if (node.hasAttribute("v-click")) {

          let methodName = node.getAttribute("v-click");

          let mothod = this.$methods[methodName].bind(data);

          node.addEventListener("click", mothod);

        }

      });

    }

  }

  class Watcher {

    constructor(node, attr, data, property) {

      this.node = node;

      this.attr = attr;

      this.data = data;

      this.property = property;

    }

    update() {

      this.node[this.attr] = this.data[this.property];

    }

  }

  // 渲染todolist列表

  const Render = {

    // 初始化

    init: function (arr) {

      const fragment = document.createDocumentFragment();

      for (let i = 0; i < arr.length; i++) {

        const li = document.createElement("li");

        li.textContent = arr[i];

        fragment.appendChild(li);

      }

      list.appendChild(fragment);

    },

    addList: function (val) {

      const li = document.createElement("li");

      li.textContent = val;

      list.appendChild(li);

    }

  };

  // 实例化一个proxyVue

  window.onload = function () {

    let vm = new proxyVue({

      el: "#app",

      data: {

        num: 0,

        arr: []

      },

      methods: {

        addList() {

          this.arr.push(this.num);

          // Render.addList(this.num);

        }

      }

    });

  };

</script>

</html>

　　

vue3双向数据绑定原理_demo的更多相关文章

  1. vue双向数据绑定原理探究(附demo)

    昨天被导师叫去研究了一下vue的双向数据绑定原理...本来以为原理的东西都非常高深,没想到vue的双向绑定真的很好理解啊...自己动手写了一个. 传送门 双向绑定的思想 双向数据绑定的思想就是数据层与 ...

  2. vue的双向数据绑定原理

    原理. vue是采用数据劫持结合发布者-订阅者模式的方式, 通过Object.defineProperty()来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者,触发相应的监听回 ...

  3. 深入vue源码，了解vue的双向数据绑定原理

    大家都知道vue是一种MVVM开发模式,数据驱动视图的前端框架,并且内部已经实现了双向数据绑定,那么双向数据绑定是怎么实现的呢? 先手动撸一个最最最简单的双向数据绑定 <div> < ...

  4. Vue双向数据绑定原理深度解析

    首先,什么是双向数据绑定?Vue是三大MVVM框架之一,数据绑定简单来说,就是当数据发生变化时,相应的视图会进行更新,当视图更新时,数据也会跟着变化. 在分析其原理和代码的时候,大家首先了解如下几个j ...

  5. Vue双向数据绑定原理分析（转）

    add by zhj: 目前组里使用的是前端技术是jQuery + Bootstrap,后端使用的Django,Flask等,模板是在后端渲染的.前后端没有分离,这种做法有几个缺点 1. 模板一般是由 ...

  6. 手写MVVM框架 之vue双向数据绑定原理剖析

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  7. 16、前端知识点--Object.defineProperty 的用法+双向数据绑定原理解析

    一.Object.defineProperty 的用法 Object.defineProperty 可以用于给对象添加更新属性. <script> // Object.defineProp ...

  8. Vue双向数据绑定原理解析

    基本原理 Vue.采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的setter和getter,数据变动时发布消息给订阅者,触发相应函数的回调 ...

  9. Vue的双向数据绑定原理是什么？

    vue.js是采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者,触发相应的监听回调. ...

随机推荐

  1. 搭建私服仓库：（一）Windows安装Nuxus

    Nexus下载 官网.官网下载.百度云盘 提取码:su33 将nexus下载下来,以2.14.5的windows版本为例子(3.x暂时下载不下来,迅雷会员都不行) 下载后进行解压,得到以下目录: 其中 ...

  2. PyQT5：信号和槽

    PyQT5:信号和槽 信号和槽 Qt的主要特征之一是它使用信号和插槽在对象之间进行通信. 当潜在的事件发生时,会发出一个信号.插槽是可调用的Python,如果将信号连接到插槽,则在发出信号时将调用该插 ...

  3. SSH整合(二)

    SSH框架实现登录.新闻增删改查.树形菜单 项目结构 pom.xml 网不好不要一次引入太多,容易下不全 <project xmlns="http://maven.apache.org ...

  4. 第二课：启动 GDB 调试

    使用 GDB 调试程序一般有三种方式: gdb filename gdb attach pid gdb filename corename 这也对应着本节课的核心内容: 直接调试目标程序 附加进程 调 ...

  5. Java 语法学习2

    Java基础语法二 类型转换 public class demo03 { public static void main(String[] args) { int i=128; byte a=(byt ...

  6. 01_初识C语言

    第一章 - 初识C语言 基本了解C语言的基础知识,对C语言有一个大概的认识. 每个知识点就是简单认识,不做详细讲解. 1. 什么是C语言? C语言是一门通用计算机编程语言,广泛应用于底层开发.C语言的 ...

  7. 进程代数CSP基础知识总结（Communicating sequencing process）

    进程代数(Process Algebra) Process Algebra 理论 提出者 理论名称 缩写 论文链接 简介 C. A. R. Hoare/Tony Hoare Communicating ...

  8. Linux系列（17） - >、>>的用法

    适用场景 输出重定向,将命令结果写入文件当中 差异化 >:覆盖原文件内容 >>:追加文件内容 格式 [命令] > [文件名]:将[命令]的结果覆盖到[文件名]该文件中,如果目录 ...

  9. python学习笔记(四)-文件操作

    文件读写"""一.文件打开有3种方式 1.读 r #如果打开的文件的时候没有指定模式,那么默认是读 读写模式 r+,只要沾上r,文件不存在的时候,打开都会报错 2.写 w ...

  10. P4345-[SHOI2015]超能粒子炮·改【Lucas定理,类欧】

    正题 题目链接:https://www.luogu.com.cn/problem/P4345 题目大意 \(T\)组询问,给出\(n,k\)求 \[\sum_{i=0}^{k}\binom{n}{i} ...