推荐的 IDE 配置是 [Visual Studio Code](https://code.visualstudio.com/) + [Vue - Official 扩展](https://marketplace.visualstudio.com/items?itemName=Vue.volar)。

**Vue - Official 插件**
* 在使用函数自动从 vue 中引入（import）

# 创建项目

## create-vue 创建

```shell
npm create vue@latest
```
这一指令将会安装并执行 [create-vue](https://github.com/vuejs/create-vue)，它是 Vue 官方的项目脚手架工具。你将会看到一些诸如 TypeScript 和测试支持之类的可选功能提示：

```shell
✔ Project name: … <your-project-name>
✔ Add TypeScript? … No / Yes
✔ Add JSX Support? … No / Yes
✔ Add Vue Router for Single Page Application development? … No / Yes
✔ Add Pinia for state management? … No / Yes
✔ Add Vitest for Unit testing? … No / Yes
✔ Add an End-to-End Testing Solution? … No / Cypress / Nightwatch / Playwright
✔ Add ESLint for code quality? … No / Yes
✔ Add Prettier for code formatting? … No / Yes
✔ Add Vue DevTools 7 extension for debugging? (experimental) … No / Yes

Scaffolding project in ./<your-project-name>...
Done.
```
如果不确定是否要开启某个功能，你可以直接按下回车键选择 `No`。
在项目被创建后，通过以下步骤安装依赖并启动开发服务器：
```shell
cd <your-project-name>
npm install
npm run dev
```

当你准备将应用发布到生产环境时，请运行：
```shell
npm run build
```
此命令会在 `./dist` 文件夹中为你的应用创建一个生产环境的构建版本。

# Vite 

[Vite](https://cn.vitejs.dev/) 是一个轻量级的、速度极快的构建工具
```shell
npm create vue@latest
```

这个命令会安装和执行 [create-vue](https://github.com/vuejs/create-vue)，它是 Vue 提供的官方脚手架工具。跟随命令行的提示继续操作即可。

# 关于 Vue CLI

[Vue CLI](https://cli.vuejs.org/zh/) 是官方提供的基于 Webpack 的 Vue 工具链，它现在处于维护模式。我们建议使用 Vite 开始新的项目，除非你依赖特定的 Webpack 的特性。在大多数情况下，Vite 将提供更优秀的开发体验。

```shell
# 全局安装 vue cli
npm install -g @vue/cli
# 创建项目
vue create vue-demo
# 进入项目
cd vue-demo
# 运行项目
npm run serve
```

# 入门



创建vue实列
 
createApp(App).mount('#app')

createApp(App) 相当于 vue2 的 new Vue()


## 1、reactive shallowreactive

reactive 声明对象为响应式数据的函数，监听对象所有层次的属性
shallowreactive 相比与reative，只监听对象的根属性

```js
const mydata = reactive({
  name: '张三',
  age: 18,
  hobby: ['抽烟', '喝酒']
});

const mydata = shallowReactive({
  name: '张三',
  age: 18,
  hobby: ['抽烟', '喝酒']
});

function change() {
  mydata.hobby.push('烫头')
}
```


## 2、ref

ref 基础数据为响应式数据
```js
const mydata = ref(0);
function change() {
  mydata.value ++;
}
```


## 3、readonly shallowReadonly

readonly 声明只读数据的函数，对象中所有层次的属性都是只读
shallowReadonly 相对于shallowReadonly，对象中只有根属性是只读，其他属性允许修改

```js
const mydata = readonly({
  name: '张三',
  age: 18,
  hobby: ['抽烟', '喝酒']
});

const mydata = shallowReadonly({
  name: '张三',
  age: 18,
  hobby: ['抽烟', '喝酒']
});

function change() {
  mydata.hobby.push('烫头')
}
```

## 4、computed 

响应式数据变化了，computed 函数第一次调用时才执行函数内部逻辑，其他时候使用缓存
```js
const mydata = ref('这是一段标题');
const getLen = computed(() => {
  console.log("计算长度")
  return mydata.value.length;
});

function change() {
  mydata.value = mydata.value + "!";
}
```


## 5、watch 侦听器

监听响应式数据

```js
const count = ref(0);
function change() {
	count.value++;
}
// 监听基本数据的响应式数据
watch(count, (newValue, oldValue) => {
	console.log(newValue, oldValue);
})

const mydata = reactive({
	name: '张三',
	age: 18,
	hobby: ['抽烟', '喝酒']
})
function change() {
	mydata.age ++;
}
// 这种情况是不被允许的
watch(mydata.age, (newValue, oldValue) => {
	console.log(newValue, oldValue);
});
// 监听响应式数据对象内部属性
watch(() => mydata.age, (newValue, oldValue) => {
	console.log(newValue, oldValue);
})
```


## 6、watchEffect 
侦听多个响应式数据

```js
const count = ref(0);
const mydata = reactive({
	name: '张三',
	age: 18,
	hobby: ['抽烟', '喝酒']
});

function change() {
  count.value ++;
}
function change2() {
  mydata.age ++;
}
watchEffect(() => {
	console.log('count的值：' + count.value + '， age的值：' + mydata.age);
});
```


# 关于 vue devtools 

Vue Devtools 是 Vue 官方发布的调试[浏览器插件](https://so.csdn.net/so/search?q=%E6%B5%8F%E8%A7%88%E5%99%A8%E6%8F%92%E4%BB%B6&spm=1001.2101.3001.7020)，可以安装在 Chrome 和 Firefox 等浏览器上，直接内嵌在开发者工具中，使用体验流畅。Vue Devtools 由 Vue.js 核心团队成员 Guillaume Chau 和 Evan You 开发。

应用商店 [Installation | Vue Devtools (vuejs.org)](https://devtools.vuejs.org/guide/installation.html)