vue中$set的使用

 

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