前端小菜狗看vue原始碼Part One

2021-09-28 11:02:56 字數 1041 閱讀 2784

聽說vue3.0出原始碼了??我2.0的原始碼還沒看過,小菜狗記錄一下。

首先vue官方文件中,教程基礎–vue例項下。

newvue(}

)首先是創造了乙個vue例項。那麼看向原始碼處。

首先進入入口檔案

//引入公用api

import

from

'./global-api/index'

import

from

'core/util/env'

import

from

'core/vdom/create-functional-component'

//全域性元件

initglobalapi

(vue)

//給vue的原型定義了乙個屬性$isserver

object.

defineproperty

(vue.prototype,

'$isserver',)

//給vue的原型定義了乙個屬性$ssrcontext

object.

defineproperty

(vue.prototype,

'$ssrcontext',}

)// expose functionalrendercontext for ssr runtime helper installation

object.

defineproperty

(vue,

'functionalrendercontext',)

vue.version =

'__version__'

export

default vue

然後進入./instance/index這個路徑的js檔案

看Vue原始碼前的準備工作

最近很慌,想看原始碼,先把簡單的相關概念理一理 object.defineproperty 首先,概念 object.defineproperty 方法會直接在乙個物件上定義乙個新屬性,或者修改乙個物件的現有屬性,並返回這個物件。沒啥好說的,直接上例子 定義乙個物件 const obj 資料描述符 ...

教你從原始碼看Vue的響應式原理

前段時間把vue原始碼抽時間看了一遍,耐心點看再結合網上各種分析文章還是比較容易看明白的,沒太大問題,唯一的問題就是 看完即忘 當然了,也不是說啥都不記得了,大概流程以及架構這些東西還是能留下個印象的,對於vue的構建算是有了個整體認知,只是具體到 級別的細節很難記住多少,不過也情有可原嘛,又不是背...

根據除錯工具看Vue原始碼之元件通訊(一)

在平時的業務開發中,相信在座的各位沒少用過元件通訊。然而,對於一些新手 業務熟手來說,不懂技術原理往往知其然而不知其所以然,用得一臉懵逼。看完本文可以幫助你了解vue元件的通訊方式及原理,從而進一步加深對vue的理解,遠離cv工程師的行列。示例 父元件 alt vue logo src assets...