feat(mvvm): implement mvvm in depth demo

zzz945 · Apr 20, 2019 · 158b38d · 158b38d
1 parent b289642
commit 158b38d
Show file tree

Hide file tree

Showing 2 changed files with 64 additions and 6 deletions.
diff --git a/src/index.js b/src/index.js
@@ -31,16 +31,13 @@ class Vue {
   }
   update () {
     const parent = this.$el.parentElement
-
-    if (parent) {
-      parent.removeChild(this.$el)
-    }
 
     const vnode = this.$options.render.call(this.proxy, this.createElement)
+    const oldEl = this.$el
     this.$el = this.patch(null, vnode)
 
     if (parent) {
-      parent.appendChild(this.$el)
+      parent.replaceChild(this.$el, oldEl)
     }
 
     console.log('updated')
@@ -72,7 +69,7 @@ class Vue {
         if (typeof child === 'string') {
           el.textContent = child
         } else {
-          el.appendChild(createElm(child))
+          el.appendChild(this.createElm(child))
         }
       });
     }

diff --git a/test/demo.spec.js b/test/demo.spec.js
@@ -1,7 +1,17 @@
 import Vue from "../src/index.js";
 
 describe('Demo', function() {
+  afterEach (() => {
+    document.body.append(document.createElement('br'))
+    document.body.append(document.createElement('br'))
+    document.body.append(document.createElement('br'))
+  }) 
+
   it('Basic', function() {
+    const title = document.createElement('h2')
+    title.textContent = 'Basic Demo'
+    document.body.append(title)
+
     const vm = new Vue({
       data () {
         return {
@@ -22,4 +32,55 @@ describe('Demo', function() {
 
     document.body.append(vm.$el)
   });
+
+  it('Mvvm in depth', function() {
+    const title = document.createElement('h2')
+    title.textContent = 'Mvvm In Depth'
+    document.body.append(title)
+
+    const vm = new Vue({
+      data () {
+        return {
+          a: [{}],
+        }
+      },
+      render (h) {
+        return h('div', {}, this.a.map((item,i) => {
+          return h('div', {}, [         
+            h('button', { 
+              on: { 'click': _ => this.setNumber(item) }
+            }, 'Set Number'),
+            h('button', { 
+              on: { 'click': _ => this.deleteNumber(item) }
+            }, 'Delete Number'),
+            h('span', {}, item.number),
+            h('button', { 
+              on: { 'click': this.appendRow }
+            }, 'Append Row'),
+            h('button', { 
+              on: { 'click': _ => this.removeRow(i) }
+            }, 'Remove Row'),
+            h('br', {}, ''),
+          ])
+        }
+))
+      },
+      methods: {
+        setNumber (item) {
+          item.number = Math.random().toFixed(4)*100
+        },
+        deleteNumber (item) {
+          delete item.number
+        },
+        appendRow () {
+          this.a.push({})
+        },
+        removeRow (idx) {
+          this.a.splice(idx, 1)
+        }
+      }
+    }).$mount()
+
+    document.body.append(vm.$el)
+  });
 });