小白篇 -- Vue3 文档初探

• 这个基于官方文档的基础板块的内容，进行了增删，以达到我们能够快速入门的 Vue 的的使用；
• 高级用法以及更新更全的资料请参考 官方文档；
• 再结合我们日常使用的 React 进行一个比较加深我们的印象。

开始

简介

选项式 API 以“组件实例”的概念为中心 (即上述例子中的 this)，对于有面向对象语言背景的用户来说，这通常与基于类的心智模型更为一致。同时，它将响应性相关的细节抽象出来，并强制按照选项来组织代码，从而对初学者而言更为友好。

组合式 API 的核心思想是直接在函数作用域内定义响应式状态变量，并将从多个函数中得到的状态组合起来处理复杂问题。这种形式更加自由，也需要你对 Vue 的响应式系统有更深的理解才能高效使用。相应的，它的灵活性也使得组织和重用逻辑的模式变得更加强大。

快速上手

• create-vue（vite）

npm init vue@latest

• Visual Studio Code + Volar 扩展

基础

创建一个应用

……

模版语法

<template>
	<span>Message: {{ msg }}</span>

	<a v-bind:[attributeName]="url"> ... </a>
	<a :[attributeName]="url"> ... </a>

	<a v-on:[eventName]="doSomething"> ... </a>
	<a @[eventName]="doSomething"> ... </a>
</template>

有点类似 React 的 <React.Fragment></React.Fragment>

响应式基础

• ref() -- 声明简单数据类型
• reactive() -- 声明复杂数据类型

计算属性

computed(()=>())

有点类似 React 的 useMemo ；

类与样式绑定

• class --（自带 classnames 功能）
• style -- 正常使用

条件渲染

// 指令
v-if
v-else-if
v-else

👆 销毁和重建

// 指令
v-show

👆 display

列表渲染

// 数组
<li v-for="(item, index) in items"> {{ item.message }} </li>
<li v-for="(item, index) of items"> {{ item.message }} </li>

// 对象
<li v-for="(value, key, index) in myObject"> {{ key }}: {{ value }} </li>

事件处理

<button @click="count++">Add 1</button>
<button @click="greet">Greet</button>
<button @click="say('hello')">Say hello</button>

• 修饰符
  • ……

表单输入绑定

v-model

简化 react 的 onChange 、value 操作；

• 修饰符
  • ……

生命周期

• onMounted -- 组件完成初始渲染并创建 DOM 节点之后
• onUpdated -- 组件因为响应式状态变更而更新其 DOM 树之后
• onUnmounted -- 组件实例被卸载之后
• ……

侦听器

// 可以直接侦听一个 ref
watch(question, (newQuestion, oldQuestion) => {
   // ……
})

// getter 函数
watch(() => x.value + y.value, (sum) => {
   console.log(`sum of x + y is: ${sum}`)
})
watch(() => obj.count, (newCount) => {
   console.log(`count is: ${count}`)
})

// 多个来源组成的数组
watch([x, () => y.value], ([newX, newY]) => {
   console.log(`x is ${newX} and y is ${newY}`)
})

• 选项
  • deep
  • immediate
  • flush
• watchEffect()
  • watchPostEffect
• 停止侦听器
  • const unwatch = watchEffect(() => {})

模版引用

• ref

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

// 声明一个 ref 来存放该元素的引用
// 必须和模板里的 ref 同名
const input = ref(null) 

onMounted(() => {
  input.value.focus()
})
</script>

<template>
  <input ref="input" />
</template>

有点类似 React 的 useRef ；

组件基础

• 单文件组件（文件名建议大驼峰）
• props
  • const props = defineProps(['title'])
• 监听事件
  • $emit
  • defineEmits(['enlarge-text'])
• 通过插槽来分配内容
  • <slot />
  • <slot name="header"></slot> <template v-slot:header></template>

深入组件

……

逻辑复用

……

内置组件

……

应用规模化

……

最佳实践

……

TypeScript

……

进阶主题

……

其他

API

cn.vuejs.org/api

比较

component-party.dev/

Demo

github.com/hbwow/demo-…

github.com/hbwow/demo-…