chartjs更新数据 vue_复习之基于Vue响应式的更新数据的方法

Vue响应式的含义：当数据变化，页面就会重新渲染。

数组：当数组的数据变化，页面就会更新的方法。

    <div id="demo">
        <p v-for='(item, index) in arr'> {{ item }}---{{ index }} </p>
    </div>
    <script>
        const vm = new Vue({
            el: '#demo',
            data: {
                arr: ['苹果', '葡萄', '香蕉']
            }
        });
    </script>

1）更改数组的引用：

如图，直接更改vm.arr

2）使用数组的变异方法：push、pop、shift、unshift、splice、sort、reverse

例如：数组的变异方法push

3）利用Vue的set方法：

vm.$set是Vue.set的别名，使用方法：Vue.set(object, propertyName, value)，也就是这个意思：Vue.set(要改谁，改它的什么，改成啥)。

Vue.set()方法

vm.$set()方法

4）利用Vue的delete方法：

vm.$delete是Vue.delete的别名，使用方法：Vue.delete(object, target)，也就是这个意思：Vue.delete(要删除谁的值，删除哪个)。

Vue.delete()方法

vm.$delete()方法

对象：当对象的数据变化，页面就会更新的方法。

    <div id="demo">
        <p v-for='(item, index) in obj'> {{ item }}---{{ index }} </p>
    </div>
    <script>
        const vm = new Vue({
            el: '#demo',
            data: {
                obj: {
                    name: 'li',
                    age: 20,
                    height: '160cm',
                    width: '86kg',
                }
            }
        });
    </script>

1）更改对象的引用：

2）利用Vue的set方法：

vm.$set是Vue.set的别名，使用方法：Vue.set(object, key, value)，也就是这个意思：Vue.set(在哪里添加，添加的key值，添加的value值)。

Vue.set()方法

vm.$set()方法

4）利用Vue的delete方法：

vm.$delete是Vue.delete的别名，使用方法：Vue.delete(object, target)，也就是这个意思：Vue.delete(要删除谁的值，删除哪个)。

Vue.delete()方法

vm.$delete()方法

什么数据更改后不会渲染页面？

1）更改的数据必须是存在的数据，否则不能重新渲染页面，因为监听不到。

2）更改的数据必须已渲染过的数据，否则从性能角度考虑，不会重新渲染页面。

页面都不需要渲染这个数据，那么更改这个数据，为什么页面要重新渲染。

3）在数组中，利用索引直接设置一个数组项时，不会重新渲染页面。

    <div id="demo">
        <p v-for='(item, index) in arr'> {{ item }}---{{ index }} </p>
    </div>
    <script>
        const vm = new Vue({
            el: '#demo',
            data: {
                arr: ['li', 'liu', 'deng', 'wang']
            }
        });
    </script>

4）在数组中，修改数组长度时，不会重新渲染页面。

    <div id="demo">
        <p v-for='(item, index) in arr'> {{ item }}---{{ index }} </p>
    </div>
    <script>
        const vm = new Vue({
            el: '#demo',
            data: {
                arr: ['li', 'liu', 'deng', 'wang']
            }
        });
    </script>

5）在对象中，添加或删除对象时，不会重新渲染页面。

    <div id="demo">
        <p v-for='(item, index) in obj'> {{ item }}---{{ index }} </p>
    </div>
    <script>
        const vm = new Vue({
            el: '#demo',
            data: {
                obj: {
                    name: 'li',
                    age: 20,
                    height: '160cm',
                    width: '86kg',
                }
            }
        });
    </script>

总结：

更改数组用变异方法，就够了。

更改对象就用vm.$set和vm.$delete。