【学习笔记】Vue3(Ⅰ)

Vue3(Ⅰ)

  • 1、 概述
    •       1.1、概述
    •       1.2、使用 Vite 创建工程
      •             1.2.1 Vite 介绍
      •             1.2.2 创建工程
    •       1.3、项目文件结构
  • 2、 基础
    •       2.1、setup
      •             2.1.1 初识 setup
      •             2.1.2 setup 的返回值
      •             2.1.3 setup 的触发时机
      •             2.1.4 setup 语法糖
    •       2.2、ref 函数
      •             2.2.1 概述
      •             2.2.2 创建单个基本类型的响应式数据示例
      •             2.2.3 RefImpl
      •             2.2.4 Proxy 类
      •             2.2.5 创建对象类型的响应式数据示例
    •       2.3、reactive 函数
      •             2.3.1 概述
      •             2.3.2 创建对象类型的响应式数据示例
      •             2.3.3 Object.assign 解决 reactive 存在的问题
    •       2.4、toRef 和 toRefs
    •       2.5、计算属性
    •       2.6、监视属性
      •             2.6.1 监视 ref 定义的基本类型的数据及停止监视
      •             2.6.2 监视 ref 定义的对象类型的数据
      •             2.6.3 监视 reactive 定义的对象类型的数据
      •             2.6.4 监视对象的属性值
      •             2.6.5 同时监视多个数据
      •             2.6.6 watchEffect
    •       2.7、ref 属性及 defineExpose
    •       2.8、props
    •       2.9、Vue3 的生命周期
    •       2.10、自定义 Hook

1、 概述

      1.1、概述

         Vue.js 是一个流行的前端 JavaScript 框架,用于构建交互式的 Web 用户界面。Vue3 是 Vue.js 的下一个主要版本,带来了许多令人期待的新特性和改进

特性 描述
Composition API
(组合式 API)
Vue 3 引入了 Composition API,这是一种新的组件组织方式,使得组件更易于阅读、理解和维护。它允许将代码按逻辑功能组织,而不是按照生命周期函数
响应性系统的重写 Vue 3 中的响应性系统进行了重写,性能得到了显著提升。新的响应性系统采用了 Proxy 来实现,相比之前的 Object.defineProperty,Proxy 具有更好的性能
Teleport
(传送门)
Vue 3 引入了 Teleport 组件,使得在 DOM 中的任意位置渲染组件变得更容易。这对于在应用中实现模态框、通知、弹出菜单等功能非常有用
Fragment
(片段)
Vue 3 支持使用片段(Fragment),这允许组件返回多个根节点而无需包装元素。这样可以使得组件更加灵活
Suspense
(悬挂)
Vue 3 中引入了 Suspense 组件,用于优雅地处理异步操作。它能够在等待异步组件加载时显示备用内容,提高了用户体验
性能优化 Vue 3 在性能方面进行了多项优化,包括虚拟 DOM 的改进、Tree-shaking 支持、更高效的组件更新算法等,使得应用程序的性能得到了提升
TypeScript 支持 Vue 3 对 TypeScript 的支持更加友好,提供了更好的类型推断和类型检查,使得开发者在使用 TypeScript 时更加流畅

      1.2、使用 Vite 创建工程

            1.2.1 Vite 介绍

        Vite(法语意为“快速的”,发音 /it,发音同“veet”)是一个由 Vue.js 核心团队开发的新型前端构建工具(对标 Webpack)。它的目标是提供一种快速、简单的开发体验,特别是针对现代化的前端开发。它主要由两部分组成:① 开发服务器,它基于 原生 ES 模块 提供了丰富的内建功能,如速度快到惊人的模块热更新(HMR)。② 一套构建指令,它使用 Rollup 打包你的代码,并且它是预配置的,可输出用于生产环境的高度优化过的静态资源。Vite 意在提供开箱即用的配置,同时它的 插件 AP 和 javaScriptAPI 带来了高度的可扩展性,并有完整的类型支持

主要特点 描述
快速的冷启动 Vite 利用了 ES Module(ESM)的特性,在开发模式下不需要打包,而是直接使用原生 ES Module,因此具有非常快速的冷启动时间。这意味着在开发过程中,你可以更快地看到修改后的效果
按需编译 Vite 可以以模块为单位进行编译,只编译你实际需要的部分。这样,在开发过程中,不需要重新编译整个应用,而是只编译修改的部分,从而提高了开发效率
内置开发服务器 Vite 内置了一个开发服务器,支持热模块替换(HMR),并且使用原生 ES Module 运行代码,从而使得开发过程更加流畅
支持 Vue 3 和 TypeScript Vite 对 Vue 3 和 TypeScript 有很好的支持,可以让你在项目中轻松地使用它们
插件系统 Vite 提供了一个灵活的插件系统,可以轻松地扩展其功能,满足项目的特定需求

        Webpack 的构建:入口文件开始,然后分析路由、分析模块、打包,服务才可以启动,因此尝试过使用 webpack 去进行项目的构建时会感受到还是相对较慢的,特别是写的组件一多的时候这种感觉就更明显了
在这里插入图片描述
        Vite 的构建:Vite 一上来就直接可以启动服务,然后按需地进行分析、打包,因此在构建项目的时候会感觉到比 Webpack 快一些
在这里插入图片描述
        总的来说,Vite 的出现为前端开发提供了一种全新的开发体验,尤其适用于 Vue.js 项目,使得开发者可以更快、更简单地构建出现代化的 Web 应用程序

            1.2.2 创建工程

         首先执行nrm use npm切换成官方镜像,这样下载貌似快一点,然后执行npm create vue@latest创建项目(应该是要比 vue-cli 在创建 vue2 要快一些),执行完创建命令之后,可以进行自定义的配置如下
在这里插入图片描述

① JSX(JavaScript XML):是一种 JavaScript 的语法扩展,它允许在 JavaScript 代码中直接编写类似 XML 或 HTML 的标签。JSX 最初由 React 引入,并广泛用于 React 应用开发中,但它也可以在其他框架中使用
② Pinia 是一个用于 Vue.js 应用的状态管理库,被设计为 Vuex 的下一代替代品。Pinia 提供了一种更简单、更直观的方式来管理应用状态,同时保持与 Vue 生态系统的良好集成

         然后按照下方的绿色字体来启动项目,分别是:进入刚创建的项目目录cd vue_test、安装依赖npm i、启动npm run dev(Vite 魅力时刻,可以体验下其构建的速度多快),执行之后就可以看到项目跑起来了
在这里插入图片描述
         访问蓝字指示的服务器地址,就可以访问到内置的示例了
在这里插入图片描述

      1.3、项目文件结构

        新创建的 Vue3 项目可以看到其大致有如下的文件结构

vue_test/						# 根目录
├── .vscode/					# 存放 VsCode 的配置文件
│   └── extensions.json			# Vue3 推荐开发者在该项目中使用的 VsCode 扩展 
├── node_modules/				# 包存放目录
├── public/						# 静态资源目录
│   └── favicon.ico				# 浏览器标签页图标
├── src/						# 源代码目录
│   ├── assets/					# 静态资源文件,如样式表、图片等
│   ├── components/				# Vue 组件文件夹,存放项目的组件
│   ├── App.vue					# 根组件,是整个应用的主入口
│   └── main.ts					# 入口文件,初始化并挂载 Vue 实例
├── .gitignore					# git忽略文件
├── env.d.ts					# TS 的声明文件,相当于 Webpack 配置文件中 resolve.extensions的作用,让 TS 能够识别其它后缀的文件
├── index.html					# 项目的入口文件
├── package.json				# 项目的配置文件
├── README.md					# 项目的说明文件(可删)
├── tsconfig.app.json			# 该文件常用于 Angular 项目中,用于配置 Angular 应用的 TS 编译选项
├── tsconfig.json				# TS 的主要配置文件
├── tsconfig.node.json			# 该文件常用于 NodeJS 项目中,用于配置 Node.js 应用的 TS 编译选项
└── vite.config.ts				# Vite 构建工具的配置文件,用于配置 Vite 项目的构建选项、插件、中间件等

2、 基础

      2.1、setup

            2.1.1 初识 setup

        使用 setup 有如下一些基本的注意点
        ① setup 函数是组件内部的一个特殊选项,它用于替代 Vue 2 中的 data、computed、methods 等选项,用于配置组件的状态和行为
        ② vue2 中 data 配置中的变量在 vue3 中作为 setup 函数中的普通变量,同理 vue2 中 methods 配置中的函数在 vue3 中作为 setup 函数中的普通函数
        ③ setup 函数中的 this 是 undefined,弱化了 this 的使用
        ④ setup 函数的执行时机先于 beforeCreate 钩子函数

<!-- src/components/Person.vue -->
<template>
    <h2>姓名:{
  { name }}</h2>
    <h2>年龄:{
  { age }}</h2>
    <button @click="changeName">改变名字</button>
    <button @click="changeAge">改变年龄</button>
</template>

<script>
export default {
     
    // 组件名
    name: "Person",
    // setup 函数
    setup() {
     
    	console.log(this); // undefined
        let name = "niki";
        let age = 18;
        function changeName() {
     
            name = "pyy";
        }
        function changeAge() {
     
            age += 1;
        }
        return {
     name, age, changeName, changeAge};
    },
};
</script>

<style scoped>
button {
     
    margin-right: 10px;
}
</style>

Tip
1、Vue3 的模板做了改进,现在不需要在 template 标签中再套一层 div 了,可以直接将内容写在 template 下
2、上面给出的例子中,在数据在变更之后不会响应式地渲染到页面中

            2.1.2 setup 的返回值

        当 setup 的返回值不是一个对象,而是一个返回了字符串的函数时,这个字符串将作为该组件的模板,即替换掉 template 中所写的内容

<!-- src/components/Person.vue -->
<template>
    <h2>姓名:{
  { name }}</h2>
    <h2>年龄:{
  { age }}</h2>
</template>

<script>
export default {
     
    name: "Person",
    setup() {
     
        let name = "niki";
        let age = 18;
        return () => "Hello World"; // 返回一个字符串
    },
};
</script>

            2.1.3 setup 的触发时机

        在组件实例化时,setup 函数是最先执行的代码之一,它比 beforeCreate 生命周期钩子执行的还要更早

<!-- src/components/Person.vue -->
<template></template>

<script>
export default {
     
    name: "Person",
    beforeCreate() {
     
        console.log("this is beforeCreate");
    },
    setup() {
     
        console.log("this is setup");
    },
};
</script>

        我们知道数据代理、数据监测工作在 created 生命钩子调用时才完成,因此,如果 setup 函数和 OptionsAPI (data、methods这些配置项)同时出现时,OptionsAPI 可以访问 setup 的内容。相反,由于 setup() 在 beforeCreate 之前就已经解析完毕,它不可能知道 data、methods… 中有什么东西,因此 setup() 不能访问 OptionsAPI 中的数据

<!-- src/components/Person.vue -->
<template>
    <h2>姓名:{
  { myname }}</h2>
    <h2>年龄:{
  { getAge() }}</h2>
</template>

<script>
export default {
     
    name: "Person",
    data() {
     
        return {
     
            myname: this.name,
        };
    },
    methods: {
     
        getAge() {
     
            return this.age;
        },
    },
    setup() {
     
        let name = "niki";
        let age = 18;
        return {
     name, age};
    },
};
</script>

Tip:setup 函数需要将数据、函数 return 出来算是被挂载到组件实例身上,此时 data、methods 中才可以通过 this.xxx 来访问 setup 中的内容,没有 return 的话是访问不到的

            2.1.4 setup 语法糖

        由于在 setup 函数中每次定义完要进行 return 才能使用,有时候可能会忘记直到项目报错才想起来是忘记 return 了,会比较烦,因此可以采用 setup 语法糖来简写

<!-- src/components/Person.vue -->
<template>
    <h2>姓名:{
  { name }}</h2>
    <h2>年龄:{
  { getAge() }}</h2>
</template>

<script>
export default {
     
    name: "Person",
};
</script>

<script setup>
let name = "niki";
let age = 18;
function getAge() {
     
    return age;
}
</script>

        这样的写法会有一个普通的 script 用来进行组件的配置,还有一个带有 setup 字眼的 script 标签用来承载组合式 API 的(因此组件名要是在这里配置会出错),如果觉得这样写很难受,想合并到一起的话,可以借助插件来解决这个问题

安装:npm i vite-plugin-vue-setup-extend -D

// 修改 vite.config.ts 文件

// 引入
import VueSetupExtend from 'vite-plugin-vue-setup-extend'

// 添加插件
plugins: [
	... // 其它插件
    VueSetupExtend() // 添加这个
]

         然后现在组件的名字可以通过 name 属性来指明

<!-- src/components/Person.vue -->
<template>
    <h2>姓名:{
  { name }}</h2>
    <h2>年龄:{
  { getAge() }}</h2>
</template>

<script setup name="Person">
let name = "niki";
let age = 18;
function getAge() {
     
    return age;
}
</script>

      2.2、ref 函数

            2.2.1 概述

         在 Vue 3 中,ref 是一个用于创建响应式数据的 API,它主要用于定义基本类型(如数字、字符串、布尔值)和对象类型的响应式引用。与 reactive API 不同,ref 更适用于单个值或引用的场景

注意:ref 可以用于创建单个基本类型的响应式数据,也可以用于创建对象类型的响应式数据,只不过更适用于前者

            2.2.2 创建单个基本类型的响应式数据示例

<!-- src/components/Person.vue -->
<template>
    <h2>姓名:{
  { name }}</h2>
    <h2>年龄:{
  { age }}</h2>
</template>

<script setup name="Person">
    import {
      ref } from "vue";
    let name = ref("niki"); // 响应式数据,一个 RefImpl 实例
    console.log(name); 
    let age = 18; // 普通字符串
    console.log(age);
    function changeName() {
     
        name.value = "pyy";
    }
</script>

         运行结果如下,可见使用 ref 创建响应式数据得到的是一个 RefImpl 实例,RefImpl 是 Vue 内部实现的一种机制,用来管理响应式引用的行为
         此时在 script 标签中要访问、修改响应式数据需要调用 RefImpl 实例的 value 属性,而在模板中可以直接使用变量名即可,因为在背后会自动帮我们去调取其 value 值
在这里插入图片描述

            2.2.3 RefImpl

         RefImpl 是 Vue 3 中用来实现 ref 的基础类。它的主要作用是封装一个值,并通过 value 属性来访问和修改这个值,同时确保这个值在修改时能够触发依赖它的响应式更新

主要特性 描述
value 属性 RefImpl 的核心特性是其 value 属性,通过这个属性可以访问和修改被封装的值
响应式更新 当 value 被修改时,会触发依赖于这个 ref 的响应式更新

         RefImpl 类的简要实现有如

class RefImpl {
   
  // 属性 
  public dep;
  private _value;  // 原始值
  // 构造函数
  constructor(value) {
   
    this._value = value;
    this.dep = new Map(); // 用来存储依赖
  }
  // 对 _value 的数据监视
  get value() {
   
    track(this, 'get', 'value'); // 收集依赖
    return this._value;
  }
  set value(newValue) {
   
    if (newValue !== this._value) {
   
      this._value = newValue;
      trigger(this, 'set', 'value', newValue); // 触发依赖更新
    }
  }
}

// 暴露 
function ref

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/670591.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Matlab2010安装注册+激活(保姆级教程)

目录 一、软件安装 二、软件激活 三、软件测试 Matlab2010压缩包: 链接&#xff1a;https://pan.baidu.com/s/1bX4weZ0nC-4zlDLUiSKcRQ?pwdxljj 提取码&#xff1a;xljj 一、软件安装 1.解压所给压缩包&#xff0c;目录双击setup.exe打开. (如果用户名为中文则会遇到这个…

HCIP-Datacom-ARST自选题库__BGP/MPLS IP VPN判断【10道题】

1.部署BGP/MPLSIP VPN时,当两个VPN有共同的站点,则该共同站点一定不能与两个VPN其他站点使用重叠的地址空间。 2.如图所示&#xff0c;运营商BGP/MPLSIP VPN骨干网通过LDP构建LSP&#xff0c;若想实现用户X两个站点之间通过BGP/MPLSIP VPN网络互通&#xff0c;则PE1和PE2之间必…

Flutter开发效率提升1000%,Flutter Quick教程之对被遮挡的组件进行编辑

1&#xff0c;有些时候&#xff0c;有的widget会被其他widget所遮挡&#xff0c;那么&#xff0c;我们如何选中被遮挡的Widget?如下面这张图。上面是一个Text&#xff0c;外面包裹着一个Container&#xff0c;这时候点击事件会被Text所拦截&#xff0c;那么&#xff0c;如何选…

腾讯 InstantMesh,单图生成 3D 模型,10 秒内完成,性能超越 SOTA

前言 近年来&#xff0c;3D 内容创作在游戏、动画、虚拟现实等领域发挥着越来越重要的作用。然而&#xff0c;传统的 3D 模型制作流程繁琐&#xff0c;需要专业人员花费大量时间和精力。为了简化 3D 内容创作流程&#xff0c;腾讯 ARC 实验室推出了 InstantMesh&#xff0c;一…

Python课设-学生信息管理系统

一、效果展示图 二、前端代码 1、HTML代码 <1>index.html <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0">…

C语言(内存函数)

Hi~&#xff01;这里是奋斗的小羊&#xff0c;很荣幸各位能阅读我的文章&#xff0c;诚请评论指点&#xff0c;欢迎欢迎~~ &#x1f4a5;个人主页&#xff1a;小羊在奋斗 &#x1f4a5;所属专栏&#xff1a;C语言 本系列文章为个人学习笔记&#xff0c;在这里撰写成文一…

Python魔法之旅-魔法方法(10)

目录 一、概述 1、定义 2、作用 二、应用场景 1、构造和析构 2、操作符重载 3、字符串和表示 4、容器管理 5、可调用对象 6、上下文管理 7、属性访问和描述符 8、迭代器和生成器 9、数值类型 10、复制和序列化 11、自定义元类行为 12、自定义类行为 13、类型检…

【Python系列】Python的多返回值

&#x1f49d;&#x1f49d;&#x1f49d;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学…

ClickHouse 使用技巧总结

文章目录 数据导入、导出技巧外部文件导入导技巧使用集成表引擎导入、导出数据 建表技巧表引擎选择技巧分区键选择技巧数据结构选择技巧分区技巧 高级技巧物化视图投影位图变更数据捕获 常见报错及处理方法 数据导入、导出技巧 外部文件导入导技巧 ClickHouse作为OLAP即席分析…

opencv-python(二)

马赛克 img cv2.imread(./bao.jpeg)print(img.shape)img2 cv2.resize(img,(35,23))img3 cv2.resize(img2,(900,666))cv2.imshow(bao,img3)cv2.waitKey(0)cv2.destroyAllWindows()img2 cv2.resize(img, (90,66))img3 np.repeat(img2, 10, axis 0) # 重复行img4 np.repeat(…

I2C LCD1602液晶显示屏

前言 本文实现在 LCD1602显示屏的使用。 显示屏使用带I2C转接板的,如下图所示。 并且会做一些有趣的显示方式。 效果预览 材料准备 材料数量价格Arduino nuo118杜邦线411602A显示屏110 依赖库下载 本文使用都库在 arduino ide 中搜索 LiquidCrystal_I2C 即可找到。 注意作…

混合动力电动汽车介绍(一)

电动汽车发展的技术背景主要包含环境问题和能源问题两大方面。环境问题的表现形式为空气污染&#xff0c;而能源问题的表现形式为现有能源供应体系对化石燃料的过分依赖。《新能源汽车产业发展规划&#xff08;2021-2035&#xff09;》中明确我国新能源汽车技术研发的“三纵”、…

kivy.garden.matplotlib

matplotlib 是什么 # pip install matplotlib2.2.2 from kivy.garden.matplotlib.backend_kivyagg import FigureCanvasKivyAgg FigureCanvasKivyAgg class FigureCanvasKivyAgg(FigureCanvasKivy, FigureCanvasAgg):FigureCanvasKivyAgg class. See module documentation f…

SickOS1.1 - Shellshock原理和利用过程精讲

SickOS1.1的另一种思路&#xff1b;用另一种方法打透这台机器 Nikto扫描 正常都是-h扫描&#xff1b;有代理就用-useproxy 指向的代理ip:端口 nikto -h 192.168.218.157 -useproxy 192.168.218.157:3128apache版本&#xff0c;有点低&#xff0c;现在都是2.4.54版本了&#x…

Cobaltstrike常用功能

一、快捷工具栏 3、需要创建监听器&#xff0c;才能让靶机上线&#xff0c;连接我们公网服务端上去开启的帧监听端口&#xff0c;做任何操作 都是通过服务器的IP地址去连接靶机&#xff0c;去和靶机进行文件stage的一个传输和交互。这里推荐把cs 放到公网上边&#xff0c;比较…

通过LabVIEW提升生产设备自动化水平

现代制造业对生产设备的自动化水平提出了越来越高的要求。使用LabVIEW这一强大的图形化编程环境&#xff0c;可以显著提升生产设备的自动化程度&#xff0c;改善生产效率和产品质量。本文将详细分析如何通过LabVIEW改善生产设备的自动化水平&#xff0c;并提供具体的实施策略与…

数论1---整除

概念与基本性质就不说了 例题1&#xff1a;已知a|n&#xff0c;b|n.且axby1,求证&#xff1a;ab|n 即&#xff1a; 所以&#xff1a;ab|n 例题2&#xff1a;设m是一个大于2的正整数&#xff0c;证明&#xff1a;对于任意正整数n&#xff0c;都有 由于我不想打公式了直接拍照…

opencv进阶 ——(九)图像处理之人脸修复祛马赛克算法CodeFormer

算法简介 CodeFormer是一种基于AI技术深度学习的人脸复原模型&#xff0c;由南洋理工大学和商汤科技联合研究中心联合开发&#xff0c;它能够接收模糊或马赛克图像作为输入&#xff0c;并生成更清晰的原始图像。算法源码地址&#xff1a;https://github.com/sczhou/CodeFormer…

SAP PP学习笔记14 - MTS(Make-to-Stock) 按库存生产(策略10),以及生产计划的概要

上面讲了SAP里面的基础知识&#xff0c;BOM&#xff0c;作业手顺&#xff08;工艺路线&#xff09;&#xff0c;作业区&#xff08;工作中心&#xff09;&#xff0c;MRP&#xff0c;MPS等概念&#xff0c;现在该到用的时候了。 SAP PP学习笔记07 - 简单BOM&#xff0c;派生BO…

【教程】如何实现WordPress网站降级(用于解决插件和主题问题)

在最新可用版本上运行WordPress安装、插件和主题是使用该平台的关键最佳实践。还建议使用最新版本的PHP。但是,在某些情况下,这是不谨慎或不可能的。 如果您发现自己处于这种情况,您可能需要撤消更新并降级您的WordPress网站(或其中的一部分)。幸运的是,有一些方法可用于…