vue3.html

<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>模拟vue3变更</title>
</head>
<body>
  <div id="root"></div>
  <button onClick="changeData()">改变name和age</button>
  <script src="./vue3/vue3effect.js"></script>
  <script src="./vue3/vue3node.js"></script>
  <script src="./vue3/vue3mock.js"></script>
  <script>
    const root = document.querySelector('#root');
    let list = reactive({ name: '张三', age: 10 })
    let info = computed(() => list.name + list.age)
    function changeData () {
      list.name = '李四'
      list.age = 150
    }
    const mountApp = createApp({
      setup () {
        return () => {
          root.innerHTML = `${list.name}----${list.age}---${info.value}`
        }
      }
    })
    mountApp.mount('#root')
  </script>
</body>
</html>