vue 初始化請求例子 Vue例項初始化

vue的建構函式new vue

一切都是從vue的建構函式開始的...，當執行了npm run dev的構建過程就是執行這些初始化的過程，首先在node_modules中找到vue原始碼，core檔案是對vue核心的包裝，入口檔案index.js，先從乙個建構函式開始，然後在vue的prototype上進行功能的拓展的。之後initglobalapi函式在vue例項上進行屬性的新增，最後拓展了vue原型上的isserver ssrcontent functionalrendercontent，寫入vue的version，返回vue例項。

// ./node_modules/src/core/instance/index.js

import from './init'

import from './state'

import from './render'

import from './events'

import from './lifecycle'

import from '../util/index'

// vue的建構函式初始化

function vue (options)

statemixin(vue) //非生產環境下為props data設定set攔截；之後設定$set、$delete 以及 $watch方法

eventsmixin(vue) // 新增原型上的監聽方法

// vue.prototype.$on = function (event: string | array, fn: function): component {}

// vue.prototype.$once = function (event: string, fn: function): component {}

// vue.prototype.$off = function (event?: string | array, fn?: function): component {}

// vue.prototype.$emit = function (event: string): component {}

lifecyclemixin(vue)

//原型新增宣告週期函式方法

// vue.prototype._update = function (vnode: vnode, hydrating?: boolean) {}

// vue.prototype.$forceupdate = function () {}

// vue.prototype.$destroy = function () {}

rendermixin(vue) 為原型又新增了一系列的方法

// installrenderhelpers 函式中

/**vue.prototype._o = markonce

vue.prototype._n = tonumber

vue.prototype._s = tostring

vue.prototype._l = renderlist

vue.prototype._t = renderslot

vue.prototype._q = looseequal

vue.prototype._i = looseindexof

vue.prototype._m = renderstatic

vue.prototype._f = resolvefilter

vue.prototype._k = checkkeycodes

vue.prototype._b = bindobjectprops

vue.prototype._v = createtextvnode

vue.prototype._e = createemptyvnode

vue.prototype._u = resolvescopedslots

vue.prototype._g = bindobjectlisteners

vue.prototype.$nexttick = function (fn: function) {}

vue.prototype._render = function (): vnode {}

export default vue

vue新增全域性api

// ./src/core/index.js

// 從 vue 的出生檔案匯入 vue

import vue from './instance/index'

import from './global-api/index'

import from 'core/util/env'

import from 'core/vdom/create-functional-component'

// 將 vue 建構函式作為引數，傳遞給 initglobalapi 方法，該方法來自 ./global-api/index.js 檔案

initglobalapi(vue)

/** options初始化

vue.options = {

components: {

keepalive

directives: object.create(null),

filters: object.create(null),

_base: vue

在vue上新增了.use .mixin .extend ,component . directive .filter方法

// 在 vue.prototype 上新增 $isserver 屬性，該屬性**了來自 core/util/env.js 檔案的 isserverrendering 方法

object.defineproperty(vue.prototype, '$isserver', {

get: isserverrendering

// 在 vue.prototype 上新增 $ssrcontext 屬性

object.defineproperty(vue.prototype, '$ssrcontext', {

get () {

/* istanbul ignore next */

return this.$vnode && this.$vnode.ssrcontext

// expose functionalrendercontext for ssr runtime helper installation

object.defineproperty(vue, 'functionalrendercontext', {

value: functionalrendercontext

// vue.version 儲存了當前 vue 的版本號

vue.version = '__version__'

// 匯出 vue

export default vue

平台相容platform

在vue.options 上新增web weex不同平台執行時的特定元件和指令。覆蓋一些vue.config屬性新增平台，構建了不同的輸出。每個不同形式的包又分為執行時版和完整版，完整版比執行時版多了compiler，這個檔案的第乙個影響是它重寫了 vue.prototype.$mount 方法；第二個影響是新增了 vue.compile 全域性api。

merge呼叫合併選項

// html

// js

var vm = new vue({

data: {

test: 1

呼叫建構函式_init時傳入引數options，在init中宣告了vm常量指向當前的vue例項，接下來就是對vm.$options上的選項進行合併，props inject directive屬性的多種寫法都會被規範化處理成物件的形式。因為 vue 要對選項進行處理，這個時候好的做法就是，無論開發者使用哪一種寫法，在內部都將其規範成同一種方式，這樣在選項合併的時候就能夠統一處理。

mergeoptions(vue.options, options,vm){

//規範化處理

從instance/index 首先執行的initmixin(vue) (instance/init)給vue原型上定義了乙個_init方法，過程：options處理-renderproxy-vm生命週期相關變數初始化-vm事件監聽初始化-vm狀態初始化-render&mount。

呼叫new vue時傳入options，mergeoptions(instance/global-api/extend)方法 解析建構函式的options，當為vue混入一些options superoptions就會發生變化，跟之前儲存的cachedsuperoptions不等，主要進行相關的sub.superoptions更新返回merge自己的options與父類的options屬性

在merge時將更新的options更新到子類的superoptions，返回merge自己和父類的options，通過vue提供的strats物件hook的方式區分公共處理和特殊處理，mergeoptions(instance/util/options) 只有在方法呼叫的時候進行merge，其他情況將進行處理。

1、mergeoptions對父子選項進行合併處理，實現vue選項的規範化和選項合併，可以通過vue.config.optionmergestrategies來自定義合併策略

2、當通過vue.extend呼叫mergeoptions函式時拿不到第三個引數vm，這時就是在例項化子元件，不論是new vue還是子元件的例項化，都會將資料處理成乙個函式，避免了元件間資料互相影響；

3、由於props inject選項是在data之前進行初始化，所以為了保證我們能夠使用props初始化data中的資料，data函式將會在初始化的時候進行合併處理。將生命週期函式合併成了陣列的形式；

4、將指令，過濾器和元件合併，這時候在原形上新增了一些如keepalive、transition、(抽象元件不會渲染成真實的元件)transitiongroup，這就是內建元件，props inject methods computed都會被處理為乙個純物件。mixin extend也會被混入

5、通過proxy實現對vm的**

vue初始化專案

速查 vue v npm v sudo npm install global vue cli sudo npm install g vue cli init 進入包下 vue init webpack home檢查node和npm版本 node vv14.3.0 npm v6.14.5 安裝vue ...

vue初始化專案

1 初始化專案 命令 f vueworkspace vue init webpack demo project 2 建立好的專案目錄結構 其中 build 專案構建 webpack 相關 檔案說明 build.js 生產環境構建指令碼 check versions.js 檢查npm node.js版...

Vue文件 初始化選項與例項屬性

var vm new vue 不應該使用箭頭函式來定義計算屬性函式 methods 不應該使用箭頭函式來定義 method 函式 watch dom el template render function render 函式 生命週期 資源 雜項初始化選項為new每個例項之前傳遞的引數。例項屬性指的...