# 创建 vue 实例

# 数据与方法

当一个 Vue 实例被创建时，它将 data 对象中的所有的属性加入到 Vue 的响应式系统中。当这些属性的值发生改变时，视图将会产生 “响应”，即匹配更新为新的值。

<html>
    <head>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>

    <body>
        <div id="app">
                <p>{{ a }}</p>
        </div>

        <script>
            var data = { 
                a: 1
            }

            var vm = new Vue({
                el: '#app',
                data: data
            })
            
            vm.a = 123;
            data.a = 456;
            
        </script>
    </body>
</html>

改变 vm.a 的值也会引起 data.a 的变化，反之亦然

vm.a == data.a
// true

vm.a = 3;
data.a;
// 3

data.a = 4;
vm.a;
// 4

使用 Object.freeze() 方法阻止属性修改

Object.freeze(data);