Vue笔记

components里面也是组件，但没有App.vue这个根组件厉害

import { createApp } from "vue";

Note

Vue2中必须这样写吗
是的，你的理解完全正确。

在 Vue 2（以及 Vue 3 的选项式 API）中，如果你想在组件里定义属于这个组件自己的、可变化的数据（比如名字、数量、状态开关等），你就必须按照这个格式来写：

标准格式

export default {
    // ...其他选项
    data() {
        return {
            // 这里放你的具体数据
            message: 'Hello Vue',
            count: 0
        }
    },
    // ...其他选项
}

Note

在Vue中如果要引入一个模块里面的函数必须要是加上大括号吗

在 Vue（以及标准的 JavaScript/ES6 模块系统）中，是否需要加大括号 {}，完全取决于那个文件是如何“导出”（export）这个函数的。

简单来说，规则只有两条：

1. 如果导出时用了 `export function`（命名导出）

必须加 {}。

导出方（定义函数的文件）是这样写的：

// utils.js
export function myFunc() { // 注意：这里有 export 关键字
    console.log('我是函数')
}

引入方（你现在的文件）必须这样写：
```
// App.vue
import { myFunc } from './utils.js' // 必须加 {}
```
原因： 这种导出方式叫“命名导出”（Named Export）。文件里可能有多个函数，你必须用 {} 明确告诉电脑：“我要引入的是叫 myFunc 那个特定的函数”。

2. 如果导出时用了 `export default`（默认导出）

绝对不能加 {}。

导出方是这样写的：

// utils.js
function myFunc() {
    console.log('我是函数')
}
export default myFunc; // 注意：这里是 default

引入方必须这样写（不加括号）：
```
// App.vue
import myFunc from './utils.js' // 不加 {}
```
原因： default 意味着这个文件“默认”只输出这一个东西。引入时你可以给它起任何名字，而且不需要 {}。

总结对比表

导出方式 (在函数定义的文件里)	导入方式 (在你现在的文件里)	备注
export function fn()	import { fn } from './xx'	必须加 {}
export default fn	import fn from './xx'	不能加 {}

为什么会有这个区别？

你可以把模块想象成一个快递箱：

加 {} 的情况：箱子是透明的，里面有好几个东西（比如 fn1, fn2）。你要拿 fn1，就必须伸手进去指名道姓地拿：import { fn1 }。
不加 {} 的情况：箱子是不透明的，里面只有一个东西（default）。你直接把整个箱子抱走就行，不需要指名道姓，所以不加 {}。

所以，如果你发现不加 {} 会报错，那通常是因为那个函数在源文件里是用 export function 定义的，这时候你就必须给它加上 {}。