proxy vue3.0

阿新 • • 發佈：2018-12-20

<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>
      <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;
            });
          }
          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>

摘自https://github.com/nightzing/vue3-Proxy/blob/master/proxyVue.html

proxy vue3.0

<html> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, user-scalable=no, i

vue3.0嚐鮮 -- 摒棄Object.defineProperty，基於 Proxy 的觀察者機制探索

寫在前面： 11月16日早上，Vue.js的作者尤大大在 Vue Toronto 的主題演講中預演了 Vue.js 3.0的一些新特性，其中一個很重要的改變就是Vue3 將使用 ES6的Proxy 作為其觀察者機制，取代之前使用的Object.defineProperty。我相信許多同學深有體會，許多面試中O

初探 Vue3.0 中的一大亮點——Proxy !

前言不久前，也就是11月14日-16日於多倫多舉辦的 VueConf TO 2018 大會上，尤雨溪發表了名為 Vue3.0 Updates 的主題演講，對 Vue3.0 的更新計劃、方向進行了詳細闡述（感興趣的小夥伴可以看看完整的 PPT），表示已經放棄使用了 Object.defin

vue3.0 嚐鮮 -- 摒棄 Object.defineProperty，基於 Proxy 的觀察者機制探索

寫在前面： 11月16日早上，Vue.js的作者尤大大在 Vue Toronto 的主題演講中預演了 Vue.js 3.0的一些新特性，其中一個很重要的改變就是Vue3 將使用 ES6的Proxy 作為其觀察者機制，取代之前使用的Object.defineProperty。我相信許多同學深有體會，許

vue3.0後的學習proxy筆記(覺得和reflect一起對比學習效果更佳)

最近看相關報道，vue3.0 開發計劃傳送門 https://juejin.im/post/5bb719b9f265da0ab915dbdd 其中，監測機制：一句話介紹：更加全面、精準、高效；更具可除錯性的響應跟蹤；以及可

Vue3.0 響應式資料原理：ES6 Proxy

> Vue3.0 開始用 Proxy 代替 Object.defineProperty了，這篇文章結合例項教你如何使用Proxy > 本篇文章同時收錄【前端知識點】中，[連結直達](https://github.com/programmer-zhang/front-end) ## 閱讀本文您將

【非專業前端】使用vue3.0.1+element2.4.5

https upd 技術 cat 工具啟動項 them locale scripts 開發工具：WebStorm 先搞好環境可以看出，想安裝@vue/cli需要node.js。先去下載安裝好。然後安裝@vue/cli npm install -g @vue/cli

純小白入手 vue3.0 CLI - 2.7 - 組件之間的數據流

category 回來保存錯誤提示 window 綁定 red prop 的人 vue3.0 CLI 真小白一步一步入手全教程系列：https://www.cnblogs.com/ndos/category/1295752.html 盡量把紛繁的知識，肢解重組成為可以

純小白入手 vue3.0 CLI - 3.1 - 路由 ( router )

ref 替換就是 export div from forms clas 應用開發 vue3.0 CLI 真小白一步一步入手全教程系列：https://www.cnblogs.com/ndos/category/1295752.html 盡量把紛繁的知識，肢解重組成為可以

Vue3.0 +Typescript

在typescript環境下，vue的屬性、事件等寫法有很大的不同，在這裡做一個總結： import { Component,Vue, Prop, Emit , Watch } from 'vue-property-decorator'; 一、計算屬性 javas

Vue3.0變化更新解讀（值得收藏）

(內容同步自小鄒的頭條號：滬漂程式設計師的生活史) 9月30日，尤雨溪在medium個人部落格上釋出了vue3.0的開發思路，可以說3.0帶來了很大的變化。當時小鄒也只是瞄了一眼，沒想到這麼快vue3.0就出來了。最近尤雨溪也是在 Vue Toronto上釋出了最新的 Vue 3，並且講解了一

vue3.0和2.0的區別及專案的搭建

3.0 新加入了 TypeScript 以及 PWA 的支援部分命令發生了變化：下載安裝 npm install -g [email protected] 刪除了vue list 建立專案&n

vue3.0全域性函式定義

首先新建一個fnc.js 程式碼: //測試呼叫方法 let test = str =>{ alert(str) }; export default { test } mian.js /** * 全域性方法 */ i

vue3.0 修改element-ui標籤名

nmp add element-ui main.js /*自定義element標籤名開始*/ import {Input, Button, Radio, RadioGroup, RadioButton,

vue3.0使用全域性scss

首先建立一個scss檔案接著在專案根目錄下建立 vue.config.js vue.config.js內容注意這段程式碼 css: {

純小白入手 vue3.0 CLI

我的 github 地址 - vue3.0Study - 階段學習成果都會建立分支。 ========================== 新元件 - 新路由 Forms.vue ( 下面僅介紹如何創立, 不進行介紹 ) ： <template><div class="form

vue3.0與element實現後臺管理模板

通過自己所學的這段時間，利用空餘時間，使用vue3.0腳手架搭建的一個關於後臺的管理模板，所實現功能也是模仿一個後臺的介面，資料分為兩種存放，一種是直接儲存到mlab,這裡的資料是存放這登入註冊，只有註冊了自己的賬號才能訪問到頁面，另一些資料直接存放在easy-mock裡，原始碼地址:https://gi

vue3.0實現全域性對話方塊

vue+vuex+vuetify 1.在資料夾components下新建資料夾Dialog.vue <template> <v-layout row justify-cneter> <v-dialog v-model="isSho

在Vue3.0之前，回顧Vue2.0新特性的使用

一、深度作用選擇器（ >>> ）嚴格來說，這個應該是vue-loader的功能。”vue-loader”: “^12.2.0” 在專案開發中，如果業務比較複雜，特別像中臺或B端功能頁面都不可避免的會用到第三方元件庫，產品有時會想對這些元件進行一些UI方面的定製。如果這些元件採用的是有

vue3.0在main.js中引入.scss文件報錯

ports dex rop ons bubuko 圖片 image fig 技術寫入.scss文件在mian.js中 import ‘./styles/index.scss‘後出現上圖報錯解決方案：在vue.config.js文件中添加以下代碼 module.ex

proxy vue3.0

相關推薦