vue echarts数据变化重新渲染_vue实例创建及数据挂载渲染

### vue实例篇

#### vue实例创建及数据挂载渲染

##### 一、 创建实例

vue实例创建其实很简单，首先讲一下vue其实是由一个构造函数new Vue()生成的一个实例

```

const vm = new Vue({

...some code

})

```

你可以把这作为根实例，所有嵌套在其下面的组件都是实例

##### 二、声明数据

接下来就是写入数据，实例里面接受的是一个对象

```

let data = {

num: 0,

message: 'this is a message',

visible: true

...

}

```

直接将其赋给data属性

```

const vm = new Vue({

data: data

})

```

到这里一个vue实例就创建好了，因为vue是响应式的，设计模式是observer pattern(观察者模式)，当数据改变时，vue视图会自动更新，(除非你使用object.freeze()阻止修改属性)。

##### 挂载数据

紧接着挂载实例,挂载实例顾名思义就是讲vue挂载到dom树中，从而经过浏览器引擎解析成页面。

```

```

```

const vm = new Vue({

el: '#app', // 仅需声明这个属性就可以

data: data

})

```

##### 四、渲染dom

最后怎么渲染数据呢？其实也很简单，vue本身就实现了数据绑定，双大括号的文本插值，这里要与react的单大括号功能是一样的，都是为了实现数据的显示绑定。

```

{{ message }}

```

到这里实例篇就结束了，有错误的欢迎批评指正。