当一个 Vue 实例被创建时，它将 data 对象中的所有的 property 加入到 Vue 的响应式系统中。当这些 property 的值发生改变时，视图将会产生“响应”，即匹配更新为新的值。
一、示范代码
// 我们的数据对象 var data = { firstname: 'CL', lastname: '张' } // 该对象被加入到一个 Vue 实例中 var vm = new Vue({ el: '#app-8', data: data }) // 获得这个实例上的 property // 返回源数据中对应的字段 console.log(vm.lastname == data.lastname); // 设置 property 也会影响到原始数据 vm.lastname = '李'; console.log(data.lastname); // ……反之亦然 data.lastname = '王'; console.log(vm.lastname);
<div id="app-8"> {{lastname}} </div>
二、效果图
三、整体代码
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>VUE简单示范</title> <script type="text/javascript" src="../js/vue.min.js" charset="utf-8"></script> </head> <body> <div id="app-8"> {{lastname}} </div> <script> // 我们的数据对象 var data = { firstname: 'CL', lastname: '张' } // 该对象被加入到一个 Vue 实例中 var vm = new Vue({ el: '#app-8', data: data }) // 获得这个实例上的 property // 返回源数据中对应的字段 console.log(vm.lastname == data.lastname); // 设置 property 也会影响到原始数据 vm.lastname = '李'; console.log(data.lastname); // ……反之亦然 data.lastname = '王'; console.log(vm.lastname); </script> </body> </html>
本文参考：
https://cn.vuejs.org/v2/guide/instance.html