Data

在组件基础这篇教程里，你只学到了如何添加 。那么，为什么要动态添加 data 呢？

其实很简单，因为模板是静态的，而数据是动态的。如果我们更改某一处数据，其实比更改模板简单得多！

例如我们先定义一个名为的组件，然后把它渲染出来：

渲染结果如下：

很简单，我们只需要将 Ale.render 函数返回的结果（其实就是 Ale 组件对象）存储到一个变量里：

然后再使用这个变量来操作 即可：

现在让我们在控制台中输入 app.data.name = "Ale.js"，然后你将会看到下方实例动态更新：

同时，我们的数据将会自动绑定在组件内的全部元素上，使用 即可访问，例如我们来做个记录点击次数的组件：

具体有哪些属性可以应用数据，请继续往下查看教程！

高级

如果你了解过 Vue，你将会发现，使用 Vue 设置数据需要添加一个函数，然后使用 return 返回需要的数据：

Vue 这么做是因为每次 JavaScript 引擎复制对象时，会连同对象的内存地址一块复制，这样会导致一个对象更新时另一个对象也会更新。这时如果我们使用函数每次返回一个对象，就而相当于每次新创建了一个内存地址不同的新对象，就不会有上述问题了。

可是这么做会导致你需要书写的代码量增多，而 Ale 使用深拷贝从对象根部进行扫描，并逐层创建一个全新的对象。这样做会造成一定的性能损耗（小数据量时忽略不计），但是同时也减少了你需要书写的代码量。