VUE 数据变化页面不加载（数组重新赋值不渲染）

当vue中data里声明或者已经赋值过的对象、数组时，向对象中添加新的属性，如果更新此属性的值，页面不会更新视图。

举个栗子：当我点击按钮想要改变message中的值时

此时当我点击按钮，页面并不会发生改变。

官方定义：如果在实例创建之后添加新的属性到实例上，它不会触发视图更新。　

Vue官方文档给我们提供了两种方法：Vue.set()和this.$set()

两种方法作用一样，参数也是一致的。

区别：Vue.set 可以设置实例创建之后添加的属性，而this.$set只能设置实例创建后存在的属性

<template>
 <div id="app">
  <p v-for="item in items" :key="item.id">{{item.message}}</p>
  <button class="btn" @click="handClick()">更改数据</button>
 </div>
</template>
 
<script>
export default {
 name: 'App',
 data () {
  return {
   items: [
        { message: "one", id: "1" },
        { message: "two", id: "2" },
        { message: "three", id: "3" }
      ]
  }
 },
 mounted () {
   this.items[0] = { message:'first',id:'4'} //此时对象的值更改了，但是视图没有更新
  // let art = {message:'first',id:"4"}
  // this.$set(this.items,0,art) //$set 可以触发更新视图
 },
 methods: {
  handClick(){
   let change = this.items[0]
   change.message="shen"
   this.$set(this.items,0,change)
  }
 }
}
</script>
 
<style>
 
</style>

 

 

调用方法: Vue.set( target , key , value)

• target: 要更改的数据源（可以是一个对象或者数组）
• key 要更改的具体数据 （索引）
• value 重新赋的值