简介 | Vue.js (opens new window)

创建 Vue 项目

# node版本要求：20.19.0 || >=22.12.0
npm create vue@latest

目录说明

node_modules         # 项目依赖包（npm install 自动生成，不要手动修改）
public               # 静态资源目录（不会被打包处理，直接复制到最终产物）
src                  # 源代码目录（主要开发代码）

.gitignore           # Git 忽略规则（哪些文件不提交到仓库）
env.d.ts             # 环境变量类型声明（给 TypeScript 提示 import.meta.env 等）；vite已配置好常见的资源文件扩展名，通过此文件引入（vite/client）。

index.html           # 项目入口 HTML（Vite 会以此为入口）
package-lock.json    # 依赖版本锁定文件（保证团队安装一致）
package.json         # 项目配置文件（依赖、脚本、项目信息）

README.md            # 项目说明文档（使用说明、开发指南等）

tsconfig.app.json    # 应用代码的 TypeScript 配置
tsconfig.json        # TypeScript 主配置（基础配置/继承入口）
tsconfig.node.json   # Node 环境的 TS 配置（用于构建工具等）

vite.config.ts       # Vite 构建工具配置（插件、别名、打包规则等）

项目运行逻辑

index.html -> src/main.ts

import './assets/main.css'  // 引入静态资源
  
import { createApp } from 'vue'  // 引入 Vue
import App from './App.vue'  // 引入 App.vue 组件
  
createApp(App).mount('#app') // 将App.vue组件挂载到index.html的#app元素

Vue 根页面 - App.vue

vite 通过 index.html + src/main.ts 引入 src/App.vue 作为 vue 的根页面

vue 页面一共有三个标签：

<script lang="ts">
// js or ts代码；注：ts兼容js，声明ts，但写js也是可以的。
</script>  
  
<template>
<!-- html -->
</template>  
  
<style>
/* 样式 */
</style>

Vue2 过渡 Vue3 语法

Vue2（Options API）风格

<script>
export default {
  // data() 返回的属性将会成为响应式的状态
  // 并且暴露在 `this` 上
  data() {
    return {
      count: 0
    }
  },

  // methods 是一些用来更改状态与触发更新的函数
  // 它们可以在模板中作为事件处理器绑定
  methods: {
    increment() {
      this.count++
    }
  },

  // 生命周期钩子会在组件生命周期的各个不同阶段被调用
  // 例如这个函数就会在组件挂载完成后被调用
  mounted() {
    console.log(`The initial count is ${this.count}.`)
  }
}
</script>

<template>
  <button @click="increment">Count is: {{ count }}</button>
</template>

Vue3（Composition API）风格兼容 Vue2

<script>
export default {
  data() {
    return {
      // count: 0
    }
  },
  methods: {
    // increment() {
    //   this.count++
    // }
  },
  mounted() {
    // console.log(`The initial count is ${this.count}.`)
  },
  setup(){
    let count = 0;
    function increment() {
      count++;
    }
    return {
      count,
      increment
    }
  }
}
</script>

<template>
  <button @click="increment">Count is: {{ count }}</button>
</template>

Vue3（Composition API）风格

组合式 API 通常会与 <script setup> 搭配使用。这个 setup attribute 是一个标识，告诉 Vue 需要在编译时进行一些处理，让我们可以更简洁地使用组合式 API。比如， <script setup> 中的导入和顶层变量 / 函数都能够在模板中直接使用。

<script setup>
import { ref, onMounted } from 'vue'

// 响应式状态
const count = ref(0)

// 用来修改状态、触发更新的函数
function increment() {
  count.value++
}

// 生命周期钩子
onMounted(() => {
  console.log(`The initial count is ${count.value}.`)
})
</script>

<template>
  <button @click="increment">Count is: {{ count }}</button>
</template>

模板语法

模板语法 | Vue.js (opens new window)

响应式数据

响应式基础 | Vue.js (opens new window)

基本、对象类型 - ref ()

需要响应式的数据，使用 ref() 定义；

import { ref } from 'vue'

const count = ref(0)

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

count.value++
console.log(count.value) // 1

• 模板读值时 { count } ，无需 count.value ；
• 方法改值时需要 count.value++ ；

Note

在响应对象类型时，本质是还是调用的 reactive ()

对象类型 - reactive ()

Tip

只能定义对象类型

import { reactive } from 'vue'

const state = reactive({ count: 0 })

state.count++

// 结构赋值
let person = reactive({
	name: "zhangsan",
	age: 18,
})

// toRefs
let {name,age} = toRefs(person)
name = "lisi"
// toRef
let name = toRef(person,'name')

模板使用：

<button @click="state.count++">
  {{ state.count }}
</button>

计算属性

计算属性 | Vue.js (opens new window)

<script setup>
import { ref, computed } from 'vue'

const firstName = ref('John')
const lastName = ref('Doe')

const fullName = computed({
  // getter
  get() {
    return firstName.value + ' ' + lastName.value
  },
  // setter
  set(newValue) {
    // 注意：我们这里使用的是解构赋值语法
    [firstName.value, lastName.value] = newValue.split(' ')
  }
})
</script>

侦听器

侦听器 | Vue.js (opens new window) 监视数据的变化，只支持以下 4 种数据：

1. ref 定义的数据
2. reactive 定义的数据
3. 函数返回一个值（ getter 函数）
4. 一个包含上述内容的数组

监视 ref

// 可以直接侦听一个 ref
watch(question, async (newQuestion, oldQuestion) => {
  if (newQuestion.includes('?')) {
    loading.value = true
    answer.value = 'Thinking...'
    try {
      const res = await fetch('https://yesno.wtf/api')
      answer.value = (await res.json()).answer
    } catch (error) {
      answer.value = 'Error! Could not reach the API. ' + error
    } finally {
      loading.value = false
    }
  }
})

生命周期