Vue - 7.对象变更检测

622 阅读1分钟

Vue不能检测普通方法对象属性的添加和删除,比如

user: {}
-------------------
this.user.age = 23;

Vue.set( target, propertyName/index, value )

对此vue提供了set方法,向响应式对象中添加属性,并确保这个新属性同样是响应式的,且会触发视图更新

<body>
    <div id="app">
        <h3>
            {{user.name}},{{user.age}}
            <button @click='handlerAdd'>添加属性</button>
        </h3>
    </div>
    <script src="./vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                user: {}
            },
            methods: {
                handlerAdd() {
                    this.$set(this.user, 'age', 20);
                }
            },
            created() {
                setTimeout(() => {
                    this.user = {
                        name: 'Max'
                    }
                }, 2000);
            }
        })
    </script>
</body>

添加多个属性可以set多次,但是有些繁琐,可以使用es6提供的 Object.assign 方法

handlerAdd() {
    //添加多个响应式属性
    this.user = Object.assign({},this.user,{
        age: 23,
        lv: 6
    })
}

Vue.delete(target,propertyName/index)

删除对象的属性,如果对象是响应式的,确保删除能触发更新视图,这个方法主要用于避开 Vue 不能检测到属性被删除的限制,但是应该很少会使用到它