当data对象中的某个值需要更新，但更新之前是没有值的状态，如果此时只是简单的修改内部的值，就会发现页面上并不会渲染更改后的值。

原因

原因就是添加新的值之后并不会将添加的值双向绑定，此时虽然更新了，但是页面并不会渲染。

解决

Vue.set()

<div id="app">
	<ul>
		<li v-for="(item, index) in tempList" :key="index">{{item}}</li>
	</ul>
	<button @click="addList">change</button>
</ div>

<script>
new Vue({
    el:"#app",
    data:{
        tempList: [
        {id: 1, name: '1'},
        {id: 2, name: '2'}
      ]
    },
    methods:{
        addList () {
            Vue.set(this.tempList, 0, {id: 3, name: '3'})
        }
    }
});
</script>

如果是在组件中使用，就不能直接使用Vue实例来调用，但是可以使用this

export default {
    data:{
        tempList: [
        {id: 1, name: '1'},
        {id: 2, name: '2'}
      ]
    },
    methods:{
        addList () {
            this.$set(this.tempList, 0, {id: 3, name: '3'})
        }
    }
};
</script>