推荐的 IDE 配置是 Visual Studio Code + Vue - Official 扩展。

Vue - Official 插件

在使用函数自动从 vue 中引入（import）

创建项目

create-vue 创建

npm create vue@latest

这一指令将会安装并执行 create-vue，它是 Vue 官方的项目脚手架工具。你将会看到一些诸如 TypeScript 和测试支持之类的可选功能提示：

✔ 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。在项目被创建后，通过以下步骤安装依赖并启动开发服务器：

cd <your-project-name>
npm install
npm run dev

当你准备将应用发布到生产环境时，请运行：

npm run build

此命令会在 ./dist 文件夹中为你的应用创建一个生产环境的构建版本。

Vite

Vite 是一个轻量级的、速度极快的构建工具

npm create vue@latest

这个命令会安装和执行 create-vue，它是 Vue 提供的官方脚手架工具。跟随命令行的提示继续操作即可。

关于 Vue CLI

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

# 全局安装 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，只监听对象的根属性

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

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

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

2、ref

ref 基础数据为响应式数据

const mydata = ref(0);
function change() {
  mydata.value ++;
}

3、readonly shallowReadonly

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

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

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

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

4、computed

响应式数据变化了，computed 函数第一次调用时才执行函数内部逻辑，其他时候使用缓存

const mydata = ref('这是一段标题');
const getLen = computed(() => {
  console.log("计算长度")
  return mydata.value.length;
});

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

5、watch 侦听器

监听响应式数据

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

侦听多个响应式数据

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 官方发布的调试浏览器插件，可以安装在 Chrome 和 Firefox 等浏览器上，直接内嵌在开发者工具中，使用体验流畅。Vue Devtools 由 Vue.js 核心团队成员 Guillaume Chau 和 Evan You 开发。

应用商店 Installation | Vue Devtools (vuejs.org)

vue3入门.md 5.1 KB Histórico Raw