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.hqwc.cn/news/210158.html

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

相关文章

Webstorm 插件文件目录颜色分析——白蓝绿红黄灰

Webstorm 插件文件目录【白色、蓝色、绿色、红色、黄色、灰色】对应当前文件发生什么了&#xff0c;即文件夹当前状态。 WebStrom配置好git或SVN后文件颜色代表的含义&#xff1a; 白色&#xff1a;本地无修改内容 蓝色&#xff1a;文件内容有修改&#xff0c;暂未提交到git…

使用hping3和wrk模拟泛洪

一、hping3 1、syn随机ip泛洪 hping3 --flood -S --rand-source -p 端口 目标ip hping3 -c 10000 -d 120 -S -p 80 --flood --rand-source 192.168.112.130​说明&#xff1a; -c 100000 packets 发送的数量 -d 120 packet的大小 -S 只发送syn packets -p 80 目标端口&am…

App Cleaner Uninstaller Pro 一键清理,彻底卸载Mac应用

随着科技的不断发展&#xff0c;Mac电脑已经成为许多用户工作和娱乐的首选。然而&#xff0c;随着时间的推移&#xff0c;我们的Mac电脑上可能会堆积大量的无效文件和冗余数据&#xff0c;这不仅占用了宝贵的磁盘空间&#xff0c;还可能影响到系统的运行速度。为了解决这一问题…

Spark---基于Standalone模式提交任务

Standalone模式两种提交任务方式 一、Standalone-client提交任务方式 1、提交命令 ./spark-submit --master spark://mynode1:7077 --class org.apache.spark.examples.SparkPi ../examples/jars/spark-examples_2.11-2.3.1.jar 100 或者 ./spark-submit --master spark…

安徽省广德市选择云轴科技ZStack Cloud云平台建设县级智慧城市

信创是数字中国建设的重要组成部分&#xff0c;也是数字经济发展的关键推动力量。作为云基础软件企业&#xff0c;云轴科技ZStack产品矩阵全面覆盖数据中心云基础设施&#xff0c;ZStack信创云首批通过可信云《一云多芯IaaS平台能力要求》先进级&#xff0c;是其中唯一兼容四种…

什么是Zero-shot(零次学习)

1 Zero-shot介绍 Zero-shot学习&#xff08;ZSL&#xff09;是机器学习领域的一种先进方法&#xff0c;它旨在使模型能够识别、分类或理解在训练过程中未见过的类别或概念。这种学习方法对于解决现实世界中常见的长尾分布问题至关重要&#xff0c;即对于一些罕见或未知类别的样…

为何设计师都在用这个原型样机资源网站?

谈论原型样机素材模板&#xff0c;这个话题对设计师来说如同老朋友一般熟悉。设计师们在创作完毕后&#xff0c;为了更淋漓尽致地展示他们的设计成果&#xff0c;通常会将其放置在真实的样机素材模板中。这种原型样机素材可以让设计作品迅速且清晰地呈现在真实环境中。找到一个…

一张图,了解美格智能高算力AI模组

美格智能高算力A模组&#xff0c;澎湃算力让AI触手可及&#xff01;

网络运维与网络安全 学习笔记2023.11.23

网络运维与网络安全 学习笔记 第二十四天 今日目标 VRRP负载均衡、BFD原理与配置、BFD典型应用 DHCP工作原理、全局模式DHCP VRRP负载均衡 VRRP单组缺陷 每网段存在一个VRRP组&#xff0c;缺点如下&#xff1a; 主网关数据转发压力大 备份网关不转发任何数据 网络设备利用…

给数据库查询结果添加一个额外的自增编号

1、在mysql数据库可以执行的sql SELECT( i : i 1 ) num,M.* FROMuser M,( SELECT i : 0 ) AS ID GROUP BYM.ID ORDER BYM.create_time SELECT (i :i 1) 是为了生成自增的序列号字段 SELECT i : 0 是为了将i进行初始化每次查询的序列号都会从1开始进行排序生成序列号 在…

idea编译问题导致接口调用不通

问题背景&#xff1a; 1.idea版本2021&#xff0c;springboot&#xff0c;父子maven项目&#xff0c;创建了一个新的model。启动之后&#xff0c;调试controller接口&#xff0c;接口一直报404。 问题分析&#xff1a; 1.查看编译后的文件&#xff0c;发现java代码一直没编译…

20230511 Windows Ubuntu vscode remote-ssh 连接配置

参考 &#xff1a; VSCode SSH 连接远程ubuntu Linux 主机 VSCode通过Remote SSH扩展连接到内网Ubuntu主机 Ubuntu 安装 sudo apt-get install openssh-server vscode: 安装remote-ssh 插件 连接到服务器IP 免密登录的公钥密钥传递用filezillaUbuntu 和 Windows 文件互传 …