vue3.Vue实例

---

创建一个实例

new Vue

<h1>创建一个实例</h1>
    <pre>
        var vm = new Vue({
            //选项
        })
    </pre>

---

数据与方法

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

<hr>
    <h1>数据与方法</h1>
    <p>当一个 Vue 实例被创建时，它将 data 对象中的所有的 property 加入到 Vue 的响应式系统中。当这些 property 的值发生改变时，视图将会产生“响应”，即匹配更新为新的值。</p>
    <p id="app-1">
        data.a:{{ a }} "/{/{ b }/}/" b:undefined
    </p>
    <script>
        // 我们的数据对象
        var data = { a: 1 };

        // 该对象被加入到一个 Vue 实例中
        var vm = new Vue({
            el:"#app-1",
            data: data
        });

        // 获得这个实例上的 property
        // 返回源数据中对应的字段
        console.log(vm.a === data.a); // => true

        // 设置 property 也会影响到原始数据
        vm.a = 2;
        console.log(data.a); // => 2

        // ……反之亦然
        data.a = 3;
        console.log(vm.a); // => 3

        vm.b = 'hi';

        console.log(vm.b === data.b); // => true

        // 设置 property 也会影响到原始数据
        vm.b = 'ni';
        console.log(data.b); // => undefined

        // ……反之亦然
        data.b = 'mi';
        console.log(vm.b); // => ni
    </script>
    <p>只有当实例创建时就已经存在与data中的property才是响应式的,如果后面新添加的,则不是响应式的.</p>

---

阻止追踪

Object.freeze()阻止修改现有的 property，也意味着响应系统无法再追踪变化。

<h1>Object.freeze()阻止修改现有的 property，也意味着响应系统无法再追踪变化。</h1>
    <div id="app">
        <p>{{ foo }}</p>
        <!-- 这里的 `foo` 不会更新！ -->
        <button v-on:click="fn">Change it</button>
    </div>
    <script>
        var obj = {
            foo: "bar"
        }
        Object.freeze(obj);
        new Vue({
            el: "#app",
            data: obj,
            methods: {
                fn: function () {
                    obj.foo = "foo";
                }
            }
        });
    </script>

---

实例property和方法

除了数据 property，Vue 实例还暴露了一些有用的实例 property 与方法。它们都有前缀 $，以便与用户定义的 property 区分开来。例如：

<h1>除了数据 property，Vue 实例还暴露了一些有用的实例 property 与方法。它们都有前缀 $，以便与用户定义的 property 区分开来。例如：</h1>
    <div id="example"></div>
    <script>
        var data = { a: 1 };
        var vm = new Vue({
            el: '#example',
            data: data
        });

        console.log(vm.$data === data);// => true
        console.log(vm.$el === document.getElementById('example')); // => true

        // $watch 是一个实例方法
        vm.$watch('a', function (newValue, oldValue) {
            // 这个回调将在 `vm.a` 改变后调用
            console.log("example",newValue,oldValue);
        });
        //注意  如果实在监听前改变了值  是监听不到的
        vm.a = 2;
        console.log(vm.a);
    </script>

---

create钩子

created 钩子可以用来在一个实例被创建之后执行代码：
也有一些其它的钩子，在实例生命周期的不同阶段被调用，如 mounted、updated 和 destroyed。生命周期钩子的 this 上下文指向调用它的 Vue 实例。 钩子和实例方法中不能使用箭头函数

<!--实例声明周期钩子-->
    <script>
        new Vue({
            data: {
                a: 1
            },
            created: function () {
                // `this` 指向 vm 实例
                console.log('a is: ' + this.a);
            }
        });
        // => "a is: 1"
    </script>

---

生命周期图