服用5年份筑基丹 - Vue篇

前言

修仙之道,千回百转,每一步都充满了玄妙与机遇。在这条充满奇幻的修仙之路上,有一物至关重要,那便是筑基丹。此丹,凝聚了修仙者多年的心血与智慧,是修炼道路上的重要助力。

今日,我有幸得此五年份的筑基丹——Vue篇。此丹与寻常筑基丹不同,它专门针对Vue这一前端框架的修炼,蕴含着Vue的精髓与奥秘。服下此丹,将助我在Vue的修仙之路上更进一步,掌握更多高级技巧与深层次知识。

服下此丹,我仿佛进入了一个全新的世界。Vue的响应式系统、组件化开发、指令与过滤器等核心概念逐一浮现在我的脑海中。我开始深入理解Vue的源码,探究其内部实现原理,逐渐掌握Vue的高级特性与用法。

众道友速速服下这份筑基丹,以此巩固境界~

1. vue 中的 MVVM 模式 ⭐

MVVM 模式是一种设计思想。Model 代表数据模型,View 代表 UI 组件,ViewModel 监听模型数据的改变和控制视图行为、处理用户交互,将数据同步到 Model 中。

2. vue 中的 Virtual DOM ⭐

虚拟 DOM 本质上是一个 JS 对象,它反映了真实 DOM 的结构和内容。

  • 1.提供一个中间缓存,使得直接操作实际的 DOM(这通常是昂贵的操作)不再那么频繁。
  • 2.通过对比新旧虚拟 DOM 来计算出最小的变动,从而优化实际 DOM 的更新。

优缺点

  • 优点
    • 保证性能下限:普调一些 DOM 操作的实现,提供还不错的性能。
    • 无需手动操作 DOM:只需要写好 View-Model 的代码逻辑,框架会根据虚拟 DOM 和 数据双向绑定更新视图(View),极大提高我们的开发效率;
    • 跨平台:虚拟 DOM 本质上是 JavaScript 对象,而 DOM 与平台强相关,可以在任意平台实现,包括服务器端渲染、微信小程序等。
  • 缺点
    • 无法进行极致优化: 虽然虚拟 DOM + 合理的优化,足以应对绝大部分应用的性能需求,但在一些性能要求极高的应用中虚拟 DOM 无法进行针对性的极致优化。

实现原理

  • 用 JavaScript 对象模拟真实 DOM 树,对真实 DOM 进行抽象;
  • diff 算法 — 比较两棵虚拟 DOM 树的差异;
  • pach 算法 — 将两个虚拟 DOM 对象的差异应用到真正的 DOM 树。

3. vue 中的 生命周期 ⭐

总共分为 8 个阶段,具体为:创建前/后载入前/后更新前/后销毁前/后

  • 创建前/后:
    • beforeCreated 阶段:vue 实例的挂载元素 $el 和数据对象 data 都为 undefined,还未初始化;
    • created 阶段,vue 实例的数据对象 data 有了,$el 还没有。
  • 载入前/后:
    • beforeMount 阶段,vue 实例的 $el 和 data 都初始化了,但还是挂载之前为虚拟的 dom 节点,data.message 还未替换;
    • mounted 阶段,vue 实例挂载完成,data.message 成功渲染。
  • 更新前/后:当 data 变化时,会触发 beforeUpdateupdated 方法。
  • 销毁前/后:在执行 destroy 方法后,对 data 的改变不会再触发周期函数,说明此时 vue 实例已经解除了事件监听以及和 dom 的绑定,但是 dom 结构依然存在。

4. vue 中的 Diff 算法 ⭐

  • 作用:修改 dom 的一小段,不引起 dom 树的重绘
  • 实现原理:diff 算法将 virtual dom 的某个节点数据改变后生成的新的 vnode 与旧节点进行比较,并替换为新的节点,具体过程就是调用 patch 方法,比较新旧节点,一边比较一边给真实的 dom 打补丁进行替换。

5. vue 中的 双向数据绑定 ⭐

Object.defineProperty 方法(vue2)

function observe(obj, callback) {const newObj = {}Object.keys(obj).forEach(key => {Object.defineProperty(newObj, key, {configurable: true,enumerable: true,get() {return obj[key]},// 当属性的值被修改时,会调用set,这时候就可以在set里面调用回调函数set(newVal) {obj[key] = newValcallback(key, newVal)}})})return newObj
}const obj = observe({name: '123',},(key, value) => {console.log(`[${key}]值被修改,为[${value}]`)}
)// 输出:name的值被修改,为321
obj.name = '321'

es6 Proxy 方法(vue3)

function observe(obj, callback) {return new Proxy(obj, {get(target, key) {return target[key]},set(target, key, value) {target[key] = valuecallback(key, value)}})
}const obj = observe({name: '123',},(key, value) => {console.log(`[${key}]值被修改,为[${value}]`)}
)// 输出:name的值被修改,为321
obj.name = '321'

Object.defineProperty 与 Proxy 优劣对比

proxy 优势

  • Proxy 可以直接监听对象而非属性;
  • Proxy 可以直接监听数组的变化;
  • Proxy 有多达 13 种拦截方法,不限于 applyownKeysdeletePropertyhas 等等;
  • Proxy 返回的是一个新对象,我们可以只操作新的对象达到目的,而 Object.defineProperty 只能遍历对象属性直接修改;
  • Proxy 作为新标准将受到浏览器厂商重点持续的性能优化

Object.defineProperty 优势

  • 兼容性好,支持 IE9,而 Proxy 的存在浏览器兼容性问题,而且无法用 polyfill 磨平,因此 Vue 的作者才声明需要等到下个大版本( 3.0 )才能用 Proxy 重写。

6. vue 中的 v-model ⭐

  • 定义:v-model 就是 vue 的双向绑定的指令
  • 使用场景:一般用于表单 inputtextareaselect 等元素上创建双向数据绑定

原理

input 表单元素为例:

<input v-model='val'>等同于<input v-bind:value="val" v-on:input="val = $event.target.value">

7. vue 中的 组件通信 ⭐

  • 父组件向子组件传递数据:
    • 父组件通过 props 属性传递数据;
    • 子组件通过 props 属性接收数据。
  • 子组件向父组件传递数据:
    • 子组件通过 $emit 方法传递数据;
    • 父组件通过 v-on 方法接收数据。
  • 兄弟组件之间的通信:
    • 可以在父组件中作为中间人进行传递。
  • 跨级组件之间的通信:
    • 祖先组件中定义一个 provide 属性,通过该属性向所有子孙组件传递数据;
    • 子孙组件中通过 inject 属性接收数据。
  • 全局状态管理
    • 使用 VuexPinia 等状态管理库
  • 使用 url 传参,跨页面通信
  • 使用 EventBus 事件总线,跨页面通信
  • 使用本地缓存,localStoragesessionStorage, Cookies

8. vue 中的 Vuex ⭐

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。每一个 Vuex 应用的核心就是 store(仓库)。“store” 基本上就是一个容器,它包含着你的应用中大部分的状态 ( state )。

(1)Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候,若 store 中的状态发生变化,那么相应的组件也会相应地得到高效更新。

(2)改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。这样使得我们可以方便地跟踪每一个状态的变化。
主要包括以下几个模块:

  • State:定义了应用状态的数据结构,可以在这里设置默认的初始状态。
  • Getter:允许组件从 Store 中获取数据,mapGetters 辅助函数仅仅是将 store 中的 getter 映射到局部计算属性。
  • Mutation:是唯一更改 store 中状态的方法,且必须是同步函数。
  • Action:用于提交 mutation,而不是直接变更状态,可以包含任意异步操作。
  • Module:允许将单一的 Store 拆分为多个 store 且同时保存在单一的状态树中。

9. vue 中的 nextTick ⭐

  • 作用:dom 更新之后执行回调函数;
  • 实现原理:通过 MutationObserversetTimeout 来实现。

与 setTimeout 对比

  • 都是 异步函数
  • nextTicksetTimeout 优先执行

10. v-show 与 v-if 的区别 ⭐

  • v-show:元素总是会被渲染,通过控制元素的 display 属性来控制显示隐藏;
  • v-if:真正的条件渲染,v-if 切换有一个局部编译/卸载的过程,v-if 条件不满足时,条件块内的事件监听器和子组件都会被销毁。

11. computed 和 watch 的区别 ⭐

  • computed:用于计算属性,依赖其他属性,当依赖属性变化时,计算属性会重新计算;
  • watch:用于监听属性,当属性变化时,会执行监听函数。

应用场景

  • 当我们需要进行数值计算,并且依赖于其它数据时,应该使用 computed,因为可以利用 computed 的缓存特性,避免每次获取值时,都要重新计算;
  • 当我们需要在数据变化时执行异步或开销较大的操作时,应该使用 watch,使用 watch 选项允许我们执行异步操作 ( 访问一个 API ),限制我们执行该操作的频率,并在我们得到最终结果前,设置中间状态。这些都是计算属性无法做到的。

12. vue 中的 keep-alive ⭐

  • 作用:缓存组件,避免重复渲染;
  • 特性:
    • 一般结合路由和动态组件一起使用,用于缓存组件;
    • 提供 includeexclude 属性,两者都支持字符串或正则表达式, include 表示只有名称匹配的组件会被缓存,exclude 表示任何名称匹配的组件都不会被缓存 ,其中 exclude 的优先级比 include 高;
    • 对应两个钩子函数 activateddeactivated ,当组件被激活时,触发钩子函数 activated,当组件被移除时,触发钩子函数 deactivated

13. vue-router 路由模式 ⭐

vue-router 有 3 种路由模式:hashhistoryabstract

vue 源码

switch (mode) {case  'history' :this.history = new HTML5HIstory(this, option.base)breakcase   'hash' :this.history = new HashHistory(this, option.base,  this.fallback)breakcase 'abstract' :this.history = new AbstractHistory(this, options.base)breakdefault :if (process.env.NODE_ENV !== 'production') {assert(false,  `invalid mode : ${mode}`)}
}    
  • hash:使用 URL hash 值来作路由。支持所有浏览器,包括 不支持 HTML5 History Api 的浏览器(# 形式拼接)
  • history: 依赖 HTML5 History API 和服务器配置。具体可以查看 HTML5 History 模式;(/ 形式拼接)
  • abstract: 支持所有 JavaScript 运行环境,如 Node.js 服务器端。如果发现没有浏览器的 API,路由会自动强制进入这个模式。

14. vue3 的新特性 ⭐

生命周期

vue2vue3
beforeCreatesetup()
createdsetup()
beforeMountonBeforeMount
mountedonMounted
beforeUpdateonBeforeUpdate
updatedonUpdated()
beforeDestroyonBeforeUnmount()
destroyedonUnmounted()
errorCapturedonErrorCaptured()

使用 setup 代替了之前的 beforeCreatecreated,其他生命周期名字有些变化,功能都是没有变化的

响应式原理

  • vue2:Object.defineProperty
  • vue3:es6 Proxy

具体详情:5. vue 中的 双向数据绑定 ⭐

Composition API

  • reactive:响应式代理对象,该对象在被访问或修改时会触发相应的依赖更新。
  • ref:响应式引用对象,该对象在被访问或修改时会触发相应的依赖更新。
  • computed:用于创建计算属性。当依赖的数据变化时,计算属性会自动更新。
  • watch:需要显式指定侦听的数据源和回调函数,支持立即执行、深度侦听等选项。
  • watchEffect:自动侦听回调函数中使用的响应式数据,无需显式指定数据源。当回调函数中使用的数据变化时,watchEffect 会自动重新执行回调函数。
  • setup:Composition API 的入口函数,用于替代 Vue 2 中的 data、methods、computed 等选项。

新的组件

  • Teleport:是一种能够将我们的组件 html 结构移动到指定位置的技术。
<teleport to="body"><div class="mask" v-if="isShow"><div class="dialog"  ><h4>弹窗</h4><button @click="isShow = false">关闭</button></div></div>
</teleport>
  • Suspense:等待异步组件时渲染一些额外内容,让应用有更好的用户体验
<template><Suspense><template #default><AsyncComp /></template><template #fallback><div>加载中...</div></template></Suspense>
</template><script setup>
import { defineAsyncComponent } from 'vue'const AsyncComp = defineAsyncComponent({// 异步加载的组件loader: () => import('./MyAsyncComponent.vue'),// 加载失败时的处理error: () => import('./ErrorComponent.vue'),// 加载时的占位符loadingComponent: LoadingComponent
})
</script>

其他新特性

  • 增强的渲染优化: Vue 3 的渲染系统进行了优化,包括块级作用域插槽、更新优化等。
  • TypeScript 支持:拥有更好的类型推断和自动完成
  • 自定义渲染器API:Vue 3 提供了自定义渲染器 API,使得 Vue 可以在不同平台上运行,例如Web, WeChat小程序等。

15. vue 项目优化点 ⭐

代码层面

  • v-ifv-show 区分使用场景
  • computedwatch 区分使用场景
  • v-for 遍历必须为 item 添加 key,且避免同时使用 v-if
  • 长列表性能优化
    • 虚拟滚动
    • 骨架屏
    • 懒加载
    • 服务端渲染
  • 图片懒加载
  • 第三方插件按需引入
  • 优化无限列表性能
    • 图片懒加载
    • 虚拟列表
  • 预渲染

Webpack 层面

  • 图片压缩
  • 减少 ES6 转为 ES5 消耗
    • babel-loader 开启 cacheDirectory 缓存
    • babel-loader 开启多进程打包
    • babel-loader 排除 node_modules 目录
    • 使用 thread-loader 开启多进程打包
  • 使用 Tree Shaking 优化代码
    • 清除无用代码
  • 提取公共代码
  • 模板预编译
  • 提取组件的 CSS
  • 优化 SourceMap

服务器层面

  • 浏览器缓存
  • CDN
  • gzip 压缩

持续更新中…

Vue 部分 | 路漫漫其修远兮 - Xaivor

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

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

相关文章

面试经典150题——路径总和

​ 1. 题目描述 2. 题目分析与解析 2.1 思路一 注意题目的关键点&#xff1a;判断该树中是否存在 根节点到叶子节点 的路径&#xff0c;起点是root&#xff0c;终点是叶子节点。 那么我们就可以从根节点按照层序遍历的方式&#xff0c;从根节点从根到 叶子不断对路径进行加…

前端H5动态背景登录页面(下)

最近正好有点儿时间&#xff0c;把之前没整理完的前端动态背景登录页面给整理一下&#xff01;这是之前的连接前端H5动态背景登录页面&#xff08;上&#xff09;&#xff0c;这主要是两个登陆页面&#xff0c;一个彩色气泡&#xff0c;一个动态云朵&#xff0c;感兴趣的可以点…

Python程序设计教案

文章目录&#xff1a; 一&#xff1a;软件环境安装 第一个软件&#xff1a;pycharm 第二个软件&#xff1a;thonny 第三个软件&#xff1a;IDIE&#xff08;自带的集成开发环境&#xff09; 二&#xff1a;相关 1.规范 2.关键字 3.Ascll码表 三&#xff1a;语法基础…

linux nginx开机自启

安装位置/usr/local/nginx监听端口80配置文件地址/usr/local/nginx/conf/ 注册服务 cd /usr/lib/systemd/system/vim nginx.service nginx.service 内容 [Unit] DescriptionThe NGINX HTTP and reverse proxy server Aftersyslog.target network.target[Service] Typeforki…

离开A页面时,取消A页面的axios接口数据请求

需求&#xff1a;从A页面跳转至B页面时&#xff0c;要取消A页面的axios请求&#xff1b;有时候&#xff0c;我们可能需要在发送请求后取消它&#xff0c;比如用户在请求还未完成时离开了当前页面或者执行了其他操作&#xff0c;本文将介绍如何在使用 Axios 发送请求时取消这些请…

Apache反向代理的功能和設置

Apache反向代理是Apache HTTP伺服器的一種功能&#xff0c;可以讓伺服器接收客戶端的請求並將其轉發到其他伺服器&#xff0c;然後將這些伺服器的回應返回給客戶端。這樣&#xff0c;客戶端就像直接訪問Apache伺服器一樣&#xff0c;而實際上是在訪問其他的伺服器。 Apache反向…

【Altium Designer 22原理图,PCB】

Altium Designer 22-原理图&#xff0c;PCB ■ AD22■ 工程■ 工程之外的文件 ■ AD22-画原理图■ 原理图库的设计■ 操作心得■ 元件库来源■ 检查原理图库的正确性并生成报告 ■ 原理图的设计■ 原理图页的大小设置■ 设置栅格100mil■ 放置元器件■ 元件的复制&#xff0c;剪…

从 MySQL 到 ClickHouse 实时数据同步 —— Debezium + Kafka 表引擎

目录 一、总体架构 二、安装配置 MySQL 主从复制 三、安装配置 ClickHouse 集群 四、安装 JDK 五、安装配置 Zookeeper 集群 六、安装配置 Kafaka 集群 七、安装配置 Debezium-Connector-MySQL 插件 1. 创建插件目录 2. 解压文件到插件目录 3. 配置 Kafka Connector …

常见UI设计模式有哪些?从小白到资深必学

通过了解如何以及何时使用&#xff0c;每种 UI 设计模式都有其特定的目的&#xff0c;可以创建一个一致高效的界面。UI 设计模式为用户界面设计者提供了一种通用语言&#xff0c;并为网站和应用程序的用户提供了一致性。本指南&#xff0c;即时设计总结了 UI 设计模式和 UI 设计…

执法记录仪如何防抖

影像记录发展至今&#xff0c;防抖已是必备要素&#xff0c;实际拍摄过程中&#xff0c;或通过硬件的运动补偿&#xff0c;或通过软件的加工处理&#xff0c;来抵消抖动对拍摄的影响。 到现在为止&#xff0c;已经有哪些防抖技术&#xff0c;它们各有什么优劣呢&#xff1f; …

HTTP协议的总结

参考 https://www.runoob.com/http/http-tutorial.html 1.简介 HTTP&#xff08;超文本传输协议&#xff0c;Hypertext Transfer Protocol&#xff09;是一种用于从网络传输超文本到本地浏览器的传输协议。它定义了客户端与服务器之间请求和响应的格式。HTTP 工作在 TCP/IP 模…

美客多、Lazada商家必须知道的养号技巧,助力打造爆款!

在Lazada平台开店&#xff0c;每个商家都渴望打造出自己的爆款产品。爆款不仅能为店铺带来大量流量&#xff0c;还能显著提升店铺和其他产品的转化率。然而&#xff0c;要想成功打造爆款&#xff0c;并非易事&#xff0c;需要掌握一些关键的小技能。 在Lazada平台&#xff0c;商…

每日OJ题_BFS解决拓扑排序③_力扣LCR 114. 火星词典

目录 力扣LCR 114. 火星词典 解析代码 力扣LCR 114. 火星词典 LCR 114. 火星词典 难度 困难 现有一种使用英语字母的外星文语言&#xff0c;这门语言的字母顺序与英语顺序不同。 给定一个字符串列表 words &#xff0c;作为这门语言的词典&#xff0c;words 中的字符串已…

十五、Java中I/O流

1、流的基本概念 1)流的概念 流:在Java中所有的数据都是使用流读写的。流是一组有顺序的,有起点和终点的字节集合,是对数据传输的总称或抽象。即数据在两设备间的传输称为流,流的本质就是数据传输,根据数据传输特性将流抽象为各种类。 (1)按照流向分:输入流、输出流。…

网络靶场实战-物联网安全qiling框架初探

背景 Qiling Framework是一个基于Python的二进制分析、模拟和虚拟化框架。它可以用于动态分析和仿真运行不同操作系统、处理器和体系结构下的二进制文件。除此之外&#xff0c;Qiling框架还提供了易于使用的API和插件系统&#xff0c;方便使用者进行二进制分析和漏洞挖掘等工作…

【求助】西门子S7-200PLC定时中断+数据归档的使用

前言 已经经历了种种磨难来记录我的数据&#xff08;使用过填表程序、触摸屏的历史记录和数据归档&#xff09;之后&#xff0c;具体可以看看这篇文章&#xff1a;&#x1f6aa;西门子S7-200PLC的数据归档怎么用&#xff1f;&#xff0c;出现了新的问题。 问题的提出 最新的…

网工交换基础——生成树协议(01)

一、生成树的技术概述 1、技术背景 二层交换机网络的冗余性导致出现二层环路&#xff1a; 人为因素导致的二层环路问题&#xff1a; 二层环路带来的网络问题&#xff1a; 生成树协议的概念&#xff1a; STP(Spanning Tree Protocol)是生成树协议的英文缩写。该协议可应用于在网…

代码随想录算法训练营第三十七天| 738.单调递增的数字,968.监控二叉树

目录 题目链接&#xff1a;738.单调递增的数字 思路 代码 题目链接&#xff1a;968.监控二叉树 思路 代码 总结 题目链接&#xff1a;738.单调递增的数字 思路 既然是求单调递增的数字&#xff0c;要判断相邻数字之间的大小关系。有两种遍历顺序&#xff0c;从前往后和从…

面向对象练习坦克大兵游戏

游戏玩家&#xff08;名称&#xff0c;生命值&#xff0c;等级&#xff09;&#xff0c;坦克&#xff0c;大兵类&#xff0c;玩家之间可以相互攻击&#xff0c;大兵拥有武器&#xff0c;用枪弹和反坦克炮弹&#xff0c;造成攻击不同&#xff0c;坦克攻击值固定&#xff0c;请设…

设计模式-六大原则

设计模式的六大原则是软件工程中的基本概念&#xff0c;使得构建可维护、可扩展和可重用的代码。 1.单一职责原则&#xff08;Single Responsibility Principle&#xff09;&#xff1a;一个类或方法应该只有一个引起变化的原因&#xff0c;确保类或模块的功能高度内聚。 案例&…