Vue3基础入门

官方文档

简介 | Vue.jshttps://cn.vuejs.org/guide/introduction.html

Vue3的进步

打包大小更小，渲染速度更快，内存占用更小

Proxy代替defineProperty实现响应式

重写虚拟 DOM 的实现和 Tree-Shaking ，并且支持TypeScript

拥有新的特性：组合式API -- Composition API；新的内置组件等等

Vue3的创建

这里建议使用脚手架形式，使Vue形成一个项目结构

创建Vue之前首先要看你是否下载了Node.js，这是必须要做的

Node.js --- 在任何地方运行 JavaScript

没有下载的点击链接进行获取

正式创建：

创建一个文件夹，自定义命名然后在此文件下cmd进入命令行，输入命令npm create vue@latest

确认y，然后会让你输入一个该项目的名称 ，自定义命名，这里推荐使用TS语法

初学者方面建议选择这几个

实验特性不用管，直接确认不用选择

初学者不要跳过示例代码：这里选NO

初始化完成了

npm install：更新一下依赖（注意，当你是新创建一个项目时一定要做这一步）

然后启动项目：npm run format、npm run dev

启动完成，去浏览器访问http://localhost:5173/就可以看到初始页面了，如下：

我这里使用的是PyCharm启动的项目 ，如果是使用VsCode学习的记得安装推荐的插件

二、Vue的使用

Vue3 向下兼容 Vue2 语法，且 Vue3 中的模板中可以没有根标签
这里是一个简单的vue效果

python 复制代码

<template>
  <div class="person">
    <h2>姓名：{{ name }}</h2>
    <h2>年龄：{{ age }}</h2>
    <button @click="changeName">修改名字</button>
    <button @click="changeAge">年龄+1</button>
    <button @click="showTel">点我查看联系方式</button>
  </div>
</template>

<script lang="ts">
export default {
  name: 'App',
  data() {
    return {
      name: '张三',
      age: 18,
      tel: '13888888888'
    }
  },
  methods: {
    changeName() {
      this.name = 'zhang-san'
    },
    changeAge() {
      this.age += 1
    },
    showTel() {
      alert(this.tel)
    }
  }
}
</script>

<style scoped>

</style>

效果如下：

三、Vue3核心语法

OptionsAPI 与 CompositionAPI

Vue2 的 API 设计是 Options （配置）风格的

Vue3 的 API 设计是 Composition （组合）风格的

Options API 的弊端

Options 类型的 API ，数据、方法、计算属性等，是分散在： data 、 methods 、 computed 中的

若想新增或者修改一个需求，就需要分别修改： data 、 methods 、 computed ，不便于维护和复用

Composition API 的优势

可以用函数的方式，更加优雅的组织代码，让相关功能的代码更加有序的组织在一起

Vue 组件三大核心部分

<template>

写页面结构（HTML）

必须有唯一根标签（最外层只能一个 div）

用 {``{ 变量 }} 展示数据

<script>

写逻辑代码

定义数据（data）

写方法（methods）

处理业务逻辑

<style>

写样式（CSS）

加 scoped 表示样式只作用于当前组件（不会污染全局）

一个单组件Vue文件都是由这三部分组成

setup

setup概述

setup 是 Vue3 中一个新的配置项，值是一个函数，它是 Composition API "表演的舞台"**，组件中所用到的：数据、方法、计算属性、监视等等，均配置在 setup 中

特点：

setup 函数返回的对象中的内容，可直接在模板中使用

setup 中访问 this 是 undefined，所以Vue一般要**"去this化"**

setup 函数会在 beforeCreate 之前调用，它是 " 领先 " 所有钩子执行的

返回：

若返回一个对象：则对象中的：属性、方法等，在模板中均可以直接使用**（重点关注）。**

若返回一个函数：则可以自定义渲染内容，代码如下：
python 复制代码
setup(){
return ()=> '你好啊！'
}

setup与Options API****的关系

Vue2 的配置（ data 、 methos ...... ）中 可以访问到 setup 中的属性、方法

但在 setup 中 不能访问到 Vue2 的配置（ data 、 methos ...... ）

如果与 Vue2 冲突，则 setup 优先

（了解即可）

setup****语法糖（重点）

setup语法糖，可以让我们把setup 独立出去

可是平时的代码还需要编写一个不写 setup 的 script 标签，去指定组件名字，比较麻烦，我们可以借助 vite 中的插件简化

终端输入：

第一步： npm i vite-plugin-vue-setup-extend -D

第二步：vite.config.ts
python 复制代码
import { defineConfig } from 'vite'
import VueSetupExtend from 'vite-plugin-vue-setup-extend'

export default defineConfig({
    plugins: [ VueSetupExtend() ]
})
这样就可以直接使用了
python 复制代码
<script setup lang="ts">
可以看到setup可以直接在script上使用了，不需要再写一个标签

ref创建

基本类型的响应式数据

作用： 定义响应式变量

语法： let xxx = ref( 初始值 )

返回值： 一个 RefImpl 的实例对象，简称 ref对象或 ref ， ref 对象的 value 属性是响应式的

注意点：

JS 中操作数据需要： xxx.value ，但模板中不需要****.value ，直接使用即可

对于 let name = ref('张三') 来说， name 不是响应式的， name.value 是响应式的
python 复制代码
<template>
  <div class="person">
    <h2>姓名：{{ name }}</h2>
    <h2>年龄：{{ age }}</h2>
    <button @click="changeName">修改名字</button>
    <button @click="changeAge">年龄+1</button>
    <button @click="showTel">点我查看联系方式</button>
  </div>
</template>

<script setup lang="ts" name="Person">
import { ref } from 'vue'

let name = ref('张三')
let age = ref(18)
let tel = '13888888888'

let changeName = () => {
  name.value = '李四'
  console.log(name.value)
}

let changeAge = () => {
  age.value += 1
  console.log(age.value)
}

let showTel = () => {
  alert(tel)
}
</script>

<style scoped>
</style>
主要看script部分
python 复制代码
<script setup lang="ts" name="Person">
import { ref } from 'vue'

let name = ref('张三')
let age = ref(18)
let tel = '13888888888'

let changeName = () => {
  name.value = '李四'
  console.log(name.value)
}

let changeAge = () => {
  age.value += 1
  console.log(age.value)
}

let showTel = () => {
  alert(tel)
}
</script>
可以看到ref 将 name、age 转为响应式对象，JS 中必须用**.value**操作数据，模板中可直接使用。

三个方法分别实现：修改名字、年龄+1、弹出电话

响应式数据修改后页面自动更新。

vue中的常用方法使用的是**箭头函数（类型函数名 = （）=>{}）；**少用function，当然匿名函数和普通函数都是可以用的，只是箭头函数用的多

效果如下：

修改名字并年龄加2，查看联系方式

后面的代码就不用完整代码了，只解释重要部分

对象类型的响应式数据

ref 接收的数据可以是： 基本类型 、 对象类型

若 ref 接收的是对象类型，内部其实也是调用了 reactive 函数
python 复制代码
let car = ref({ brand: '奔驰', price: 100 })
let games = ref([
    { id: 'ahsgdyfa01', name: '英雄联盟' },
    { id: 'ahsgdyfa02', name: '王者荣耀' },
    { id: 'ahsgdyfa03', name: '原神' }
])
虽然外面看不出来但是内部调用了reactive函数

标签中的ref属性

作用：用于注册模板引用

用在普通 DOM 标签上，获取的是 DOM 节点
python 复制代码
<template>
<div class="person">
<h1 ref="title1">节点飞思</h1>
<h2 ref="title2">前端</h2>
<h3 ref="title3">Vue</h3>
<input type="text" ref="inpt"> <br><br>
<button @click="showLog">点我打印内容</button>
</div>
</template>
可以看到标题标签上已经有了ref属性
python 复制代码
<script lang="ts" setup name="Person">
import {ref} from 'vue'
let title1 = ref()
let title2 = ref()
let title3 = ref()
function showLog(){
    // 通过id获取元素
    const t1 = document.getElementById('title1')

    // 打印内容    
    console.log((t1 as HTMLElement).innerText)
    console.log((<HTMLElement>t1).innerText)
    console.log(t1?.innerText)

    // 通过ref获取元素
    console.log(title1.value)
    console.log(title2.value)
    console.log(title3.value)
}
</script>
这边就进行获取和打印

用在组件标签上，获取的是组件实例对象
python 复制代码
<template>
    <Person ref="ren"/>
    <button @click="test">测试</button>
</template>
python 复制代码
<Person ref="ren"/>
这就是用在组件标签中
python 复制代码
let ren = ref()
function test(){
    let name = ref('张三')
    let age = ref(18)
    defineExpose({name,age})
    console.log(ren.value.name)
    console.log(ren.value.age)
}
进行实例化然后得到值（注意这里不是完整代码）

reactive创建

对象类型的响应式数据

作用： 定义一个 响应式对象 （基本类型不要用它，要用 ref ，否则报错）

语法： let 响应式对象 = reactive( 源对象 )

返回值： 一个 Proxy 的实例对象，简称：响应式对象

注意点： reactive 定义的响应式数据是 " 深层次 " 的
python 复制代码
let car = reactive({ 
  brand: '奔驰', 
  price: 100 
})

// 响应式游戏数组
let games = reactive([
  { id: 'ahsgdyfa01', name: '英雄联盟' },
  { id: 'ahsgdyfa02', name: '王者荣耀' },
  { id: 'ahsgdyfa03', name: '原神' }
])

// 深度嵌套的响应式对象
let obj = reactive({
  a: {
    b: {
      c: {
        d: 666
      }
    }
  }
})
一个是普通对象的响应式

一个是数组的响应式

一个是多层嵌套对象的响应式

ref对比reactive

ref 用来定义： 基本类型数据 、 对象类型数据

reactive 用来定义： 对象类型数据

区别：

ref 创建的变量必须使用****.value

reactive 重新分配一个新对象，会失去 响应式

使用场景：

若需要一个基本类型的响应式数据，必须使用 ref

若需要一个响应式对象，层级不深， ref 、 reactive 都可以

若需要一个响应式对象，且层级较深，推荐使用 reactive

toRefs和toRef

作用：将一个响应式对象中的每一个属性，转换为****ref 对象

区别： toRefs 与 toRef 功能一致，但 toRefs 可以批量转换
python 复制代码
let person = reactive({name:'张三', age:18, gender:'男'})


// 通过toRefs将person对象中的n个属性批量取出，且依然保持响应式的能力
let {name,gender} = toRefs(person)


// 通过toRef将person对象中的gender属性取出，且依然保持响应式的能力
let age = toRef(person,'age')
就是这样用的

碍于观感问题，剩下的核心语法在下篇博客补齐。

如有想看到的语法在这篇没看到，可以自己再去搜或者移步我的下一篇

一、Vue3概述

官方文档

Vue3的进步

Vue3的创建

二、Vue的使用

三、Vue3核心语法

OptionsAPI 与 CompositionAPI

Vue 组件三大核心部分

setup

setup概述

setup与Options API的关系

setup语法糖（重点）

ref创建

基本类型的响应式数据

对象类型的响应式数据

标签中的ref属性

reactive创建

对象类型的响应式数据

ref对比reactive

toRefs和toRef