JavaScript之实现一个简单的Vue

JavaScript之实现一个简单的Vue

无鳍的鱼0人评论98人阅读2018-09-18 13:21:21

vue的使用相信大家都很熟练了，使用起来简单。但是大部分人不知道其内部的原理是怎么样的，今天我们就来一起实现一个简单的vue。

Object.defineProperty()

实现之前我们得先看一下Object.defineProperty的实现，因为vue主要是通过数据劫持来实现的，通过get、set来完成数据的读取和更新。

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 更新视图操作

©著作权归作者所有：来自51CTO博客作者无鳍的鱼的原创作品，如需转载，请注明出处，否则将追究法律责任

J