Vue: 새로운 사후 대응 속성을 추가하기 위한 다른 옵션?

Vue: 새로운 사후 대응 속성을 추가하기 위한 다른 옵션?

반응하는 속성을 추가하는 다양한 방법을 이해하려고 합니다.루트 레벨에 직접 속성을 추가할 수 없다는 것을 알고 있기 때문에 루트 레벨에는user데이터 내의 객체 세트:

data() {
   return {
       user: {
       }
   }
}

여기서부터가 헷갈리는 부분인데, 왜냐하면 의사 선생님들이 말하길Vue.set는 오브젝트에 새로운 리액티브속성을 추가하는 방법입니다.이 예에서는 다음과 같습니다.Vue.set(this.user, 'first_name', 'Bob')

다만, 다른 어프로치를 시도하고, 그 안에서 다음의 조작을 실행시키는 버튼을 만들었습니다.

testFunc() {
    let names = ["Bob", "Vin", "Mark"]
    this.user.test_property = names[Math.floor(Math.random() * names.length];
}

그리고 이게 먹혔어요Vue Dev 툴로 테스트하여 속성을 확인했습니다.test_property오브젝트에 추가되어 버튼을 클릭할 때마다 오브젝트가 변경됩니다.이게 왜 효과가 있을까요?Vue.set()새로운 반응적 특성을 만드는 유일한 방법인가요?

마지막으로 다음과 같이 하면<input v-model="user.other_new_property" />이 트랙은 새로운 속성에서도 변경됩니다.이것도 왜 동작하는지는 잘 모르겠습니다.표시하다

옵션 api와 함께 Vue v2를 사용하고 있는 것 같습니다.그런 경우에는 간단하게 할 수 있습니다.this.property_name = value;템플릿에서 액세스할 수 있습니다.

물론이야.this.user.test_property속성을 추가할 수 있습니다.test_property오브젝트에 접속합니다.하지만 이 특성은 반응하지 않습니다.

new Vue({
  el: '#app',
  data() {
    return {
      user: {}
    }
  },
  created() {
    this.user.name = 'a name'
  },
  methods: {
    changeName () {
      this.user.name = 'b name'
    },
    changeAge () {
      this.user.age = '23'
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <p>{{ user.name }}</p>
  <input v-model="user.age" />

  <button @click="changeName">click me to change name</button>
  <button @click="changeAge">click me to change age</button>
</div>

언급URL : https://stackoverflow.com/questions/66416841/vue-different-options-to-add-a-new-reactive-property