vue2.6源码分析

vue相关文档

vue-cli官方文档
vuex官方文档
vue-router 官方文档
vue2.6源码地址

如何调试源码

package.json 添加了--sourcemap

"scripts": {"dev": "rollup -w -c scripts/config.js --environment TARGET:web-full-dev --sourcemap"
}

新增html文件

<script src="./dist/vue.js"></script>
<div id="app">{{a.b}}</div>
<script>var vm = new Vue({el: "#app",data: {a: {b: 1,},},mounted() {this.a.b = 2;},});
</script>

入口文件在哪里

源码入口文件 scripts/config.js里查找web-full-dev,于是如果js文件为 entry-runtime-with-compiler.js

ctrl+shift+p 输入文件名字 就可以找到该文件
很多时候会用到别名,想快速找到该文件可以复制路径和上面的方法一样 也可以找到
import { warn, cached } from 'core/util/index'
别名文件是alias.js 其中一个别名如下core: resolve('src/core'),

vue3特性

1、更快:
虚拟DOM重写
优化slots的生成
静态树提升
静态属性提升
基于Proxy的响应式系统
2、更小: 通过摇树优化核心库体积
3、更容易维护: TypeScript + 模块化
4、更加友好:
跨平台:编译器核心和运行时核心与平台无关,使得Vue更容易与任何平台(Web、
Android、iOS)一起使用
5、更容易使用
改进的TypeScript支持,编辑器能提供强有力的类型检查和错误及警告
更好的调试支持
独立的响应化模块
Composition API

虚拟 DOM 重写----------期待更多的编译时提示来减少运行时开销,使用更有效的代码来创建虚拟节点。
组件快速路径+单个调用+子节点类型检测

跳过不必要的条件分支
JS引擎更容易优化
在这里插入图片描述

优化slots生成 -----------vue3中可以单独重新渲染父级和子级

确保实例正确的跟踪依赖关系
避免不必要的父子组件重新渲染
在这里插入图片描述

静态树提升(Static Tree Hoisting)---------使用静态树提升,这意味着 Vue 3 的编译器将能够检测到什么是静态的,然后将其提升,从而降低了渲
染成本。

跳过修补整棵树,从而降低渲染成本
即使多次出现也能正常工作
在这里插入图片描述

静态属性提升 ----------------------------- 使用静态属性提升,Vue 3打补丁时将跳过这些属性不会改变的节点。

在这里插入图片描述

基于 Proxy 的数据响应式 ----------- Vue 2的响应式系统使用 Object.defineProperty 的getter 和 setter。Vue 3 将使用 ES2015 Proxy 作为其观察机制,这将会带来如下变化:

组件实例初始化的速度提高100%
使用Proxy节省以前一半的内存开销,加快速度,但是存在低浏览器版本的不兼容
为了继续支持 IE11,Vue 3 将发布一个支持旧观察者机制和新 Proxy 版本的构建

在这里插入图片描述

高可维护性 --------- Vue 3 将带来更可维护的源代码。它不仅会使用 TypeScript,而且许多包被解耦,更加模块化。

watcher底层原理

在这里插入图片描述

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

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

相关文章

linux apt update错误提示修复

错误提示&#xff1a; E: Release file for http://security.debian.org/dists/bullseye-security/InRelease is expired (invalid since 15d 14h 45min 26s). Updates for this repository will not be applied. E: Release file for http://ftp.jp.debian.org/debian/dists/b…

【Hello Go】Go语言并发编程

并发编程 概述基本概念go语言的并发优势 goroutinegoroutine是什么创建goroutine如果主goroutine退出runtime包GoschedGoexitGOMAXPROCS channel无缓冲的channel有缓冲的channelrange和close单向channel 定时器TimerTicker Select超时 概述 基本概念 并行和并发概念 并行 &…

CVE-2023-6099:优卡特脸爱云一脸通智慧管理平台SystemMng.ashx接口未授权漏洞复现

文章目录 优卡特脸爱云一脸通智慧管理平台未授权SystemMng.ashx接口漏洞复现&#xff08;CVE-2023-6099&#xff09; [附POC]0x01 前言0x02 漏洞描述0x03 影响版本0x04 漏洞环境0x05 漏洞复现1.访问漏洞环境2.构造POC3.复现 0x06 修复建议 优卡特脸爱云一脸通智慧管理平台未授权…

mysql字符串转为数字的三种方法、字符串转日期

隐式转换 在MySQL中&#xff0c;使用0运算符可以将一个非数字的值隐式地转换为数字。这在进行数学运算或比较操作时非常有用。 需要注意的是&#xff0c;在使用0进行隐式转换时&#xff0c;MySQL会尽可能将字符串转换为数字。如果字符串不能转换为数字&#xff0c;则会返回0。…

【解决】HDFS JournalNode启动慢问题排查

文章目录 一. 问题描述二. 问题分析1. 排查机器性能2. DNS的问题 三. 问题解决 一句话&#xff1a;因为dns的问题导致journalnode启动时很慢&#xff0c;通过修复dns对0.0.0.0域名解析&#xff0c;修复此问题。 一. 问题描述 从journalnode启动到服务可用&#xff0c;完成RPC…

使用Python将图片转换为PDF

将图片转为 PDF 的主要原因之一是为了方便共享和传输。此外&#xff0c;将多张图片合并成一个 PDF 文件还可以简化文件管理。之前文章详细介绍过如何使用第三方库Spire.PDF for Python将PDF文件转为图片&#xff0c;那么本文介绍使用同样工具在Python中实现图片转PDF文件的功能…

【OpenCV+OCR】计算机视觉:识别图像验证码中指定颜色文字

文章目录 1. 写在前面2. 读取验证码图像3. 生成颜色掩码4. 生成黑白结果图5. OCR文字识别6. 测试结果 【作者主页】&#xff1a;吴秋霖 【作者介绍】&#xff1a;Python领域优质创作者、阿里云博客专家、华为云享专家。长期致力于Python与爬虫领域研究与开发工作&#xff01; 【…

Spring Security(安全框架,必须登录成功才能访问指定资源)

一、背景知识 1、Spring Security 是一个能够为基于Spring的企业应用系统提供声明式的安全访问控制解决方案的安全框架。它提供了一组可以在Spring应用上下文中配置的Bean&#xff0c;充分利用了Spring IoC&#xff0c;DI&#xff08;IOC: 控制反转Inversion of Control ,DI:D…

24路电磁锁控板的特点和主要参数

智能快递柜、智能生鲜柜、电子存储柜、超市寄存柜、智能送餐柜、电子更衣柜、档案柜等物联网终端设备&#xff0c;都是采用电磁锁控制&#xff0c;这种电磁锁控制板俗称锁控板。锁控板可以远程控制储物柜的开关以及远程监控并提供锁的反馈信号。沐渥开发的24路电磁锁控板可以控…

AI:87-基于深度学习的街景图像地理位置识别

🚀 本文选自专栏:人工智能领域200例教程专栏 从基础到实践,深入学习。无论你是初学者还是经验丰富的老手,对于本专栏案例和项目实践都有参考学习意义。 ✨✨✨ 每一个案例都附带有在本地跑过的代码,详细讲解供大家学习,希望可以帮到大家。欢迎订阅支持,正在不断更新中,…

OpenAI 曾收到 AI 重大突破警告;半独立的 OpenAI 比与微软合并更好丨 RTE 开发者日报 Vol.91

开发者朋友们大家好&#xff1a; 这里是 「RTE 开发者日报」 &#xff0c;每天和大家一起看新闻、聊八卦。我们的社区编辑团队会整理分享 RTE &#xff08;Real Time Engagement&#xff09; 领域内「有话题的 新闻 」、「有态度的 观点 」、「有意思的 数据 」、「有思考的 文…

ubuntu下docker环境使用GPU配置

本文主要讲述整个命令流程&#xff0c;具体讲解请看官网nvidia-容器工具包和一篇总结得很详细的博文docker使用GPU总结 docker的版本必须安装19.0版本以上的&#xff0c;这里也只讲19.0版本以上的使用方法 首先设置一下网络信息 curl -fsSL https://nvidia.github.io/libnvi…

LeetCode131. Palindrome Partitioning

文章目录 一、题目二、题解 一、题目 Given a string s, partition s such that every substring of the partition is a palindrome . Return all possible palindrome partitioning of s. Example 1: Input: s “aab” Output: [[“a”,“a”,“b”],[“aa”,“b”]] Exa…

工具【1、计算时间差2、获取当天时间前后七天时间3、根据当前数据的位置,在数组中插入数据4、数组中,某个属性相同的数据放在一块,如把某个日期相同的相连一起】

生成UUID /*** 唯一的随机字符串&#xff0c;用来区分每条数据* returns {string}*/ export function getUid() {return xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx.replace(/[xy]/g, (c) > {const r (Math.random() * 16) | 0;const v c x ? r : (r & 0x3) | 0x8;retu…

【图文详解】SiamFC++与图注意力的强强联合:单目标追踪系统

1.研究背景与意义 随着计算机视觉技术的不断发展&#xff0c;单目标追踪&#xff08;Single Object Tracking, SOT&#xff09;作为计算机视觉领域的一个重要研究方向&#xff0c;已经在许多实际应用中得到了广泛的应用。单目标追踪系统可以通过分析视频序列中的目标运动&…

服务器流量包扣减规则

服务器买的流量包,一般指的是上行带宽,下行通常是不限的 上行和下行是针对服务器而言的 客户端上传文件给服务器,对服务器而言它是在下载,所以对服务器而言他是用的下行带宽(下行流量) 客户端从服务器下载文件,对服务器而言它是在上传,所以对服务器而言他是用的上行带宽(上行…

大数据量条件SQL查询内存处理方案以及数据过滤算法优化

MySQL是一个广泛使用的关系型数据库管理系统。通过SQL语言进行数据操作和查询&#xff0c;还支持多用户、多线程和分布式操作等功能。 在实际使用中&#xff0c;我们会遇到各种查询条件&#xff0c;如字段名、表名、逻辑运算符、比较运算符、函数等。其中&#xff0c;有些查询…

浅析智慧社区建设趋势及AI大数据监管平台方案设计

一、背景与需求 伴随着社会与经济的发展&#xff0c;人们对生活质量的要求越来越高&#xff0c;与此同时&#xff0c;新兴技术的进步也促进了智慧社区市场的逐步成熟。智慧社区是社区管理的一种新理念&#xff0c;是新形势下城市与社会管理的一种创新模式。 在上海、杭州、深…

在.bashrc文件修改环境变量的做法

作者&#xff1a;朱金灿 来源&#xff1a;clever101的专栏 为什么大多数人学不会人工智能编程&#xff1f;>>> ~/.bashrc文件是linux下保存环境变量的系统文件。原以为使用sed命令修改.bashrc文件&#xff0c;实际上不行&#xff0c;需要使用echo命令。具体示例如下…

02-详细介绍Java8新特性方法引用,构造引用,数组引用

方法/构造/数组引用 方法引用 当要传递给Lambda体的操作已经有实现的方法时就可以使用方法引用,方法引用和构造器引用就是为了简化Lambda表达式 方法引用可以看做是Lambda表达式深层次的表达,方法引用本质还是Lambda表达式所以也是函数式接口的一个实例通过方法的名字来指向…