HTML5教程

详解Vue的set方法

本文主要是介绍详解Vue的set方法，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

一、起源：若直接对data内的数组、对象进行修改，不会触发视图更新

Vue文档关于这一点解释的很明白，笔者不再赘述，各位一定要看完文档再来

数组更新监测
对象更新监测

二、如何正确修改数组、对象以触发视图更新

2.1 数组

2.1.1 使用vue提供的变异方法

image.png

2.1.2 直接将data中的数组整个替换

如下例中，是要实现vm.items[1] = 'excess' 
<body>
<div id="app">
    <ul>
        <li v-for="(item, index) in items">
            {{ index }} : {{ item }}
        </li>
    </ul>
</div>

<script>
let vm = new Vue({
    el: '#app',
    data: {
        items: ['a', 'b', 'c']
    },
    created() {
        this.items = ['a', 'test', 'c']
    }
})
</script>
</body>

2.1.3 使用set方法【后文详解】

2.2 对象

2.2.1 直接将data中的Object整个替换

如下例中，是要实现给object新增一个键值对{test: 'newthing'} 
<body>
<div id="app">
    <ul>
        <li v-for="(value, name) in object">
            {{ name }} : {{ value }}
        </li>
    </ul>
</div>

<script>
let vm = new Vue({
    el: '#app',
    data: {
        object: {
            title: 'How to do lists in Vue',
            author: 'Jane Doe',
            publishedAt: '2016-04-10'
        }
    },
    created() {
        this.object = {
            title: 'How to do lists in Vue',
            author: 'Jane Doe',
            publishedAt: '2016-04-10',
            test: 'newthing'
        }
    }
})
</script>
</body>

2.2.2 使用set方法【后文详解】

三、使用set方法

3.1 官方API文档

文档：Vue.set( target, propertyName/index, value )
注意Vue.set()还有个别名，用于vue实例——vue.$set( target, propertyName/index, value )

3.2 应用

数组
如下例中，是要实现vm.items[1] = 'excess' 
<body>
<div id="app">
    <ul>
        <li v-for="(item, index) in items">
            {{ index }} : {{ item }}
        </li>
    </ul>
</div>

<script>
let vm = new Vue({
    el: '#app',
    data: {
        items: ['a', 'b', 'c']
    },
    created() {
        this.$set(this.items, 1, 'excess')
    }
})
</script>
</body>
对象
如下例中，是要实现给object新增一个键值对{test: 'newthing'} 
<body>
<div id="app">
    <ul>
        <li v-for="(value, name) in object">
            {{ name }} : {{ value }}
        </li>
    </ul>
</div>

<script>
let vm = new Vue({
    el: '#app',
    data: {
        object: {
            title: 'How to do lists in Vue',
            author: 'Jane Doe',
            publishedAt: '2016-04-10'
        }
    },
    created() {
        this.$set(this.object, 'test', 'newthing')
    }
})
</script>
</body>
这篇关于详解Vue的set方法的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
栏目导航