Vue 中 $set的使用

原创已于 2023-12-13 18:54:51 修改 · 3.9w 阅读

72 ·

CC 4.0 BY-SA版权

文章标签：

#Vue #$set #set

于 2018-12-21 15:27:27 首次发布

VUE 专栏收录该内容

20 篇文章

订阅专栏

本文详细介绍了在Vue.js开发中如何正确使用$set方法来处理实例创建后新增属性的问题，避免视图更新失败的情况。

vue.$set:设置的属性对象可以是Object或者数组
设置的key值可以 string或者number类型
设置的值可以是任意值

vue进行开发的过程中，可能会遇到一种情况：当生成vue实例后，当再次给数据赋值时，有时候并不会自动更新到视图上去；
Vue文档有这么一句话：如果在实例创建之后添加新的属性到实例上，它不会触发视图更新.,代码示例如下：

<div id="app">
  <ul>
    <li>{{obj.name}}</li>	
    	<li>{{obj.age}}</li>		
    	<li>{{obj.sex}}</li>		
    	<li>{{obj.info.content}}</li>
  </ul>
</div>

<script>
  let vm = new Vue({
    el:'#app',
    data() {
      return {
        obj:{name: "SMlZ",age: '3', info: {content: 'my name is smlz'}}
        }
    },
    mounted(){
      this.obj.sex = 'female' // 可以设置成功因为值设置成功了，但值没有属性，
      //如果后续更改这个值,比如在button上点击事件视图是不会更新的
      console.log(this.obj)
      this.$set(this.obj.info,'content', 'who is my girlfriend?')// 能设置成功
    }
  });
</script>

在实例创建前this.obj.sex = 'female' 你能看到视图有sex这一项，打印出来obj你会发现sex少了其他属性所共有的东西

所以如果在实例创建之后添加新的属性或者更改这个sex属性到实例上，它不会触发视图更新。比如我们页面新加一个button 附带个点击事件：

<div id="app">
  <ul>
    <li>{{obj.name}}</li>
    <li>{{obj.age}}</li>
    <li>{{obj.sex}}</li>
    <li>{{obj.info.content}}</li>
    </li>
  </ul>
</div>
<button @click="showSex">显示性别</button>

<script>
let vm = new Vue({
  el:'#app',
  data() {
    return {
      obj:{
        name: "SMlZ",
        age: '3',
        info: {
          content: 'my name is smlz'
        }
      }
    }
  },
  methods:{
    showSex(){
      this.obj.sex = 'female' // Vue.set(this.obj,'sex', '女')//this.$set(this.obj,'sex', '女女');
    }
  },
  mounted(){
    this.obj.sex = 'female' // 可以设置成功因为值设置成功了，但值没有属性，
    //如果后续更改这个值,比如在button上点击事件视图是不会更新的。
    console.log(this.obj)
    this.$set(this.obj.info,'content', 'who is my girlfriend?');
  }
});
</script>

点击button 无论怎么更改是不会更新的，因为在创建实例的时候缺少了vue 监听的 set、get属性
所以要在mounted里把初始值this.obj.sex = ‘female’ 去掉
或者直接在页面实例未创建完成前，用$set方法添加进去），这样在实例创建后想更改或者添加新属性，用Vue.set()' 或者 this.$set()便成功了

完整代码：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>vue $set</title>
  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
  <ul>
    <li>{{obj.name}}</li>
    <li>{{obj.age}}</li>
    <li>{{obj.sex}}</li>
    <li>{{obj.info.content}}</li>
    </li>
  </ul>
  <button @click="showSex">显示性别</button>
</div>
<script>
let vm = new Vue({
  el:'#app',
  data() {
    return {
      obj:{
        name: "SMlZ",
        age: '3',
        info: {
          content: 'my name is smlz'
        }
      }
    }
  },
  methods:{
    showSex(){
      Vue.set(this.obj,'sex', '女')//this.$set(this.obj,'sex', '女女');
    }
  },
  mounted(){
    this.$set(this.obj.info,'content', 'who is my girlfriend?');
  }
});
</script>
</body>
</html>