Vue3 - Reactivity

목차

• Vue3 - Component 간 통신
• Vue3 - Component
• Vue3 - Composition API
• Vue3 - Instance
• Vue3 - Reactivity
• Vue3 - 시작하기

Reactivity

Proxy

• 참고
  • https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Proxy

set

• target
  • 객체
• property
  • 객체내 속성
• value
  • 전달 받는 값

<div id="app">

</div>
<!-- <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> -->
<script>
  var data = {
    message: 10
  }

  function render(sth) {
    var div = document.querySelector('#app');
    div.innerHTML = sth;
  }

  var app = new Proxy(data, {
    get() {
      console.log('값 접근')
    },
    set(target, prop, value) {
      console.log('값 갱신')
      target[prop] = value
      render(value)
    }
  })
</script>

app.message = 'hello vue';