手动实现一个vue的mvvm，思路解析

标签：document   数据   例子   img   length   move   als   发布   应用   

1、解析dom、fragment编译，初始化new watcher

2 ，数据劫持，Object.defineProperty(obj,key,{

   configurable:true,// 可以配置

   enumerable：true, // 可以枚举

   get:function(){return value}, // 添加wacher，添加订阅者

   set:function(newValue){ return newValue}  // noticfy:执行，更新数据

})

3, 发布订阅模式：

什么是发布订阅者模式呢？举个例子：大爷我要传授们手艺，我这里收了很多徒弟，为了节约时间，我将他们记录在我的邮件里，等我准备好资料，在我这里留底的人员进行群发

接下里开始代码实现的过程

 1，创建一个简单的应用，

<div id="mvvm-app">
    <input type="text" v-model="word">
    <p>{{word}}</p>
    <button v-on:click="sayHi">change model</button>
</div>

<script src="./js/observer.js"></script>
<script src="./js/watcher.js"></script>
<script src="./js/compile.js"></script>
<script src="./js/mvvm.js"></script>
<script>
var vm = new MVVM({
    el: ‘#mvvm-app‘,
        data: {
            word: ‘Hello World!‘
        },
        methods: {
            sayHi: function() {
                this.word = ‘Hi, everybody!‘;
            }
        }
    });
</script>

效果： 

2，我们先初始化将模板中的 {{}}替换，创建compile函数进行编译，替换

     function MVVM(options) {

    this.$options = options; // this是挂载vm上的，防止和data里面取值冲突，我们这里定义属性的，传递的data，用一些特定的字符来区别，按照我们在
    var data = this._data = this.$options.data;// 源码上注解，我们的data采用，_data,我们的属性采用$options
    observe(data, this);
    this.$compile = new Compile(options.el || document.body, this)
}

3,我们要开始实现我们的Compile函数

 整体实现此路，需要一张图演示实现思路

手动实现一个vue的mvvm，思路解析

标签：document   数据   例子   img   length   move   als   发布   应用   

原文地址：https://www.cnblogs.com/yayaxuping/p/10837744.html