JavaScript之實現一個簡單的Vue

vue的使用相信大家都很熟練了，使用起來簡單。但是大部分人不知道其內部的原理是怎麼樣的，今天我們就來一起實現一個簡單的vue。

Object.defineProperty()

實現之前我們得先看一下Object.defineProperty的實現，因爲vue主要是通過數據劫持來實現的，通過get、set來完成數據的讀取和更新。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

var obj = {name:'wclimb'} var age = 24 Object.defineProperty(obj,'age',{     enumerable: true, // 可枚舉     configurable: false, // 不能再define     get () {         return age     },     set (newVal) {         console.log('我改變了',age +' -> '+newVal);         age = newVal     } })   > obj.age > 24   > obj.age = 25; > 我改變了 24 -> 25 > 25

從上面可以看到通過get獲取數據，通過set監聽到數據變化執行相應操作，還是不明白的話可以去看看Object.defineProperty文檔。

流程圖

html代碼結構

1 2 3 4 5 6 7

<div id="wrap">     <p v-html="test"></p>     <input type="text" v-model="form">     <input type="text" v-model="form">     <button @click="changeValue">改變值</button>     {{form}} </div>

js調用

JavaScript

1 2 3 4 5 6 7 8 9 10 11 12 13

new Vue({         el: '#wrap',         data:{             form: '這是form的值',             test: '<strong>我是粗體</strong>',         },         methods:{             changeValue(){                 console.log(this.form)                 this.form = '值被我改變了，氣不氣？'             }         }     })

Vue結構

1 2 3 4 5 6 7 8 9 10 11

class Vue{         constructor(){}         proxyData(){}         observer(){}         compile(){}         compileText(){}     }     class Watcher{         constructor(){}         update(){}     }

• Vue constructor 構造函數主要是數據的初始化

• proxyData 數據代理

• observer 劫持監聽所有數據

• compile 解析dom

• compileText 解析dom裏處理純雙花括號的操作

• Watcher 更新視圖操作