我的书签
添加书签
移除书签Data
开始
在 组件基础 文章中，相信你已经了解了一些基础的添加数据的方法。如果你还没有学习过这篇教程，请完成学习后再来吧！
在组件基础这篇教程里，你只学到了如何添加 data。那么，为什么要动态添加 data 呢？
其实很简单，因为模板是静态的，而数据是动态的。如果我们更改某一处数据，其实比更改模板简单得多！
例如我们先定义一个名为com1的组件，然后把它渲染出来：
- Ale("com1", {
template: function(){
return "Hello " + this.name;
},
data: {
name: "World"
}
})
Ale.render("com1", {
el: "#app"
})
渲染结果如下：
那么我们既然知道了可以动态修改数据，那么如何修改呢？
很简单，我们只需要将 Ale.render 函数返回的结果（其实就是 Ale 组件对象）存储到一个变量里：
- var app = Ale.render("com1", {
el: "#app"
})
然后再使用这个变量来操作 data 即可：
- app.data.name = "Ale.js"; /* 重新赋值 */
现在让我们在控制台中输入 app.data.name = "Ale.js"，然后你将会看到下方实例动态更新：
同时，我们的数据将会自动绑定在组件内的全部元素上，使用 this.data 即可访问，例如我们来做个记录点击次数的组件：
- /* 定义组件 */
Ale("counter", {
template: function(){
/* 这里让 this.data.count 自增 */
return "<button onclick='this.data.count++'>You clicked me " + this.count + " times.";
},
data: {
count: 0
}
})
/* 渲染组件 */
Ale.render("counter", {
el: "#app"
})
其实数据不光可以应用在模板上，也可以应用在任何支持函数的属性上。当然，每当你更新数据时，这些绑定数据的属性也会得到更新。
具体有哪些属性可以应用数据，请继续往下查看教程！
高级
如果你了解过 Vue，你将会发现，使用 Vue 设置数据需要添加一个函数，然后使用 return 返回需要的数据：
- data: function () {
return {
/* 这里添加 data */
}
}
Vue 这么做是因为每次 JavaScript 引擎复制对象时，会连同对象的内存地址一块复制，这样会导致一个对象更新时另一个对象也会更新。这时如果我们使用函数每次返回一个对象，就而相当于每次新创建了一个内存地址不同的新对象，就不会有上述问题了。
可是这么做会导致你需要书写的代码量增多，而 Ale 使用深拷贝从对象根部进行扫描，并逐层创建一个全新的对象。这样做会造成一定的性能损耗（小数据量时忽略不计），但是同时也减少了你需要书写的代码量。
如果你需要多个组件共用一套数据，请尝试让一个组件在一次渲染时同时渲染多个元素，或使用 复合组件。
