Vue 2.0源碼分析-new Vue 發生了什么?

從入口代碼開始分析,我們先來分析 new Vue 背后發生了哪些事情。我們都知道,new 關鍵字在 Javascript 語言中代表實例化是一個對象,而 Vue 實際上是一個類,類在 Javascript 中是用 Function 來實現的,來看一下源碼,在src/core/instance/index.js 中。

function Vue(options) {if (process.env.NODE_ENV !== 'production' &&!(this instanceof Vue)) {warn('Vue is a constructor and should be called with the `new` keyword')}this._init(options)
}

可以看到 Vue 只能通過 new 關鍵字初始化,然后會調用 this._init 方法, 該方法在 src/core/instance/init.js 中定義。

Vue.prototype._init = function (options?: Object) {const vm: Component = thisvm._uid = uid++let startTag, endTagif (process.env.NODE_ENV !== 'production' && config.performance && mark) {startTag = `vue-perf-start:${vm._uid}`endTag = `vue-perf-end:${vm._uid}`mark(startTag)}vm._isVue = trueif (options && options._isComponent) {initInternalComponent(vm, options)} else {vm.$options = mergeOptions(resolveConstructorOptions(vm.constructor),options || {},vm)}if (process.env.NODE_ENV !== 'production') {initProxy(vm)} else {vm._renderProxy = vm}vm._self = vminitLifecycle(vm)initEvents(vm)initRender(vm)callHook(vm, 'beforeCreate')initInjections(vm)initState(vm)initProvide(vm)callHook(vm, 'created')if (process.env.NODE_ENV !== 'production' && config.performance && mark) {vm._name = formatComponentName(vm, false)mark(endTag)measure(`vue ${vm._name} init`, startTag, endTag)}if (vm.$options.el) {vm.$mount(vm.$options.el)}
}

Vue 初始化主要就干了幾件事情,合并配置,初始化生命周期,初始化事件中心,初始化渲染,初始化 data、props、computed、watcher 等等。

總結

Vue 的初始化邏輯寫的非常清楚,把不同的功能邏輯拆成一些單獨的函數執行,讓主線邏輯一目了然,這樣的編程思想是非常值得借鑒和學習的。

由于我們這一章的目標是弄清楚模板和數據如何渲染成最終的 DOM,所以各種初始化邏輯我們先不看。在初始化的最后,檢測到如果有 el 屬性,則調用 vm.$mount 方法掛載 vm,掛載的目標就是把模板渲染成最終的 DOM,那么接下來我們來分析 Vue 的掛載過程。

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/165205.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/165205.shtml
英文地址,請注明出處:http://en.pswp.cn/news/165205.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

Hive csv文件導入Hive

一、如何把csv文件導入Hive (1) 在Hive中建立與csv相對應的表 create table if not exists tmp.tmp_wenxin_20231123 (redeem_code_id string comment ) ROW FORMAT DELIMITED FIELDS TERMINATED BY , STORED AS TEXTFILE;創建了一張名為tmp_wenxin_20231123的hive表&am…

Ubuntu 22.04安裝vscode

要在Ubuntu 22.04安裝vscode,請完成這些步驟。 首先apt命令更新軟件包索引并安裝導入微軟GPG密鑰的依賴軟件。 更新,近期內執行過可忽略 sudo apt update安裝工具包 sudo apt install software-properties-common apt-transport-https curl當導入GPG后…

jupyter notebook 不知道密碼,怎么登錄解決辦法

jupyter notebook 不知道密碼,怎么登錄解決辦法 1、 windows下,打開命令行,輸入jupyter notebook list : C:\Users\tom>jupyter notebook list Currently running servers: http://localhost:8888/?tokenee8bb2c28a89c8a24d…

【LeetCode刷題-鏈表】--61.旋轉鏈表

61.旋轉鏈表 方法: 記給定的鏈表的長度為n,注意當向右移動的次數k>n時,僅需要向右移動k mod n次即可,因為每n次移動都會讓鏈表變為原狀 將給定的鏈表連接成環,然后將指定位置斷開 /*** Definition for singly-linked list.*…

Nginx模塊開發之http handler實現流量統計(1)

文章目錄 一、handler簡介二、Nginx handler模塊開發2.1、示例代碼2.2、編寫config文件2.3、編譯模塊到Nginx源碼中2.4、修改conf文件2.5、執行效果 三、Nginx的熱更新總結 一、handler簡介 Handler模塊就是接受來自客戶端的請求并產生輸出的模塊。 配置文件中使用location指令…

HBuilderX前端軟件社區+Thinkphp后端源碼

HBuilderX前端軟件社區thinkphp后端源碼,搭建好后臺在前端找到 util 這個文件把兩個js文件上面的填上自己的域名,登錄HBuilderX賬號沒有賬號就注冊賬號然后上傳文件即可。打包選擇發行 可以打包app或h5等等 后端設置運行目錄為public(重要),…

大語言模型——BERT和GPT的那些事兒

前言 自然語言處理是人工智能的一個分支。在自然語言處理領域,有兩個相當著名的大語言模型——BERT和GPT。兩個模型是同一年提出的,那一年BERT以不可抵擋之勢,讓整個人工智能屆為之震動。據說當年BERT的影響力是GPT的十倍以上。而現在&#…

PCIE鏈路訓練-狀態機描述2

Configuration.Lanenum.Accept 如果use_modified_TS1_TS2_Ordered_Set為1,需要注意: (1)tx需要發送Modified TS1而不是正常的TS1; (2)rx端必須檢查是否收到Modified TS1(注意一開…

第十七章總結

數據庫基礎 SQL語言 1、select 語句 select 語句用于從數據中檢索數據。語法如下: SELECT 搜選字段列表 FROM 數據表名 WHERE 條件表達式 GROUP BY 字段名 HAVING 條件表達式(指定分組的條件) ORDER BY 字段名[ASC|DESC] 2、insert 語句 insert 語句用于向表中插入新…

Ubuntu20.04 install pnpm

npm install -g pnpm referrence link: Installation | pnpmPrerequisiteshttps://pnpm.io/installation

TrustAsia亮相Matter開發者大會,榮獲Matter優秀賦能者獎

11月22日,由CSA(連接標準聯盟)中國成員組主辦,CSHIA承辦的“Matter中國區開發者大會2023” 于杭州舉行。 會上,連接標準聯盟中國成員組主席宿為民博士、連接標準聯盟亞洲區架構師楊莉女士、CSHIA秘書長|中智盟投資創始…

藍橋杯官網練習題(最長子序列)

題目描述 我們稱一個字符串S 包含字符串 T 是指 T 是 S 的一個子序列,即可以從字符串 S 中抽出若干個字符,它們按原來的順序組合成一個新的字符串與 T 完全一樣。 給定兩個字符串 S 和 T,請問 T 中從第一個字符開始最長連續多少個字…

LangChain的簡單使用介紹

??覺得內容不錯的話,歡迎點贊收藏加關注😊😊😊,后續會繼續輸入更多優質內容?? 👉有問題歡迎大家加關注私戳或者評論(包括但不限于NLP算法相關,linux學習相關,讀研讀博…

idea里面常用插件

這里列出了一系列常用的 IntelliJ IDEA 插件,它們可以提高開發效率、簡化操作,以及幫助進行代碼分析和優化。以下是每個插件的簡要介紹: GenerateAllSetter:生成對象的所有 set 方法和 get 方法,方便對象之間的轉換。該…

微信小程序實現【點擊 滑動 評分 評星(5星)】功能

wxml文件&#xff1a; <view class"wxpl_xing"><view class"manyidu">{{scoreContent}}</view><view><block wx:for{{scoreArray}} wx:for-item"item"><view classstarLen bindtapchangeScore data-sy"{{…

vuex中的常用屬性有哪些?

在 Vuex 中&#xff0c;有一些常用的屬性可以幫助你管理應用程序的狀態。這些屬性包括 state、getters、mutations 和 actions。 state: 用于存儲應用程序的狀態數據&#xff0c;是 Vuex 存儲數據的地方。當應用程序中的多個組件需要共享狀態時&#xff0c;就可以將這些共享的狀…

力扣283:移動零(JAVA)

題目描述: 意思是將所有0移到最后的同時其余非0元素位置仍然不變 如 1 2 0 5 2 0 經過移動零后變為 1 2 5 2 0 0 思路:使用雙指針的思路來寫 fast:從左往右遍歷數組 slow:非零元素最后的一個位置 將數組分為3個區間 [0,slow]為處理好的非0數據,slow永遠指向最后一個非0數據 [s…

Java面向對象第一天

什么是類&#xff1f;什么是對象&#xff1f; 現實生活是由很多很多對象組成的&#xff0c;基于對象抽出了類 對象&#xff1a;軟件中真實存在的單個的個體/東西 類&#xff1a;類型/類別&#xff0c;代表一類個體 類是對象的模板/模子&#xff0c;對象是類的具體的實例 類中…

docker mysql 宿主機掛載配置文件

官方文檔摘錄&#xff08;勿噴&#xff0c;僅供自己筆記&#xff09; 官方文檔如下&#xff1a; The MySQL startup configuration is specified in the file /etc/mysql/my.cnf, and that file in turn includes any files found in the /etc/mysql/conf.d directory that e…

GoLang語言范圍(Range)

目錄 一、在數組、切片上使用‘range’ 二、在映射上使用range 三、在通道上使用range Go語言中的range關鍵字用于迭代數組&#xff08;數組、切片、字符串&#xff09;、映射&#xff08;map&#xff09;、通道&#xff08;channel&#xff09;或者在 for 循環中迭代每一個…