本文基于一个3年React开发经验的前端想要几天内快速上手Vue的一些学习笔记与思路, 希望这些能帮到其他有需要的朋友

为了快速了解Vue的一些语法以及各种使用, 我们这边直接通过npm create vue来创建一个Vue项目, 然后从目录结构包括代码解析对于Vue作一个全局的了解

从图片中我们可以看到, 这是一个简单的Vue项目的基本架构, 那么我们可以从项目的入口文件开始解读, 从而清晰的查看Vue的整个脉络结构

在入口文件中, 我们可以看到如上的代码, 我们抛开基本的import引入, 逐条去理解下面的三条代码

const app = createApp(App)
- App其实就是一个Vue组件, 被作为参数传入了createApp方法中
- createApp 创建一个应用实例, 第一个参数是根组件, 第二个参数可以选, 是传给根组件的props
- 综合上面的解释可以理解, 这句代码的意思就是以App这个组件为根元素, 创建一个Vue应用的实例
app.use(router)
- 我们首先看use方法, 他的作用是安装一个插件, 第一个参数是插件本身, 第二个可选参数是传递给插件的选项
- 那么其实这边的作用就是在Vue的应用实例上安装一个router插件, router顾名思义也就是Vue的路由, 等于说我们针对于路由相关的配置可以去router文件夹里面查看
app.mount('#app')
- 显而易见这边#app是一个类名, 那么我们在全局搜索一下, 其实是可以看到在index.html文件中其实是有一个id为app的div标签
- app.mount作用是将应用实例挂载在容器元素中, 对于每个应用实例mount只能调用一次

了解问Vue的一些基础挂载之后, 我们可以直接从组件中了解关于Vue组件的语法, 这边会直接照着文档在Vue组件中进行编写解释

我们首先了解一下一个vue组件的基本构成(删除了部分CSS代码)

这边可以看到一个Vue组件是由三个部分组成的, script, template, style

这里有三个需要解释的点

script setup 属性:
- 官方的解释是: 在单位件组件中使用组合式api的编译时语法糖, 我们可以直接去看一下他的功能或者和普通script的区别
- 正常的script标签只会在组件被首次引入时执行一次, setup会在每次组件实例被创建时执行
- 在其中声明的顶层绑定可以直接在模版中使用, 这里其实可以看一下模版语法的概念, 如下代码所示, 这边的模版语法其实就包括{{msg}} , 这个其实也是Vue中数据绑定相关的概念 , 除了文本的绑定, 还有类似于Attribute属性等的绑定, 后面会详细讲到, 包括代码内容内的@click是属于事件监听的语法糖, 下文会统一去讲述
- 可以引入组件
- 其他的方法更多涉及到详细的API, 这边就不作详细解释了, 总而言之加了setup其实就类似于从一个简单的html script标签转化成了Vue组件化使用的script标签, 可以于Vue template中的内容实现引用, 在官方文档的解释中也会有更好的性能

vue 复制代码

<script setup>
// 变量
const msg = 'Hello!'

// 函数
function log() {
  console.log(msg)
}
</script>

<template>
  <button @click="log">{{ msg }}</button>
</template>

style scoped 属性: 当带有scoped时, css只影响当前元素, 可以理解为样式隔离
template: 内置的特殊元素, 可以理解为react中的<></>, 在DOM中不渲染元素, 并且可以在上面添加v-if进行展示与否的判断

语法详解篇

模版语法

那么假设我们已经是一个有开发经验的打工人, 其实不需要对这一块做太多的基础性解释, 我们只要继续去看Vue的语法上有哪些内容可以实现哪些功能, 避免在使用时通过一些复杂手段实现一些已有的api能力, 在学习这些语法后我们再去通过Vue的一些原理或者和其他框架的区别来进行深入了解. 我们这边先总结下语法部分, 这边会根据文档顺序用简单的代码实例和截图来总结

文本插值, 也就是数据绑定, msg可以理解为一个script里面申明的变量

css 复制代码

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

通过 v-html 进行html的原始插入(包括样式应用), 可以对标与react中的dangerousHtml(忘了是不是这么拼写)

xml 复制代码

<p>Using v-html directive: <span v-html="rawHtml"></span></p>

Attribute绑定: v-bind(:) 用于标签属性的动态绑定, 可通过对象形式绑定多个值

bash 复制代码

<div v-bind:id="dynamicId"></div>
const objectOfAttrs = {
  id: 'container',
  class: 'wrapper'
}
<div v-bind="objectOfAttrs"></div>

js表达式, 可以放表达式, 调用函数, 但不能使用语句声明比如变量定义

ruby 复制代码

{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}
<div :id="`list-${id}`"></div>

动态参数: 使用[]包裹

xml 复制代码

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

指令与修饰符, 以v-开头的是vue的内置指令, 例如v-bind ,修饰符是跟在指令后面的 . 调用方法, 类似于.prevent调用event.preventDefault()

ini 复制代码

<form @submit.prevent="onSubmit">...</form>

vue 复制代码

常见指令:
v-text:
<span v-text="msg"></span>
<!-- 等同于 -->
<span>{{msg}}</span>

v-html: 内容作为普通html插入

v-show: 通过display属性来控制元素显示隐藏

v-if / v-else / v-else-if: 条件性渲染元素或代码片段

v-for: for循环类似效果

v-on(@): 事件监听绑定

v-bind(:): 绑定attribute, 绑定props等

v-model: 在表单项上创建双向绑定

v-memo: 传入依赖缓存模版子树, 如果数组中的值结果相同则跳过渲染, 类似于React useMemo

v-cloak: 隐藏未完成编译的dom模版

在Vue的使用过程中, 会根据风格区分为两种不同的写法: 组合式API, 选项式API, 后续内容以选项式API进行

响应式状态

ref()

通过ref()函数来声明状态, ref接收参数, 并将其包裹在带有.value属性的ref对象中返回.

vue 复制代码

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

模版中使用ref时不需要使用.value访问, 会有自动解包过程

<script setup>中的顶层导入, 声明的变量可以在同一组件的模版中直接使用, 如果不使用<script setup> 需要在组件中通过setup钩子函数声明并返回才能正常在模版中使用

为什么要使用ref而不是普通变量: Vue会自动检测ref值的改变并更新dom, 触发组件的重渲染 -> Dom的更新时机: 修改了响应状态时Dom会被自动更新, 但更新不是同步的, Vue会在next tick更新周期中缓存所有状态的修改, 所以每个组件即便有多次状态修改也只会更新一次

有点类似于react的数据驱动视图, 数据改变引发视图重渲染

ref的解包细节

reactive()

声明响应式的方式, ref将值包裹在特殊对象中, reactive()本身可以让对象具有响应式

只能传递对象, 数组等集合类型, 不能传递基本类型
不能替换整个对象, 需要保持对响应式对象的相同引用
解构对象时丢失响应式

这里个人觉得可以这样理解, ref是根据传入的值生成一个ref类型的响应式变量, reactive是将传入的对象变为响应式对象, 官方的话会更推荐使用ref

js 复制代码

import { reactive } from 'vue'

const state = reactive({ count: 0 })

template 复制代码

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

计算属性

如果在模版中书写过多逻辑, 会让模版变得臃肿难以维护, 所以使用计算属性来描述响应式状态的复杂逻辑

vue 复制代码

const author = reactive({
  name: 'John Doe',
  books: [
    'Vue 2 - Advanced Guide',
    'Vue 3 - Basic Guide',
    'Vue 4 - The Mystery'
  ]
})

// 一个计算属性 ref
const publishedBooksMessage = computed(() => {
  return author.books.length > 0 ? 'Yes' : 'No'
})

computed 方法期望接收一个getter函数, 返回一个计算属性ref, 他会自动追踪响应式依赖, 当计算属性的依赖的属性改变时, 依赖于该计算属性的绑定也会同步更新. 区别于正常方法, 计算属性会被缓存, 也就是依赖更新时才会被重新计算

类于样式绑定

动态切换class

vue 复制代码

<div :class="{ active: isActive }"></div>



const activeClass = ref('active')
const errorClass = ref('text-danger')

<div :class="[activeClass, errorClass]"></div>

动态style

vue 复制代码

<div :style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>

React开发快速上手Vue

语法详解篇

模版语法

响应式状态

ref()

reactive()

计算属性

类于样式绑定

生命周期