学习Vue组件实例

Vue实例

项目启动过程

看一下现在我们的项目，想想整个项目的启动过程是什么（以直接打开index.html的方法访问为例来说明）？

你首先打开了index.html，里面只有一个写了一个id='root'的div，还有你引入了打包之后的代码，然后Vue自己肯定运行了一下（可以认为是Vue初始化）。

接着，应该是执行了entry.js(因为打包是webpack打包的，你配置的入口文件就这一个)。

entry.js干了什么，是的，创建了一个Vue实例对象，然后这个对象管理的区域根据el属性知道，应该是index.html中id='root'的那个div，因此余下的事情就只有明白这个Vue实例对象是如何管理这片区域的就可以了，这就是接下来的内容了。

什么是Vue实例对象?

根据官方文档的说明：每个Vue应用都是通过用Vue函数创建一个新的Vue实例开始的。

你可以简单的理解，他就是一个普普通通的对象罢了，只不过这个对象被赋予了一些特殊的功能，让我们来了解一下他吧！

【我们接下来都是在entry.js里面创建的那个Vue对象上面进行实验的】

一个Vue实例对象创建的方法如下：

var vm=new Vue({  //一堆配置});

因此，接下来要说的就是一些常用的配置（不是全部，比较特殊的以后应该会说，毕竟开始就全部，我怕彼此心都太累了）。

Vue实例对象基本配置

【1】el:选择器| DOM结点

在我们的项目中，我们配置的是：

el:'#root'

这是一个字符串，有点类似CSS选择器，它会使用查找到的结点作为管理区域（当然还有别的CSS选择器也可以）。

除此之外，你还可以直接传递一个结点，比如现在我们修改一下代码：

el: document.getElementById('root')

这样也是可以了，你可以试试。

【2】render:(createElement:()=>VNode)=>VNode

上面的是ES6的箭头函数写法，举个栗子：

((x,y)=>x+y)(1,2)

上面ES6的写法等同于下面ES5的写法：

(function(x,y){  return x+y;})(1,2);

简单的说就是：(x,y)=>x+y就表示一个有二个参数x和y，返回x+y的函数，因此上面的函数用ES5的写法就是：

function(createElement){  //createElement是一个函数，返回类型为VNode  //这个函数的返回类型也应该是VNode  return VNode;}

备注：VNode是Vue编译生成的虚拟节点，想一下Jquery节点，还有Node节点，是不是味道很像。

因此，我把项目中的render稍微改一下：

render: function (createElement) {  return createElement(App);}

是不是很清晰了，说白了，就是一个最后返回值是VNode的函数。