Vue学习记录

一、胡说八道

Vue现有Vue 2.x版本和Vue 3.x两个大的版本。

Vue 2.x
其中 Vue 2.7 版本是Vue 2 最新的次级版本也是最后一个次级版本，这意味着 Vue 2 的终止支持时间将会在 2023 年 12 月 31 日后，且不再提供新特性。从Vue3中移植回了最重要的一些特性，使得 Vue 2 也能享有这些便利，例如：

• 组合式 API 单文件组件内的 <script setup>
• 单文件组件内的 CSS v-bind defineComponent()
• 以改善类型推断 (较之于 Vue.extend)

此外我们还支持了以下 API：

• defineComponent() 以改善类型推断 (较之于 Vue.extend)
• h()、useSlot()、useAttrs()、useCssModules()
• set()、del() 和 nextTick() 也在 ESM 构建版本中被导出为具名
• API 支持 emits选项，但仅以类型检查为目的 (并不会影响运行时的行为)

Vue 3
其中Vue 3.7.1版本是Vue 3 当前的默认主版本，每隔一段时间就会不断的迭代升级，推出更高的版本号

了解一下API 风格，要不然新手学习以及写代码都会感觉混乱

Vue 的组件可以按两种不同的风格书写：选项式 API 和组合式 API

• 选项式 API （Options API）
• 组合式 API（Composition API）

1、选项式 API个人认为就是data()、methods、computed、watch 的组合

<script>
export default {
    data(){
        return{

        }
    },
    methods:{

    },
    watch:{

    },
    computed:{

    }
}
</script>

二、搭建环境

1.安装nodejs

1. 安装nodejs

在nodejs官网下载安装包，去安装。

使用如下命令，查看node和npm的版本号，如果正常打印出来则表示安装成功

node -v

npm -v

2.安装cnpm

如果安装依赖包卡顿、进度长时间不动，建议使用cnpm安装

cnpm网址https://npmmirror.com/

使用npm安装cnpm

npm install -g cnpm --registry=https://registry.npmmirror.com

3.安装工具链(项目脚手架）

• Vite
• Vue CLI

3.1. Vite

兼容性注意
Vite 需要 Node.js 版本 >= 16.0.0。

使用vite创建项目：

npm create vite@latest

使用这个命令创建的项目会比vite创建的项目配置多

npm init vue@latest

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

vite是一种新型前端构建工具.

它主要由两部分组成：

• 一个开发服务器，它基于 原生 ES 模块 提供了 丰富的内建功能，如速度快到惊人的 模块热更新（HMR）。
• 一套构建指令，它使用 Rollup 打包你的代码，并且它是预配置的，可输出用于生产环境的高度优化过的静态资源。

3.2. Vue CLI

使用Vue CLI创建项目：

npm install -g @vue/cli
vue create demo

使用图形化界面创建项目

vue ui

使用vue add命令来安装插件

vue add eslint

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

注意写法
vue2.x 安装使用vue-cli
vue3.x 安装使用vue/cli

vue2 的写法

npm install -g @vue-cli

vue3 的写法

npm install -g @vue/cli

---

准备用一个月的时间学习Vue，每天把学习的要点记录下来

---

四、学习目标：

• 应用实例、渲染、渲染函数
• 注册组件、组件实例、组件基础
• 模板语法
• 指令、事件修饰符
• 事件处理
• Data
• 生命周期、钩子(slot)
• Setup(props,Context)
• 单文件组件-SFC
• 路由（ vue-router 库、Page.js、 Director）
• 状态（ Flux、Vuex、Pinia）
• 服务端渲染（Nuxt.js、Vite ）

---

4.1应用实例

每个应用都是通过createApp()实例创建的

const app = Vue.CreateApp({})

---

4.2组件 --components

注册组件

创建应用
const app = Vue.createApp({})
全局注册组件（注册搜索框组件）
app.component('SearchInput', SearchInputComponent)

---

4.3指令

指令	缩写	描述	注解
v-html		更新元素的 innerHTML
v-text		更新元素的文本内容
v-bind	:	动态的绑定一个或多个 attribute，也可以是组件的 prop
v-on	@	给元素绑定事件监听器
v-if		基于表达式值的真假性，来条件性地渲染元素或者模板片段
v-else		表示 v-if 的“else if 块”。可以进行链式调用	上一个兄弟元素必须有 v-if 或 v-else-if
v-else-if		表示 v-if 或 v-if / v-else-if 链式调用的“else 块”	上一个兄弟元素必须有 v-if 或 v-else-if
v-show		基于表达式值的真假性，来改变元素的可见性
v-for		基于原始数据多次渲染元素或模板块
v-model		在表单输入元素或组件上创建双向绑定	仅限input、select、textarea、components
v-slot	#	用于声明具名插槽或是期望接收 props 的作用域插槽
v-cloak		用于隐藏尚未完成编译的 DOM 模板
v-pre		跳过该元素及其所有子元素的编译
v-memo		期望的绑定值类型：any[]
v-once		仅渲染元素和组件一次，并跳过之后的更新

除了以上指令，还有特殊的attribute:

• key
• ref
• is

key 一般配合v-for使用
ref string | Function ；被用来给元素或子组件注册引用信息，$refs
is 动态模板

v-on 指令

缩写 @

< div id="app" v-on:click="myClick"></div>
可以写成
< div id="app"  @click="myClick"></div>

v-bind 指令

缩写 : 或者 .(当使用 .prop 修饰符时)

<img v-bind:src="imageSrc" />
可以写成
<img :src="imageSrc" />

4.4单文件组件-SFC

单文件组件 (也被称为 *.vue 文件，英文 Single-File Components，缩写为 SFC)，单文件组件模板。

<script setup>
import { ref } from 'vue'
const count = ref(0)
</script>

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

<style scoped>
button {
  font-weight: bold;
}
</style>

单文件<script setup>	描述
defineProps() 和 defineEmits()
defineExpose()
defineOptions()
defineSlots()
useSlots() 和 useAttrs()

五、API

5.1、全局API

应用实例

名称	描述
createApp()	创建一个应用实例
createSSRApp()	以 SSR 激活模式创建一个应用实例。用法与 createApp() 完全相同
app.mount()	将应用实例挂载在一个容器元素中
app.unmount()	卸载一个已挂载的应用实例
app.component()	如果同时传递一个组件名字符串及其定义，则注册一个全局组件；如果只传递一个名字，则会返回用该名字注册的组件 (如果存在的话)
app.directive()	如果同时传递一个名字和一个指令定义，则注册一个全局指令；如果只传递一个名字，则会返回用该名字注册的指令 (如果存在的话)
app.use()	安装一个插件
app.mixin()	应用一个全局 mixin (适用于该应用的范围)。一个全局的 mixin 会作用于应用中的每个组件实例
app.provide()	提供一个值，可以在应用中的所有后代组件中注入使用
app.runWithContext()	使用当前应用作为注入上下文执行回调函数
app.version	提供当前应用所使用的 Vue 版本号
app.config	每个应用实例都会暴露一个 config 对象，其中包含了对这个应用的配置设定。你可以在挂载应用前更改这些属性 (下面列举了每个属性的对应文档)。
app.config.errorHandler	用于为应用内抛出的未捕获错误指定一个全局处理函数
app.config.warnHandler	用于为 Vue 的运行时警告指定一个自定义处理函数
app.config.performance	设置此项为 true 可以在浏览器开发工具的“性能/时间线”页中启用对组件初始化、编译、渲染和修补的性能表现追踪。仅在开发模式和支持 performance.mark API 的浏览器中工作
app.config.compilerOptions	配置运行时编译器的选项
app.config.globalProperties	一个用于注册能够被应用内所有组件实例访问到的全局属性的对象
app.config.optionMergeStrategies	一个用于定义自定义组件选项的合并策略的对象

通用

• version 暴露当前所使用的 Vue 版本
• nextTick() 等待下一次 DOM 更新刷新的工具方法
• defineComponent() 在定义 Vue 组件时提供类型推导的辅助函数
• defineAsyncComponent() 定义一个异步组件，它在运行时是懒加载的。参数可以是一个异步加载函数，或是对加载行为进行更具体定制的一个选项对象
• defineCustomElement() 这个方法和 defineComponent 接受的参数相同，不同的是会返回一个原生自定义元素类的构造器

5.2、组合式API

响应式: 核心	描述
ref()	接受一个内部值，返回一个响应式的、可更改的 ref 对象，此对象只有一个指向其内部值的属性 .value。
computed()	接受一个 getter 函数，返回一个只读的响应式 ref 对象。该 ref 通过 .value 暴露 getter 函数的返回值。它也可以接受一个带有 get 和 set 函数的对象来创建一个可写的 ref 对象
reactive()	返回一个对象的响应式代理
readonly()	接受一个内部值，返回一个响应式的、可更改的 ref 对象，此对象只有一个指向其内部值的属性 .value。
watchEffect()	立即运行一个函数，同时响应式地追踪其依赖，并在依赖更改时重新执行
watchPostEffect()
watchSyncEffect()
watch()	侦听一个或多个响应式数据源，并在数据源变化时调用所给的回调函数

响应式: 工具	描述
isRef()	检查某个值是否为 ref。
unref()	如果参数是 ref，则返回内部值，否则返回参数本身。这是 val = isRef(val) ? val.value : val 计算的一个语法糖
toRef()	可以将值、refs 或 getters 规范化为 refs
toValue()	将值、refs 或 getters 规范化为值。这与 unref() 类似，不同的是此函数也会规范化 getter 函数。如果参数是一个 getter，它将会被调用并且返回它的返回值
toRefs()	将一个响应式对象转换为一个普通对象，这个普通对象的每个属性都是指向源对象相应属性的 ref。每个单独的 ref 都是使用 toRef() 创建的
isProxy()	检查一个对象是否是由 reactive()、readonly()、shallowReactive() 或 shallowReadonly() 创建的代理
isReactive()	检查一个对象是否是由 reactive() 或 shallowReactive() 创建的代理
isReadonly()	检查传入的值是否为只读对象。只读对象的属性可以更改，但他们不能通过传入的对象直接赋值

响应式: 进阶	描述
shallowRef()
triggerRef()
customRef()
shallowReactive()
shallowReadonly()
toRaw()
markRaw()
effectScope()
getCurrentScope()
onScopeDispose()

生命周期钩子	描述
onMounted()
onUpdated()
onUnmounted()
onBeforeMount()
onBeforeUpdate()
onBeforeUnmount()
onErrorCaptured()
onRenderTracked()
onRenderTriggered()
onActivated()
onDeactivated()
onServerPrefetch()

5.3、选项式API

状态选项	描述
data
props
computed
methods
watch
emits
expose

生命周期选项	描述
beforeCreate
created
beforeMount
mounted
beforeUpdate
updated
beforeUnmount
unmounted
errorCaptured
renderTracked
renderTriggered
activated
deactivated
serverPrefetch

组件实例	描述
$data
$props
$el
$options
$parent
$root
$slots
$refs
$attrs
$watch()
$emit()
$forceUpdate()
$nextTick()

5.4、进阶API

渲染函数	描述
h()
mergeProps()
cloneVNode()
isVNode()
resolveComponent()
resolveDirective()
withDirectives()
withModifiers()

服务端渲染

渲染函数	描述
h()
renderToString()
renderToNodeStream()
pipeToNodeWritable()
renderToWebStream()
pipeToWebWritable()
renderToSimpleStream()
useSSRContext()

TypeScript 工具类型	描述
PropType
MaybeRef
MaybeRefOrGetter
ExtractPropTypes
ExtractPublicPropTypes
ComponentCustomProperties
ComponentCustomOptions
ComponentCustomProps
CSSProperties

六、Vue Router

Vue Router时Vue.js的官方路由

使用npm安装vue router

npm intsall vue-router@4

• router-link
• router-view

TS 接口	描述
HistoryState
NavigationFailure
NavigationGuard
NavigationGuardNext
NavigationGuardWithThis
NavigationHookAfter
RouteLocation
RouteLocationMatched
RouteLocationNormalized
RouteLocationNormalizedLoaded
RouteLocationOptions
RouteMeta
RouteRecordNormalized
Router
RouterHistory
RouterLinkProps
RouterOptions
RouterScrollBehavior
RouterViewProps

vue-router <function>方法
createMemoryHistory
createRouter
createWebHashHistory
createWebHistory
isNavigationFailure
loadRouteLocation
onBeforeRouteLeave
onBeforeRouteUpdate
useLink
useRoute
useRouter

七、Pinia

八、Vuex