Vue源码解析之数据驱动（一）

数据驱动

vue.js的一个核心思想就是数据驱动。正所谓数据驱动就是指视图是由数据驱动生成的，我们对视图修改时，不会直接操作DOM，而是通过修改数据。这相对我们传统的前端开发方便很多，例如：我们需要修改一个节点值，传统的做法是通过Jquery或者javascript中的document获取再进行修改。在vue中，我们只需要对节点数据修改视图便随之修改。所以现在我们只关心数据的修改会让代码的逻辑变得非常清晰，因为DOM变成了数据的映射，我们所有的逻辑都是对数据进行修改，而不用触碰DOM,这样的代码非常利于维护。

下面我们看一个渲染的例子

<div id="app">
  {{ message }}
</div>
var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

最终他会在页面中呈现Hello Vue。接下来我们就从源码角度来分析Vue是如何实现的，(●ˇ∀ˇ●)干货要来了~~~~

new Vue() 到底发生了什么

大家都知道new关键字在javascript中是实例化一个对象的意思，而Vue是一个类，类在JavaScript中是用funtion来实现的，通过上节我们分析得到最终的Vue实在instance/index.js中

通过new初始化，然后调用_init方法，那这个方法是什么时候创建的呢？其实这个方法是通过initMixin(vue)创建的，该方法存在instance/init.js中

具体的代码我就不一一截图了，通过查看代码我们发现Vue初始化就干了这么几件事，合并配置，初始化生命周期，初始化事件中心，初始化渲染，初始化 data、props、computed、watcher 等等。

在这我们看一下初始化data

首先大家思考一个问题？？？？this.message是怎么调用到的

<div id="app">
  {{ message }}
</div>
var app = new Vue({
  el: '#app',
  mounted(){
    console.log(this.message)
  },
  data: {
    message: 'Hello Vue!'
  }
})

我们会在_init方法中找到initState(vm),该方法就在state.js中

该方法实际是对props、methods、data等进行绑定的，其它我们暂时不看，只看initData()，当初始化存在data时调用initData(vm)

在该方法中我们发现在new Vue时最好将data写成方法

<div id="app">
  {{ message }}
</div>
var app = new Vue({
  el: '#app',
  mounted(){
    console.log(this.message)
  },
  data（） {
    return{
         message: 'Hello Vue!'
    }   
  }
})

当data存在且事function时会执行getDate方法，不存在时会进行警告提示

在initDate最后进行proxy(vm,`_data`,key)代理方法

通过整个过程把data进行初始化，其实this.message也可以写成this._data.message只是一般_表示私有不可调用，所以尽量不写成_data.message。

到这这篇博客结尾了，再写就太长~

本人就不喜欢太长的文章，所以文章要精简，每篇文章几个知识点就可以，每天进步一点就好~