Vue2—VS—vue3对象

vue2

• vue2版本需要使用set方法才能实现修改对象响应到视图

  <div id="app">
    <ul>
      <li v-for='(value,key) in obj'>{{key}}={{value}}</li>
    </ul>
    <button @click=addObj>点我添加属性</button>
  </div>
  <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.js"></script>
  <script>
    const vm = new Vue({
      el:'#app',
      data:{
        obj:{
          a:1,
          b:2
        }
      },
      methods:{
        addObj() {
          // this.obj.c = 3  //使用这种方法不会改变视图
          this.$set(this.obj,'c',3)
        }
      }
    })
  </script>

vue3

vue3版本直接修改对象即可响应的视图

 <script src="https://libs.cdnjs.net/vue/3.0.0-rc.5/vue.global.js"></script>
  <script>
    const { createApp } = Vue
    const app = createApp({
      data(){
        return{
          obj:{
            a:1,
            b:2
          }
        }
      },
      methods :{
        addObj() {
          this.obj.c = 3
        }
      }
    }).mount('#app')
  </script>