Data

开始

在 组件基础 文章中，相信你已经了解了一些基础的添加数据的方法。如果你还没有学习过这篇教程，请完成学习后再来吧！

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

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

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

  1. Ale("com1", {
        template: function(){
            return "Hello " + this.name;
        },
        data: {
            name: "World"
        }
    })

    Ale.render("com1", {
        el: "#app"
    })

渲染结果如下：

那么我们既然知道了可以动态修改数据，那么如何修改呢？

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

  1. var app = Ale.render("com1", {
        el: "#app"
    })

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

  1. app.data.name = "Ale.js"; /* 重新赋值 */

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

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

  1. /* 定义组件 */
    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 返回需要的数据：

  1. data: function () {
        return {
            /* 这里添加 data */
        }
    }

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

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

如果你需要多个组件共用一套数据，请尝试让一个组件在一次渲染时同时渲染多个元素，或使用 复合组件。

原文: https://cn.alejs.org/2018/12/01/ComponentData