4.1.1　数据

data：在Vue实例中初始化的data中的所有数据会自动进行监听绑定，然后可以在View中通过使用两个大括号来绑定data中的数据。

代码如下：

运行效果如图4-1所示。

图4-1　data运行效果图（一）

在后面的代码中，只要通过app.message='XX'，即可进行视图的实时更新，使用起来很简单。

提示：data中的数据都是浅拷贝。这意味着，如果修改原来的对象也会改变data，从而触发更新事件。

    var info = { a: 1 }
    var app = new Vue({
       el: '#app',
       data: infor
    })
       infor.a = 3       //使得data.a = 3，这里也会触发数据监听，从而更新视图
       app.a = 2         //使得info.a = 2，同样会触发数据监听

在组件的使用过程中也可以使用data，需要注意以下几点。

（1）data的值必须是一个函数，并且返回值是原始对象。如果传给组件的data是一个原始对象，则在建立多个组件实例时，它们就会共用这个data对象，修改其中一个组件实例的数据就会影响其他组件实例的数据。

（2）data中的属性和props中的不能重名。

运行效果如图4-2所示。

图4-2　data运行效果图（二）