14/03.Change Detection Caveats2.html

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <link rel="stylesheet" href="">
    <script src="vue.js"></script>
    <style>
    pre {
        margin: 0;
        padding: 0.3em;
        border: 1px dashed #2f6fab;
        background-color: #f9f9f9;
        color: black;
        line-height: 1em;
        font-family: verdana, helvetica, sans-serif;
    }
    </style>
</head>

<body>
    <div id="app">
        <h1>vm</h1>
        <pre>a:{{ a | json 4 }}</pre>
        <pre>b:{{ b | json 4 }}</pre>
        <pre>c:{{ c | json 4 }}</pre>
        <pre>d:{{ d | json 4 }}</pre>
        <pre>e:{{ e | json 4 }}</pre>
        <pre>someObject:{{ someObject | json 4 }}</pre>
        <pre>ajax:{{ ajax | json 4 }}</pre>

    </div>
    <div id="app1">
        <h1>vm1</h1>
        <pre>f:{{ f | json 4 }}</pre>
        <pre>g:{{ g | json 4 }}</pre>
    </div>
    <script>
    var data = {
        a: 1,
        someObject: {
            x: 10
        },
        ajax:{}
    }
    var vm = new Vue({
        data: data, // `vm.a` 和 `data.a` 现在是响应的
        el: '#app',
        created: function() {
                // 深拷贝，在原有的 someObject 上，新增 record
                this.someObject = Object.assign({}, this.someObject, {
                    y: 20,
                    z: 30
                });
                // 深拷贝，把 a 清空，新增 record
                this.a = Object.assign({}, {}, {
                    o: 20,
                    p: 30
                });

                this.$set('ajax',{'book':'台湾小凡喜欢 vue.js','id':'123'}); // 小凡：异步 data ，要有预设值，并且使用 set

            } // created end
    })

    vm.b = 2; // `vm.b` 不是响应的, 实例

    data.c = 3; // `data.c` 不是响应的，

    vm.$set('d', 4); // 实例，增加 record , 建议要 有预设值，不然会出错

    // [Vue warn]: You are setting a non-existent path "d" on a vm instance.
    // Consider pre-initializing the property with the "data" option
    // for more reliable reactivity and better performance.

    Vue.set(data, 'e', 5); // 全局方法

    vm.$log(); // 打印 vm
    var vm1 = new Vue({
        el: '#app1',
        data: {
            f: {},
            g: {}
        },
        created:function (){
            this.$set('f.a',80); // 小凡：异步 data ，要有预设值，并且使用 set
        }
    });
    vm1.$set('g.a', 90); // 小凡：异步 data ，要有预设值，并且使用 set

    vm1.$log(); // 打印 vm1
    </script>
</body>

</html>