当前位置：首页 > news >正文

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

news 2025/9/13 3:20:24

单文件：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)  // 0createApp({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}}
}