Vue修改数组对象的更新问题

在Vue中，对变量（数组对象）进行修改，有时并不会立即渲染在模板中，但打印发现变量确实已被修改。此时需要注意修改的方式，现总结备忘。

官方说明：https://cn.vuejs.org/v2/guide/reactivity.html

demo：


<style>
.main span{
    color: red;
}
</style>

<div id="app" class="main">
    <h3>修改代码后，点击运行预览效果：</h3>
    <p>obj：<span>{{obj}}</span></p>
    <p>arr: <span>{{arr}}</span></p>
</div>

<script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
<script>
var vm = new Vue({
    el: "#app",
    data() {
        return {
            obj: {},
            arr: []
        }
    },
    mounted() {
        /*
         * Object
         */

        // this.obj.name='DH';  // x

        // delete this.obj.name;  // x

        // this.obj={name:'DH'}; // √

        // this.obj = Object.assign({}, this.obj, {name: 'DH'});  // √

        // this.$set(this.obj,'name','DH');   // √

        /*
         * Array
         */

        // this.arr[0]='a';    // x

        // this.arr.length=0;    // x

        // this.$set(this.arr,0,'a');   // √

        // this.arr.push('a');    // √
        // 同shift、unshift、pop、splice、slice、concat...
    }
});
</script>

Vue修改数组对象的更新问题

热门文章

留言：