關於Vue原始碼的那些事（一）

2021-09-28 12:47:15 字數 2832 閱讀 2996

時代變遷，越來越多的需求對於開發人員的要求也越來越高，作為乙個前端開發人員，框架的運用自然是必不可少，選擇學習乙個好的框架，將成為面試的資本，國內vue的呼聲亦是愈發高漲，正所謂沒有進步，既是後退，本文就是乙個關於vue原始碼等隨筆筆記

在運用vue來開發專案的時候，其原理令人好奇，

例如：v-for中的key作用及其根本原理

get,set方法是在何時調起並運用

為什麼生命週期會在當你需要他的時候，就會出現…

讓我們從最開始建立vue例項的時候來究其根本吧

new


vue(


)
在vue \ src \ core中，首先：目錄下的index.js

import vue from


'./instance/index'


import


from


'./global-api/index'


import


from


'core/util/env'


import


from


'core/vdom/create-functional-component'


initglobalapi


(vue)


object.


defineproperty


(vue.prototype,


'$isserver',)


object.


defineproperty


(vue.prototype,


'$ssrcontext',}


)// expose functionalrendercontext for ssr runtime helper installation


object.


defineproperty


(vue,


'functionalrendercontext',)


vue.version =


'__version__'


export


default vue
就從最開始來看吧

import vue from


'./instance/index'
這裡是引用了vue的一些核心方法

讓我們移步』./instance/index』，看看vue都運用了那些方法

import


from


'./init'


import


from


'./state'


import


from


'./render'


import


from


'./events'


import


from


'./lifecycle'


import


from


'../util/index'


function


vue(options)


this


._init


(options)


}initmixin


(vue)


statemixin


(vue)


eventsmixin


(vue)


lifecyclemixin


(vue)


rendermixin


(vue)


export


default vue
vue是乙個建構函式，並且引用方法的時候，被當成引數傳到了各個方法之中，並且在**中可以看出vue自己做了乙個判斷，在

這個判斷中就是說，如果你使用了我vue，但是不是生產環境，並且你又沒有使用new操作，就會打出乙個warn警告，說的是我是乙個建構函式啊，你確定不new我一下嗎？

然後可以看到vue函式有乙個引數options，相信許多小夥伴已經猜到了，這個引數就是new vue的時候的那個#box

然後，把options作為引數呼叫_init方法。

在vue的建構函式定義之後，有許許多多的方法被呼叫，被引用，因為你找到這些檔案後，會發現，檔案中又引用了檔案，而檔案中的檔案

又引用了檔案中的檔案中的檔案…

到這裡，好的，基本上vue的初始化大概已經了解了一下，我們返回vue\src\core\index.js

在初始化vue下面

import


from


'./global-api/index'
讓我們猜猜這段**又是什麼作用呢？還是直接檢視這個檔案，讓我們看看這個檔案又做了什麼事，這個檔案內容還是不少的，就不全貼出

來了，首先是又引用了一大堆方法，然後做了乙個判斷，

if


(process.env.


node_env


!=='production'


)}
大概的意思是不能不要vue啊，沒有你我怎麼辦啊（不要替換vue。配置物件，設定單獨的字段）

其實這個檔案通過命名和官方文件，不難看出這是在配置一下全域性的api

這些方法都可以在官方文件中查到

例如：

最後vue基本篇就到這裡了，也是趁著平時沒什麼事情的時候隨筆而留，就當做是為自己寫的一些筆記吧，也沒少查一些資料，任何有問題的地方歡迎指正

閱讀原始碼那些事

看spring的原始碼的時候如果我們一直追究所有的細節那會讓我們會越陷越深，掉入細節的無底洞，稍不留神腦迴路跟不上就會矇圈。因此，我們要學會找原始碼中的關鍵部分看，弄懂主要流程和本次看原始碼的目的的那部分就行。等我們對spring整體有了乙個很好的理解之後，再回頭看之前不懂的 就會豁然開朗。對於框架...

vue的那些事

這是一篇包含vue2以及vue3的一些知識點，瀏覽一下吧.computed中的屬性是存在快取中的，只有所依賴的引數改了，才會重新計算一遍，不然不會計算。如果屬性不在computed裡修改，也不會做相應的更新 data computed created 最終的text是4，而不是777watch的兩種...

Vue原始碼 一

很多人想看原始碼，但是不知道從哪一塊下手，所以這裡我說一下我是怎麼找入口的。首先dist資料夾中有vue.js，這是已經被打包好的js檔案，src中的所有js 都合併到了這裡，我們直接去看這個vue.js肯定是會懵逼的，1w多行跳來跳去的，所以我們是不是要找到打包的入口？那麼讓我們進入到script...