Vue3-响应式基础:单文件和组合式文件

单文件：html

<!DOCTYPE html>
<html>
<head>
    <title>响应式基础</title>
</head>
<body>
    <div id="app" >
        <!-- dynamic parameter:同样在指令参数上也可以使用一个 JavaScript 表达式，需要包含在一对方括号内： -->
    </div>
    <!-- 引入Vue.js -->
    <script type="module">
      import { createApp,ref } from "https://unpkg.com/vue@3/dist/vue.esm-browser.js"
      const count = ref(0)

      console.log(count)   // { value: 0 }
      console.log(count.value)  // 0


      createApp({
        data(){
          return {
          }
        }
      }).mount('#app')
    </script>

    
</body>
</html>

组合文件

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app"></div>
    <script type="module">
        import {createApp, ref} from "https://unpkg.com/vue@3/dist/vue.esm-browser.js"
        import count from './reactive.js'

        createApp(count).mount('#app')
    </script>
</body>
</html>

reactive.js

import { ref } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'

export default {
  // `setup` 是一个特殊的钩子，专门用于组合式 API。
  setup() {
    const count = ref(0)

    // 将 ref 暴露给模板
    return {
      count
    }
  }
}