Vue3 快速上手（详细）

最新推荐文章于 2024-06-13 15:12:44 发布
最新推荐文章于 2024-06-13 15:12:44 发布
阅读量3k 收藏 15
点赞数 3
分类专栏： 学习 vue 文章标签： vue.js javascript ecmascript 学习 Powered by 金山文档
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/bguihiub/article/details/128949712
版权
学习 同时被 2 个专栏收录
17 篇文章 3 订阅
订阅专栏
vue
2 篇文章 0 订阅
订阅专栏

一. 概述

1 为什么提出Vue3

Vue2是一个非常优秀的框架, 好上手, 学习曲线也比较平滑. 也是目前使用最广泛的框架之一

为什么尤大要重构, 推出Vue3呢?

大家有兴趣可以看一下这篇专访

总结起来就是

更适应当下的技术环境

要知道, 每个技术都是有局限性的. 某一方面的提升往往意味着另一方面的牺牲.

2 提出了哪些改进

  1. 使用TS重构

  1. 应用了JS的新特性Proxy重写响应式

  1. 性能的提升

  1. Composition API

如果一定要选出一个最大的区别, 应该是Composition API

3 Options API vs Composition API

1) Options API的代码组织形式

使用Options API实现一个功能, 需要在不同的地方编写代码

  • 状态(数据)在data中定义

  • 方法在methods中定义

  • 计算属性

  • ...

当新添加一个功能时, 代码的组织会比较零散

2) Composition API的代码组织

  1. 引入vue.js

  1. 创建页面容器

  1. 实例化对象

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!-- 1. 引入vue库 -->
    <script src="../node_modules/vue/dist/vue.global.js"></script>
  </head>
  <body>
    <!-- 2. 创建页面容器 -->
    <div id="app">{{msg}}</div>

    <script>
      const app = {
        data() {
          return {
            msg: 'hello',
          }
        },
      }

      // 创建Vue实例对象, 挂载到#app指定的页面容器
      Vue.createApp(app).mount('#app')
    </script>
  </body>
</html>

  • data必须是一个函数

  • 之前Vue2中的配置项依然可以使用

练习

三. setup语法

1 setup配置项

在Vue3中, 为了向前兼容, 不影响之前的配置项

创造了一个新的配置项setup, 所有的Composition API都可以在setup中使用

:::info

setup是一个函数

  • 返回一个对象, 对象中定义的属性, 方法在模板中直接使用

  • 返回渲染函数(不常用)

:::

示例 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="../node_modules/vue/dist/vue.global.js"></script>
  </head>
  <body>
    <div id="app">
      {{uname}} -- {{age}}
      <p>{{ sayHi() }}</p>
    </div>

    <script>
      const app = {
        // setup配置项(函数, 返回对象)
        // 在返回的对象中定义的属性, 方法 可以直接在模板中使用
        setup() {
          // 定义数据 data
          let uname = 'xiaoming'
          let age = 20

          // 定义方法 methods
          function sayHi() {
            console.log(`大家好, 我是${uname}, 今年${age}岁了`)
            return 123
          }

          return {
            uname,
            age,
            sayHi,
          }
        },
      }

      Vue.createApp(app).mount('#app')
    </script>
  </body>
</html>

这样写的代码会丢失响应式

:::warning

💡** 注意**

不要将vue2的语法和vue3的语法混用!!

:::

2 调试工具

这里我们安装最新的vue devtools工具, 可以同时支持vue2和vue3

通过调试工具, 我们发现定义的数据并不是响应式的.

在setup函数中, 如果要实现响应式, 需要借助

  • ref函数: 实现普通类型数据的响应式

  • reactive函数: 实现引用类型数据的响应式

3 ref函数

使用步骤

  1. 导入ref函数

  1. 使用ref函数定义数据

示例 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="../node_modules/vue/dist/vue.global.js"></script>
  </head>
  <body>
    <div id="app">{{msg}}</div>

    <script>
      // 像ref, reactive, computed从Vue对象从导出的函数, 就是composition API
      const { ref } = Vue
      const app = {
        setup() {
          // ref函数: 实现值类型数据的响应式
          // 将值类型数据(普通数据 String, Number, Boolean, undefined, null)
          let msg = ref('hello')

          // ref函数: 接收普通类型的数据作为参数, 返回一个RefImpl对象
          console.log(msg)

          return {
            msg,
          }
        },
      }

      Vue.createApp(app).mount('#app')
    </script>
  </body>
</html>

通过devtools修改

:::info

需求

  1. 点击按钮修改姓名

:::

如何使用代码实现修改数据呢?

示例 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!-- 1. 引入vue库 -->
    <script src="../node_modules/vue/dist/vue.global.js"></script>
  </head>
  <body>
    <!-- 2. 创建页面容器 -->
    <div id="app">
      <p>姓名:{{uname}}</p>
      <button @click="handleClick">点击修改</button>
    </div>

    <script>
      const { ref } = Vue

      const app = {
        setup() {
          let uname = ref('xiaoming')

          function handleClick() {
            // uname是一个RefImpl对象. 修改其`value`属性
            uname.value = '小明'
          }

          return {
            uname,
            handleClick,
          }
        },
      }

      // 创建Vue实例对象, 挂载到#app指定的页面容器
      Vue.createApp(app).mount('#app')
    </script>
  </body>
</html>
练习

使用setup语法(Composition API)实现计数器

4 reactive函数

对于引用类型数据. 如对象, 数组

使用ref函数比较麻烦, 在访问时, 每次都需要.value

示例 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!-- 1. 引入vue库 -->
    <script src="../node_modules/vue/dist/vue.global.js"></script>
  </head>
  <body>
    <!-- 2. 创建页面容器 -->
    <div id="app">
      <p>姓名:{{stu.name}}</p>
      <button @click="handleClick">点击修改</button>
    </div>

    <script>
      const { reactive } = Vue

      const app = {
        setup() {
          const stu = reactive({
            name: 'xiaoming',
            age: 20,
          })

          function handleClick() {
            console.log(stu)
            stu.name = '小明'
          }

          return {
            stu,
            handleClick,
          }
        },
      }

      // 创建Vue实例对象, 挂载到#app指定的页面容器
      Vue.createApp(app).mount('#app')
    </script>
  </body>
</html>
区别

  • 从定义的角度

  • ref: 主要用于基本数据类型

  • reactive: 主要用于引用数据类型

  • 从实现的角度

  • ref: 通过Object.defineProperty的get和set来实现响应式

  • reactive: 通过Proxy来实现数据劫持, 通过reflect操作内部属性

  • 从使用的角度

  • ref: 需要通过.value操作数据

  • reactive: 不需要.value, 直接操作数据

5 computed函数

使用步骤

  1. 导入computed函数

  1. 在setup中使用

示例 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!-- 1. 引入vue库 -->
    <script src="../node_modules/vue/dist/vue.global.js"></script>
  </head>
  <body>
    <!-- 2. 创建页面容器 -->
    <div id="app">
      姓: <input type="text" v-model="data.firstName" /> <br />
      名: <input type="text" v-model="data.lastName" /> <br />
      全名: {{fullName}}
    </div>

    <script>
      const { reactive, computed } = Vue

      const app = {
        setup() {
          const data = reactive({
            firstName: '',
            lastName: '',
          })
          const fullName = computed(() => {
            return data.firstName + data.lastName
          })

          return {
            data,
            fullName,
          }
        },
      }

      // 创建Vue实例对象, 挂载到#app指定的页面容器
      Vue.createApp(app).mount('#app')
    </script>
  </body>
</html>
优化 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!-- 1. 引入vue库 -->
    <script src="../node_modules/vue/dist/vue.global.js"></script>
  </head>
  <body>
    <!-- 2. 创建页面容器 -->
    <div id="app">
      姓: <input type="text" v-model="person.firstName" /> <br />
      名: <input type="text" v-model="person.lastName" /> <br />
      全名: {{person.fullName}}
    </div>

    <script>
      const { reactive, computed } = Vue

      const app = {
        setup() {
          const person = reactive({
            firstName: '',
            lastName: '',
          })

          person.fullName = computed(() => {
            return person.firstName + person.lastName
          })

          return {
            person,
          }
        },
      }

      // 创建Vue实例对象, 挂载到#app指定的页面容器
      Vue.createApp(app).mount('#app')
    </script>
  </body>
</html>

6 watch函数

在Vue3中, 将watch也定义成一个组合式API

使用步骤

  1. 导入watch函数

  1. 使用watch函数监听

由于定义数据有两种方式. 监听时也分两种情况

  • 监视ref定义的数据

  • 监视reactive定义的数据

1) 监视ref定义的数据

示例 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="../node_modules/vue/dist/vue.global.js"></script>
  </head>
  <body>
    <div id="app">
      <h3>当前计数为: {{count}}</h3>
      <button @click="count++">点击+1</button>
    </div>

    <script>
      const { ref, watch } = Vue
      const app = {
        setup() {
          const count = ref(0)

          watch(count, (newValue, oldValue) => {
            console.log('count改变了', newValue, oldValue)
          })

          return {
            count,
          }
        },
      }

      Vue.createApp(app).mount('#app')
    </script>
  </body>
</html>

2) 监视reactive定义的数据

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="../node_modules/vue/dist/vue.global.js"></script>
  </head>
  <body>
    <div id="app">
      <h3>姓名: {{stu.name}}</h3>
      <h3>年龄: {{stu.age}}</h3>
      <button @click="stu.name = '小明'">修改姓名</button>
      <button @click="stu.age++">年龄+1</button>
    </div>

    <script>
      const { reactive, watch } = Vue
      const app = {
        setup() {
          const stu = reactive({
            name: 'xiaoming',
            age: 20,
          })

          watch(stu, (newValue, oldValue) => {
            // 拿不到旧的value值
            console.log('stu变化了', newValue, oldValue)
          })

          return {
            stu,
          }
        },
      }

      Vue.createApp(app).mount('#app')
    </script>
  </body>
</html>

对于引用类型, watch不能监视到oldValue

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="../node_modules/vue/dist/vue.global.js"></script>
  </head>
  <body>
    <div id="app">
      <h3>姓名: {{stu.name}}</h3>
      <h3>年龄: {{stu.age}}</h3>
      <button @click="stu.name = '小明'">修改姓名</button>
      <button @click="stu.age++">年龄+1</button>
    </div>

    <script>
      const { reactive, watch } = Vue
      const app = {
        setup() {
          const stu = reactive({
            name: 'xiaoming',
            age: 20,
          })

          // 监听某个属性, 需要使用函数, 函数返回该属性
          watch(() => stu.name, (newValue, oldValue) => {
            // 拿不到旧的value值
            console.log('stu变化了', newValue, oldValue)
          })

          return {
            stu,
          }
        },
      }

      Vue.createApp(app).mount('#app')
    </script>
  </body>
</html>

7 生命周期

  1. Vue3的生命周期在调用mount('#app')后开始

  1. setup在所有生命周期函数执行前调用, 因此, 在setup()中this指向window, 没有批向当前实例

  1. setup主要完成composition API的初始化. created完成OptionsAPI的初始化

  1. 在setup中最常用的生命周期有两个: onMounted和onBeforeUnmount

示例 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="../node_modules/vue/dist/vue.global.js"></script>
  </head>
  <body>
    <div id="app">
      <h1>我是vm根实例</h1>
      <button @click="isShow = !isShow">切换显示子组件</button>
      <Demo v-if="isShow"></Demo>
    </div>

    <script>
      const { onMounted, onBeforeUnmount } = Vue

      // 创建一个Vue应用
      const app = Vue.createApp({
        data() {
          return {
            isShow: true,
          }
        },
      })

      // 注册子组件
      app.component('demo', {
        template: '<h3>我是子组件</h3>',
        setup() {
          onMounted(() => {
            console.log('demo组件挂载...')
          })
          onBeforeUnmount(() => {
            console.log('demo组件卸载...')
          })
        },
      })

      app.mount('#app')
    </script>
  </body>
</html>

四. 工程化

创建Vue3.0项目有这样两种方式

  • 使用vue-cli

  • 使用vite

1 使用vue-cli创建

vue create vue3-project

2 使用vite构建

npm create vite

使用vite初始化项目

五. hooks函数

1 什么是hooks

hooks本质上还是一种函数, 将多个Composition API封装, 实现某个特定功能

2 hooks的作用

  • 解耦

  • 复用

示例

将特定功能封装到一个单独的文件usePoint.js

import { reactive, onMounted, onBeforeUnmount } from 'vue'

export default function usePoint() {
  const point = reactive({
    x: 0,
    y: 0,
  })

  function onClick(event) {
    point.x = event.pageX
    point.y = event.pageY
    console.log(point.x, point.y)
  }

  onMounted(() => {
    window.addEventListener('click', onClick)
  })

  onBeforeUnmount(() => {
    window.removeEventListener('click', onClick)
  })

  return point
}

在需要时引入hooks函数

<template>
  <h3>子组件</h3>
  <p>x的坐标: {{ point.x }}--y的坐标: {{ point.y }}</p>
</template>

<script setup>
import usePoint from '../hook/usePoint'

const point = usePoint()
</script>

<style>
</style>
团子WebGIS
关注
  • 3
    点赞
  • 踩
  • 15
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue3快速上手
qq_32768235的博客
02-28 952
vue经历从2.0到3.0更新之后，简⽽⾔之就是变得更轻，更快，使⽤起来更加⽅便，每⼀次的版本迭代都是对上⼀个版本的升级优化，不管 是对于我们开发者还是对于⽤户体验都是不断地在越来越⽅便。
Vue3快速上手-vue3详细基础教程
最新发布
06-20
Vue3快速上手,vue3详细基础教程,涵盖了知识点讲解和案例的使用讲解，makdown格式，是一份不可多得的学习资料
Vue3 全家桶，从 0 到 1 实战项目，面试必备知识点总结
m0_60666841的博客
04-18 803
setup 函数就是 composition API 的入口，是处于生命周期钩子函数 beforeCreate 和 created 两个函数之间，所以 setup 中的属性和方法在外部使用时，需要先 return 暴漏出去。vue-router 4 的大多数的 API 是保持不变的，但是在 vue3 中以插件形式存在，所以在创建的时候有一定的改变。与 ref 类似的还有 reactive。项目创建完成之后，我们要做的第一件事就是配置路由了，添加路由的时候，需要在 main.js 内引入 router。
vue 3.0学习笔记(从入门到精通)
10-07
vue 3.0自我学习整理的笔记，有很大的参考价值，包括了所有的知识点，vue的开发环境搭建、组件开发、数据状态管理、vue route、组件之前数据传递等有关知识点
Vue3学习
weixin_47180815的博客
06-13 1004
修改名字
Vue 3 介绍
热门推荐
csdn727232616的博客
06-21 7万+
vue3基础
【前端开发---Vue3】前段开发之详细的Vue3入门教程，特别适合小白系统学习，入门到熟练使用Vue看这一篇就够了！
m0_67844671的博客
09-28 1万+
前段开发之详细的Vue3入门教程，特别适合小白系统学习，入门到熟练使用Vue看这一篇就够了！内容包括Vue3项目的创建，Vue2与Vue3的区别，路由，组件，各种组件之间的传值等；
Vue3详细教程
m0_55734030的博客
11-06 2万+
（1）新增组合式api（2）更加接近原生（3）更加解耦（react启发）setup api ref 创建值类型响应式数据方法 在seup内部需要 .value 来访问设置值 reactive 创建引用类型响应式数据方法 defineProps 定义 组传的传参props defineEmits 定义组件发送的事件 watch 监听一个数据的变化 watchEffect 监听多个数据 生命周期 setup中的生命周期，没有beforeCreate与create
Vue3：基础入门
CaptainDrake的博客
04-22 8322
vue简介、vue的基本使用、vue的指令与过滤器、品牌列表案例
vue3快速上手.md
01-06
- Vue3可以更好的支持TypeScript 4.新的特性 1. Composition API（组合API） - setup配置 - ref与reactive - watch与watchEffect - provide与inject 2. 新的内置组件 - Fragment - Teleport - Suspense 3. ...
Vue3快速上手.md
01-21
这个是禹神Vue3的最新笔记！！！
Vue3详解大全
weixin_51225684的博客
10-28 1万+
1、核心·-响应式组合式Api要求我们要将响应式的变量声明在setup函数中，setup函数是一个专门用于组合式Api的钩子函数。而且我们需要借助reactive函数来创建响应式的对象1、核心·-响应式如上，即为组合式Api的典型写法。在组合式Api中一定记得将需要暴露到模板的对象return出去（单独使用setup的时候）。更多声明响应式对象的方法前面我们已经了解了data方法（选项式Api中使用）、reactive（组合式Api中使用）两种不同的声明响应式对象的方式，那还有其他方式吗。
vue3.0基本使用 详细说明！！！
^_^
07-14 3万+
一、vue3概述 （1）为什么要学习vue3 vue目前是前端框架中比较火热的，有了vue2为什么还要学习vue3呢，就像打游戏一样，为什么要升级呢，虽然公司大部分使用的还是vue2，还是有少部分公司使用vue3，提前了解使用vue3 也不是坏处 （2）vue3的新变化 1.性能提升，首次渲染更快，diff算法更快，内存占用更少，打包体积更小， 2.更好的Typescript支持(在vue下写TS更方便了) 3.提供新的写代码方式：Composition API (需要成本学习) （3
【vue3基础核心语法】简单学习vue3核心语法加elementPlus，vue3和vue2的区别，有vue2基础的看完这篇快速使用。学习笔记持续更新【详细注释】
seeeeeeeeeee的博客
12-09 6728
一直用的vue2写的。一直没有接触过vue3没有机会使用工作中自己又比较懒，一直拖着没学，因为感觉学了不用，过段时间我就忘得差不多了。这次刚好公司有了这个vue3的项目，我就来学习一波，然后实战练练刚好记得牢一点。中途遇到的各种问题和我学习到的一些vue3的语法等。就在这里记录下来学习笔记。方便自己忘了来看看，一直保持更新！！路由配置 element Plus 组件默认英文 全局转中文
Vue3全网最细介绍使用
主要发布一些日常学习代码及理解
11-02 7226
详细介绍了Vue3创建项目｜Setup｜Ref、Reactive｜context｜计算 监听属性｜Vue3生命周期｜自定义hook｜toRef
Vue3详细讲解
一个前端开发者
12-31 2万+
为什么要学vue3: 1. Vue是国内最火的前端框架, 2.Vue 3 于 2022 年 2 月 7 日星期一成为新的默认版本！ 3. Vue3性能更高，体积更小,4. Vue3.0在经过一年的迭代后，越来越好用. 动机与目的: 1. 更好的逻辑复用 与 代码组织 (composition组合式api) optionsAPI(旧) => compositionAPI（新）, 效果: 代码组织更方便了, 逻辑复用更方便了 非常利于维护! 2.更好的类型推导 (typescript支持)
Vue3超详细教程
m0_73939789的博客
08-25 5743
其中有许多重复的代码。侦听一个或者多个数据的变化，数据变化时执行回调函数，俩个额外参数 immediate控制立刻执行，deep开启深度侦听。通过watch监听的ref对象默认是浅层侦听的，直接修改嵌套的对象属性不会触发回调执行，需要开启deep。如果我们要定义组件的 name 或其他自定义的属性，还是得回到最原始的用法——再添加一个普通的。在setup函数中写的数据和方法需要在末尾以对象的方式return，才能给模版使用。顶层组件可以向底层组件传递方法，底层组件调用方法修改顶层组件的数据。
vue3的学习【超详细】
weixin_50166856的博客
05-18 8204
在Vue2中，数据响应式主要借助Object.defineProperty()来实现，存在的缺陷是无法操作数据的增加和删除，在Vue3中，数据响应式主要借助proxy和Reffect配合实现，可以做到实现数据的增删改查。指令系统是计算机硬件的语言系统，也叫机器语言，它是系统程序员看到的计算机的主要属性。因此指令系统表征了计算机的基本功能决定了机器所要求的能力在vue中提供了一套为数据驱动视图更为方便的操作，这些操作被称为指令系统。
Vue3 安装与配置 详细教程
majingbobo的博客
10-28 1万+
Vue环境搭建及项目创建
vue3快速上手.md尚硅谷文档下载
10-27
要下载尚硅谷关于Vue3快速上手的文档，可以按照以下步骤进行： 1. 打开浏览器，进入尚硅谷的官方网站（ https://www.atguigu.com/ ）。 2. 在网站的首页或者导航栏中找到“文档”或者“学习资料”等相关入口。 3. 进入文档页面后，可以选择查看目录或者搜索框中输入“Vue3快速上手”进行搜索。 4. 找到相关的文档后，点击进入该文档的页面。 5. 在文档页面中，应该会有一个类似于“下载”、“PDF”等的按钮或链接，点击该按钮或链接。 6. 浏览器会自动开始下载该文档，保存到指定的下载文件夹中。 7. 下载完成后，可以在下载文件夹中找到该文档，并进行查阅学习。 尚硅谷是一个知名的IT教育培训机构，他们提供了许多优质的学习资料和文档，对于Vue3快速上手的文档应该也是一份很不错的教程。希望我的回答能对您有所帮助。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值