【Vue3 知识第二讲】Vue3新特性、vue-devtools 调试工具、脚手架搭建

文章目录

    • 一、Vue3 新特性
      • 1.1 重写双向数据绑定
        • 1.1.1 Vue2 基于Object.defineProperty() 实现
        • 1.1.2 Vue3 基于Proxy 实现
      • 1.2 优化 虚拟DOM
      • 1.3 Fragments
      • 1.4 Tree shaking
      • 1.5 Composition API
    • 二、 vue-devtools 调试工具
    • 三、环境配置
    • 四、脚手架目录介绍
    • 五、SFC 语法规范解析
    • 附录：推荐采用国内淘宝镜像策略

一、Vue3 新特性

1.1 重写双向数据绑定

1.1.1 Vue2 基于Object.defineProperty() 实现

数字化管理平台
Vue3+Vite+VueRouter+Pinia+Axios+ElementPlus
权限系统-商城
个人博客地址

把 Vue 中的核心方法 defineReactive 做一些简化如下：

function defineReactive (obj, key, val, cb) {var dep = new Dep();Object.defineProperty(obj, key, {enumerable: true,configurable: true,get: ()=>{/*....依赖收集等....*/dep.depend()return val},set:newVal=> {val = newVal;/*触发回调*/dep.notify()}})
}

Vue通过defineReactive方法实现对需要观察的对象的每个属性进行监控。dep对象就相当于一个调度中心的作用，如果有数据用到这个属性，它就会自动收集该属性到调度中心，如果某属性发生了改变，那就会通知调度中心来更新视图。

1.1.2 Vue3 基于Proxy 实现

let proxyObj = new Proxy(obj,{get : function (target,prop) {return prop in target ? target[prop] : 0},set : function (target,prop,value) {target[prop] = 888;}
})

Proxy 与 Object.defineProperty(obj, prop, desc)方式相比有以下优势：

  • 丢掉麻烦的备份数据**
  • 省去for in 循环
  • 可以监听数组变化
    • 代码更简化
  • 可以监听动态新增的属性
  • 可以监听删除的属性
  • 可以监听数组的索引和 length 属性

1.2 优化 虚拟DOM

在Vue2中,每次更新diff,都是全量对比,Vue3则只对比带有标记的,这样大大减少了非动态内容的对比消耗

Vue Template Explorer我们可以通过这个网站看到静态标记
在这里插入图片描述

  • patch flag 优化静态树

    <span>Hello world!</span>
<span>Hello world!</span>
<span>Hello world!</span>
<span>Hello world!</span>
<span>{{msg}}</span>
<span>Hello world!</span>
<span>Hello world! </span>```

  • Vue3 编译后的 Vdom 是这个样子的

    export function render(_ctx，_cache，$props，$setup，$data，$options){return (_openBlock(),_createBlock(_Fragment,null，[
_createvNode( "span", null,"Hello world ! "),
_createvNode( "span",null，"Hello world! "),
_createvNode( "span"，null，"Hello world! "),
_createvNode( "span", null，"Hello world! "),
_createVNode("span", null，_toDisplaystring(_ctx.msg)，1/* TEXT */)，
_createvNode( "span", null，"Hello world! "),
_createvNode( "span", null，"Hello world! ")]，64/*STABLE_FRAGMENT */))

  • 新增了 patch flag 标记

    TEXT = 1 // 动态文本节点
CLASS=1<<1,1 // 2//动态class
STYLE=1<<2，// 4 //动态style
PROPS=1<<3,// 8 //动态属性，但不包含类名和样式
FULLPR0PS=1<<4,// 16 //具有动态key属性，当key改变时，需要进行完整的diff比较。
HYDRATE_ EVENTS = 1 << 5，// 32 //带有监听事件的节点
STABLE FRAGMENT = 1 << 6, // 64 //一个不会改变子节点顺序的fragment
KEYED_ FRAGMENT = 1 << 7, // 128 //带有key属性的fragment 或部分子字节有key
UNKEYED FRAGMENT = 1<< 8, // 256 //子节点没有key 的fragment
NEED PATCH = 1 << 9, // 512 //一个节点只会进行非props比较
DYNAMIC_SLOTS = 1 << 10 // 1024 // 动态slot
HOISTED = -1 // 静态节点
BALL = -2

我们发现创建动态 dom 元素的时候，Vdom 除了模拟出来了它的基本信息之外，还给它加了一个标记： 1 /* TEXT */，这个标记就叫做 patch flag（补丁标记）。patch flag 的强大之处在于，当你的 diff 算法走到 _createBlock 函数的时候，会忽略所有的静态节点，只对有标记的动态节点进行对比，而且在多层的嵌套下依然有效。尽管 JavaScript 做 Vdom 的对比已经非常的快，但是 patch flag 的出现还是让 Vue3 的 Vdom 的性能得到了很大的提升，尤其是在针对大组件的时候。

1.3 Fragments

  • vue3 允许我们支持多个根节点

    <div>Hello World</div>
<div>Hello Vue</div>
<div :key="index" v-for="item,index in [10,20,304]">{{item}}</div>

  • 同时支持render JSX 写法

    render() {return (<>{this.visable ? (<div>{this.obj.name}</div>) : (<div>{this.obj.price}</div>)}<input v-model={this.val}></input>{[1, 2, 3].map((v) => {return <div>{v}-----</div>;})}</>);
},

  • 同时新增了Suspense teleport 和 多 v-model 用法

1.4 Tree shaking

简单来讲，就是在保持代码运行结果不变的前提下，去除无用的代码。

在Vue2中，无论我们使用什么功能，它们最终都会出现在生产代码中。主要原因是Vue实例在项目中是单例的，捆绑程序无法检测到该对象的哪些属性在代码中被使用到。而 Vue3源码引入tree shaking特性，将全局 API 进行分块。如果你不使用其某些功能，它们将不会包含在你的基础包中。就是比如你要用watch 就是import {watch} from ‘vue’ 其他的computed 没用到就不会给你打包减少体积

1.5 Composition API

组合式 API (Composition API) 是一系列 API 的集合，使我们可以使用函数而不是声明选项的方式书写 Vue 组件。它是一个概括性的术语，涵盖了以下方面的 API：

响应式 API：例如 ref() 和 reactive()，使我们可以直接创建响应式状态、计算属性和侦听器。

生命周期钩子：例如 onMounted() 和 onUnmounted()，使我们可以在组件各个生命周期阶段添加逻辑。

依赖注入：例如 provide() 和 inject()，使我们可以在使用响应式 API 时，利用 Vue 的依赖注入系统。

组合式 API 是 Vue 3 及 Vue 2.7 的内置功能。对于更老的 Vue 2 版本，可以使用官方维护的插件 @vue/composition-api。在 Vue 3 中，组合式 API 基本上都会配合 

<script setup>import { ref, onMounted } from 'vue'// 响应式状态const count = ref(0)// 更改状态、触发更新的函数function increment() {count.value++}// 生命周期钩子onMounted(() => {console.log(`计数器初始值为 ${count.value}。`)})
</script><template><button @click="increment">点击了：{{ count }} 次</button>
</template>

使用组合式 API 有以下几点优势：

  • 更好的逻辑复用
    组合式 API 最基本的优势是它使我们能够通过组合函数来实现更加简洁高效的逻辑复用。在选项式 API 中我们主要的逻辑复用机制是 mixins，而组合式 API 解决了 mixins 的所有缺陷。
    组合式 API 提供的逻辑复用能力孵化了一些非常棒的社区项目，比如 VueUse，一个不断成长的工具型组合式函数集合。
  • 更灵活的代码组织
    同一个逻辑关注点相关的代码被归为了一组：我们无需再为了一个逻辑关注点在不同的选项块间来回滚动切换。此外，我们现在可以很轻松地将这一组代码移动到一个外部文件中，不再需要为了抽象而重新组织代码，大大降低了重构成本，这在长期维护的大型项目中非常关键。
  • 更好的类型推导
    组合式 API 主要利用基本的变量和函数，它们本身就是类型友好的。用组合式 API 重写的代码可以享受到完整的类型推导，不需要书写太多类型标注。大多数时候，用 TypeScript 书写的组合式 API 代码和用 JavaScript 写都差不太多！
  • 更小的生产包体积
    搭配 <script setup> 使用组合式 API 比等价情况下的选项式 API 更高效，对代码压缩也更友好。这是由于 <script setup> 形式书写的组件模板被编译为了一个内联函数，和 <script setup> 中的代码位于同一作用域。不像选项式 API 需要依赖 this 上下文对象访问属性，被编译的模板可以直接访问 <script setup> 中定义的变量，无需从实例中代理。这对代码压缩更友好，因为本地变量的名字可以被压缩，但对象的属性名则不能。

二、 vue-devtools 调试工具

vue 官方提供的vue-devtools调试工具，能够方便开发者对vue 项目进行调试与开发。Chrome 浏览器在线安装vue-devtools

  • vue 2.x 调试工具

    https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd

  • vue 3.x 调试工具

    https://chrome.google.com/webstore/detail/vuejs-devtools/ljjemllljcmogpfapbkkighbhhppjdbg

注意：vue2 和vue3 的浏览器调试工具不能交叉使用！

点击Chrome 浏览器右上角的 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-clRSTwtM-1672016260783)(Vue3课程笔记导读.assets/image-20221225220407446.png)] 按钮，选择更多工具-> 扩展程序-> Vue.js devtools 详细信息，并勾选如下的两个选项：
在这里插入图片描述

注意：修改完配置项，须重启浏览器才能生效！

在浏览器中访问一个使用了vue 的页面，打开浏览器的开发者工具，切换到Vue 面板，即可使用vue-devtools调试当前的页面。
在这里插入图片描述

三、环境配置

  1. 开发环境：Vite3+ Vue3

    • 兼容性：Vite 需要 Node.js版本 14.18+，16+。然而，有些模板需要依赖更高的 Node 版本才能正常运行，当你的包管理器发出警告时，请注意升级你的 Node 版本。
    • Vue3 采用组合式 API

  2. 官方推荐的 IDE 配置： Visual Studio Code

  3. Vite 搭建脚手架：

    执行如下命令初始化项目

    npm init vue@latest

    这一指令将会安装并执行 create-vue，它是 Vue 官方的项目脚手架工具。你将会看到一些诸如 TypeScript 和测试支持之类的可选功能提示：

    ✔ Project name: … <your-project-name>
✔ Add TypeScript? … No / Yes
✔ Add JSX Support? … No / Yes
✔ Add Vue Router for Single Page Application development? … No / Yes
✔ Add Pinia for state management? … No / Yes
✔ Add Vitest for Unit testing? … No / Yes
✔ Add Cypress for both Unit and End-to-End testing? … No / Yes
✔ Add ESLint for code quality? … No / Yes
✔ Add Prettier for code formatting? … No / YesScaffolding project in ./<your-project-name>...
Done.

    如果不确定是否要开启某个功能，你可以直接按下回车键选择 No。在项目被创建后，通过以下步骤安装依赖并启动开发服务器：

    cd <your-project-name>
npm install
npm run dev

    注：也可以采用 vite 官方命令配置 vue 项目：

    npm init vite@latest
# or
npm create vite@latest

    安装 sass 预处理语言：

    npm install --save-dev sass

四、脚手架目录介绍

  • public 下面的不会被编译 可以存放静态资源
  • assets 下面可以存放可编译的静态资源
  • components 下面用来存放我们的组件
  • router 存放路由相关文件
  • stores 存放状态管理相关文件
  • App.vue 是全局组件
  • main.js 全局的 js 文件
  • index.html 非常重要的入口文件 （Vite 的入口文件是一个 html 文件，他刚开始不会编译这些 js 文件 只有当你用到的时候 如script src=“xxxxx.js” 会发起一个请求被vite拦截这时候才会解析js文件）
  • vite.config.js 这是vite的配置文件具体配置项 后面会详解

五、SFC 语法规范解析

*.vue 件都由三种类型的顶层语法块所组成：<template>、<script>、<style>

  • <template>
    • 每个 *.vue 文件最多可同时包含一个顶层 <template> 块。
    • 其中的内容会被提取出来并传递给 @vue/compiler-dom，预编译为 JavaScript 的渲染函数，并附属到导出的组件上作为其 render 选项。
  • <script>
    • 每一个*.vue文件可以有多个 <script> 块 (不包括<script setup>)
    • 该脚本将作为 ES Module 来执行。
    • 其默认导出的内容应该是 Vue 组件选项对象，它要么是一个普通的对象，要么是 defineComponent 的返回值。
  • <script setup>
    • 每个 *.vue 文件最多只能有一个 <script setup> 块 (不包括常规的 <script>)
    • 该脚本会被预处理并作为组件的 setup() 函数使用，也就是说它会在每个组件实例中执行。<script setup> 的顶层绑定会自动暴露给模板。更多详情请查看 <script setup> 文档。
  • <style>
    • 一个 *.vue 文件可以包含多个 <style> 标签。
    • <style>标签可以通过 scoped 或 module attribute (更多详情请查看 SFC 样式特性) 将样式封装在当前组件内。多个不同封装模式的 <style> 标签可以在同一个组件中混用。

附录：推荐采用国内淘宝镜像策略

全局安装淘宝镜像

npm install -g cnpm --registry=https://registry.npm.taobao.org

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

Android Studio 的github 工程克隆

Android Studio 的github 工程克隆

上文介绍了Android Studio 里的"Git 建立和简单操作。本文介绍从github 上的工程fork 和clone到本地&#xff0c;然后学习和改进。 本文参考 https://learntodroid.com/how-to-use-git-and-github-in-android-studio/ 克隆clone Github 仓库&#xff1a; 先 Fork 你选择…
阅读更多...
实战黑马苍穹外卖项目8.1-10.1

实战黑马苍穹外卖项目8.1-10.1

文章目录 软件开发的基本流程用户层网关层应用层数据层工具 数据库设计导入准备好的前端和后端工程基础工程代码分析完成员工功能完成菜品功能入门Redis实现店铺营业HttpClient微信小程序开发缓存Spring Cache实现地址功能用户下单实现订单推送状态apache对应的工具使用项目用到…
阅读更多...
无涯教程-Flutter - 数据库

无涯教程-Flutter - 数据库

SQLite" class"css-1occaib">SQLite数据库是基于事实和标准SQL的嵌入式数据库引擎&#xff0c;它是小型且经过时间考验的数据库引擎&#xff0c;sqflite软件包提供了许多函数&#xff0c;可以有效地与SQLite数据库一起使用&#xff0c;它提供了操作SQLite数据…
阅读更多...
ExpressLRS开源代码之框架结构

ExpressLRS开源代码之框架结构

ExpressLRS开源代码之框架结构 1. 源由2. Arduino应用框架3. ExpressLRS应用框架4. 硬件设计框架4.1 单天线4.2 双天线单PA4.3 双天线双PA 5. 应用软件设计6. 参考资料 1. 源由 最近为了理解《ExpressLRS开源之基本调试数据含义》&#xff0c;做了一些源代码的研读。 概念、文…
阅读更多...
基于costas环的载波同步系统matlab性能仿真

基于costas环的载波同步系统matlab性能仿真

目录 1.算法运行效果图预览 2.算法运行软件版本 3.部分核心程序 4.算法理论概述 5.算法完整程序工程 1.算法运行效果图预览 2.算法运行软件版本 matlab2022a 3.部分核心程序 ............................................................................ I_Dataroun…
阅读更多...
kubernetes进阶 (一) 环境搭建

kubernetes进阶 (一) 环境搭建

我是基于一台centos7.6的腾讯云主机进行操作的&#xff0c;配置为4C8G&#xff0c;之前的文档自己试着搭建发现有问题了&#xff0c;这里重新整理下笔记&#xff0c;集群版本选择1.22.2&#xff08;一年前搭的&#xff09;用的还不错 清理环境 之前我的环境可能装过docker或者什…
阅读更多...
Ansible学习笔记4

Ansible学习笔记4

file模块&#xff1a; file模块用于对文件相关的操作&#xff08;创建、删除、属性修改、软链接等&#xff09;touch是创建。 [rootlocalhost ~]# ansible group1 -m file -a "path/tmp/111 statetouch" 192.168.17.105 | CHANGED > {"ansible_facts"…
阅读更多...
[SpringBoot3]视图技术Thymeleaf

[SpringBoot3]视图技术Thymeleaf

七、视图技术Thymeleaf Thymeleaf是一个表现层的模板引擎&#xff0c;一般被使用在Web环境中&#xff0c;它可以处理HTML、XML、JS等文档&#xff0c;简单来说&#xff0c;它可以将JSP作为Java Web应用的表现层&#xff0c;有能力展示与处理数据。这样&#xff0c;同一个模板文…
阅读更多...
1. 安装Zookeeper

1. 安装Zookeeper

​ 1.下载 点击下载Zookeeper 单机版安装 安装Zookeeper前需要先安装jdk上传安装包rz解压安装包：tar -zxvf apache-zookeeper-3.6.0-bin.tar.gz -C /opt/app/zookeeper zookeeper目录结构：a. bin: 放置运行脚本和工具脚本b. conf: zookeeper 默认读取配置的目录，里面会有…
阅读更多...
docker安装gitlab

docker安装gitlab

安装gitlab sudo docker run --detach \--hostname gitlab \--publish 543:443 --publish 90:80 --publish 222:22 \ --name gitlab \--restart always \--volume $GITLAB_HOME/config:/etc/gitlab \--volume $GITLAB_HOME/logs:/var/log/gitlab \--volume $GITLAB_HOME/data:…
阅读更多...
Android 蓝牙开发（ 四 ）

Android 蓝牙开发（ 四 ）

前言 上一篇文章给大家分享了Kotlin版的Android蓝牙的基础知识和基础用法&#xff0c;不过上一篇都是一些零散碎片化的程序&#xff0c;&#xff0c;这一篇给大家分享Android蓝牙开发实战项目KotlinCompose的初步使用 效果演示 : Android Compose 蓝牙开发 Android蓝牙实战开发…
阅读更多...
基于Laravel通用型内容建站企业官网系统源码 可免费商用

基于Laravel通用型内容建站企业官网系统源码 可免费商用

是一个基于 Laravel 企业内容建站系统。模块市场拥有丰富的功能应用&#xff0c;支持后台一键快速安装&#xff0c;让开发者能快的实现业务功能开发。 系统完全开源&#xff0c;免费且不限制商业使用 2023年08月23日增加了以下12个特性&#xff1a; [新功能] 手机端Banner支持…
阅读更多...
qt creater11 翻译国际化教程教程:

qt creater11 翻译国际化教程教程:

先出效果图。 闲聊几句&#xff1a;qt这个翻译很方便&#xff0c;能直接导出项目里所有文字。 具体步骤如下&#xff1a; 在Qt中&#xff0c;我们可以使用QTranslator类来实现多语言切换。以下是一般步骤&#xff1a; 1. 在你的源代码中&#xff0c;所有需要翻译的字符串都…
阅读更多...
Git企业开发控制理论和实操-从入门到深入（四）｜Git的远程操作｜Gitee

Git企业开发控制理论和实操-从入门到深入（四）｜Git的远程操作｜Gitee

前言 那么这里博主先安利一些干货满满的专栏了&#xff01; 首先是博主的高质量博客的汇总&#xff0c;这个专栏里面的博客&#xff0c;都是博主最最用心写的一部分&#xff0c;干货满满&#xff0c;希望对大家有帮助。 高质量博客汇总 然后就是博主最近最花时间的一个专栏…
阅读更多...
OpenHarmony 应用 ArkUI 状态管理开发范例

OpenHarmony 应用 ArkUI 状态管理开发范例

本文转载自《#2023 盲盒码 # OpenHarmony 应用 ArkUI 状态管理开发范例》&#xff0c;作者&#xff1a;zhushangyuan_ 本文根据橘子购物应用&#xff0c;实现 ArkUI 中的状态管理。 在声明式 UI 编程框架中&#xff0c;UI 是程序状态的运行结果&#xff0c;用户构建了一个 UI …
阅读更多...
MySQL8.xx 解决1251 client does not support ..解决方案

MySQL8.xx 解决1251 client does not support ..解决方案

MySQL8.0.30一主两从复制与配置(一)_蜗牛杨哥的博客-CSDN博客 MySQL8.xx一主两从复制安装与配置 MySQL8.XX随未生成随机密码解决方案 一、客户端连接mysql&#xff0c;问题&#xff1a;1251 client does not support ... 二、解决 1.查看用户信息 备注&#xff1a;host为 % …
阅读更多...
Git和Github的基本用法

Git和Github的基本用法

目录 背景 下载安装 安装 git for windows 安装 tortoise git 使用 Github 创建项目 注册账号 创建项目 下载项目到本地 Git 操作的三板斧 放入代码 三板斧第一招: git add 三板斧第二招: git commit 三板斧第三招: git push 小结 &#x1f388;个人主页&#xf…
阅读更多...
iOS开发Swift-3-UI与按钮Button-摇骰子App

iOS开发Swift-3-UI与按钮Button-摇骰子App

1.创建新项目Dice 2.图标 删去AppIcon&#xff0c;将解压后的AppIcon.appiconset文件拖入Assets包。 3.将素材点数1-6通过网页制作成2x&#xff0c;3x版本并拖入Asset。 4.设置对应的UI。 5.拖入Button组件并设置style。 6.Ctrl加拖拽将Button拖拽到ViewController里&#xff0…
阅读更多...
5G NR：RACH流程 -- Msg1之选择正确的PRACH时频资源

5G NR：RACH流程 -- Msg1之选择正确的PRACH时频资源

PRACH的时域资源是如何确定的 PRACH的时域资源主要由参数“prach-ConfigurationIndex”决定。拿着这个参数的取值去协议38211查表6.3.3.2-2/3/4&#xff0c;需要注意根据实际情况在这三张表中进行选择&#xff1a; FR1 FDD/SULFR1 TDDFR2 TDD Random access preambles can onl…
阅读更多...
Python实现多子图绘制系统

Python实现多子图绘制系统

文章目录 修改DrawTypeDrawType的调用逻辑绘图逻辑源代码 Python绘图系统&#xff1a; &#x1f4c8;从0开始的3D绘图系统&#x1f4c9;一个3D坐标系&#xff0c;多个函数图表类型和风格&#xff1a;&#x1f4c9;极坐标绘图&#x1f4ca;散点图和条形图&#x1f4ca;混合类型…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023