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>
Logo

前往低代码交流专区

更多推荐