當前位置：首頁 > 前端技术 > vue >内容正文

vue

vue devtools面板没有显示_vue 基础入门（四）

發布時間：2023/12/10 vue 34 豆豆

生活随笔收集整理的這篇文章主要介紹了 vue devtools面板没有显示_vue 基础入门（四）小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

vue 基礎入門(四)

1.全局配置

Vue.config 是一個對象，包含 Vue 的全局配置。可以在啟動應用之前修改下列 property：

1.1 silent

類型：boolean
默認值：false
用法：

Vue.config.silent?=?true
?

取消 Vue 所有的日志與警告。

1.2 devtools

類型：boolean
默認值：true (生產版為 false)
用法：

//?務必在加載?Vue?之后，立即同步設置以下內容
Vue.config.devtools?=?true
?

配置是否允許 vue-devtools 檢查代碼。開發版本默認為 true，生產版本默認為 false。生產版本設為 true 可以啟用檢查。

1.3 errorHandler

類型：Function
默認值：undefined
用法：

Vue.config.errorHandler?=?function?(err,?vm,?info)?{
??//?handle?error
??//?`info`?是?Vue?特定的錯誤信息，比如錯誤所在的生命周期鉤子
??//?只在?2.2.0+?可用
}
?

指定組件的渲染和觀察期間未捕獲錯誤的處理函數。這個處理函數被調用時，可獲取錯誤信息和 Vue 實例。

從 2.2.0 起，這個鉤子也會捕獲組件生命周期鉤子里的錯誤。同樣的，當這個鉤子是 undefined 時，被捕獲的錯誤會通過 console.error 輸出而避免應用崩潰。

從 2.4.0 起，這個鉤子也會捕獲 Vue 自定義事件處理函數內部的錯誤了。

從 2.6.0 起，這個鉤子也會捕獲 v-on DOM 監聽器內部拋出的錯誤。另外，如果任何被覆蓋的鉤子或處理函數返回一個 Promise 鏈 (例如 async 函數)，則來自其 Promise 鏈的錯誤也會被處理。

錯誤追蹤服務 Sentry 和 Bugsnag 都通過此選項提供了官方支持。

1.4 warnHandler

類型：Function
默認值：undefined
用法：

Vue.config.warnHandler?=?function?(msg,?vm,?trace)?{
??//?`trace`?是組件的繼承關系追蹤
}
?

為 Vue 的運行時警告賦予一個自定義處理函數。注意這只會在開發者環境下生效，在生產環境下它會被忽略。

1.5 ignoredElements

類型：Array
默認值：[]
用法：

Vue.config.ignoredElements?=?[
??'my-custom-web-component',
??'another-web-component',
??//?用一個?`RegExp`?忽略所有“ion-”開頭的元素
??//?僅在?2.5+?支持
??/^ion-/
]?

須使 Vue 忽略在 Vue 之外的自定義元素 (e.g. 使用了 Web Components APIs)。否則，它會假設你忘記注冊全局組件或者拼錯了組件名稱，從而拋出一個關于 Unknown custom element 的警告。

1.6 keyCodes

類型：{ [key: string]: number | Array }
默認值：{}
用法：

Vue.config.keyCodes?=?{
??v:?86,
??f1:?112,
??//?camelCase?不可用
??mediaPlayPause:?179,
??//?取而代之的是?kebab-case?且用雙引號括起來
??"media-play-pause":?179,
??up:?[38,?87]
}
"text"?@keyup.media-play-pause="method">
?

給 v-on 自定義鍵位別名,給鍵位數字定義別名。

1.7 performance

類型：boolean
默認值：false (自 2.2.3 起)
用法：

設置為 true 以在瀏覽器開發工具的性能/時間線面板中啟用對組件初始化、編譯、渲染和打補丁的性能追蹤。只適用于開發模式和支持 performance.mark API 的瀏覽器上。

1.8 productionTip

類型：boolean
默認值：true
用法：

設置為 false 以阻止 vue 在啟動時生成生產提示。

2.全局 API

2.1 Vue.extend

Vue.extend( options )
參數：

{Object} options

用法：

使用基礎 Vue 構造器，創建一個“子類”。參數是一個包含組件選項的對象。

data 選項是特例，需要注意 - 在 Vue.extend() 中它必須是函數

示例

<div?id="mount-point">div>
//?創建構造器
var?Profile?=?Vue.extend({
??template:?'

{{firstName}}?{{lastName}}?aka?{{alias}}

',
??data:?function?()?{
????return?{
??????firstName:?'Walter',
??????lastName:?'White',
??????alias:?'Heisenberg'
????}
??}
})
//?創建 Profile 實例，并掛載到一個元素上。
new?Profile().$mount('#mount-point')

結果如下：

<p>Walter?White?aka?Heisenbergp>
?

總結使用extend擴展一些通用組件，如 confirm 功能組件

2.2 Vue.nextTick

Vue.nextTick( [callback, context] )
參數：

{Function}?[callback]
{Object}?[context]

用法：

在下次 DOM 更新循環結束之后執行延遲回調。在修改數據之后立即使用這個方法，獲取更新后的 DOM。

示例

const?NextTick?=?{
??data()?{
????return?{?msg:?'nextTick'?};
??},
??template:?`
????nextTick?使用`,
??mounted()?{
????//?正常執行
????console.log(1);
????//?宏任務
????setTimeout(()?=>?{
??????console.log(2);
????});
????const?p?=?new?Promise((resolve,?reject)?=>?{
??????resolve('succ');
????});
????//?微任務
????p.then((res)?=>?{
??????console.log(3);
????});
????//?nextTick
????this.$nextTick(()?=>?{
??????console.log(4);
????});
????//?輸出結果?1?3?4?2
????//??nextTick?宏任務2之前，執行
??}
};
?

總結

若果想在 dom 更新后做一些操作可以使用nextTick

Vue 在內部對異步隊列嘗試使用原生的 Promise.then、MutationObserver 和 setImmediate，如果執行環境不支持，則會采用 setTimeout(fn, 0) 代替。在支持環境下，優先使用Promise.then實現，這時nextTick是屬于微任務參考^[1]

2.3 Vue.set

Vue.set( target, propertyName/index, value )
參數：

{Object?|?Array}?target
{string?|?number}?propertyName/index
{any}?value

返回值：設置的值。
用法：

向響應式對象中添加一個 property，并確保這個新 property 同樣是響應式的，且觸發視圖更新。它必須用于向響應式對象上添加新 property，因為 Vue 無法探測普通的新增 property (比如 this.myObject.newProperty = 'hi')

示例

let?pNum?=?1;

const?vueSet?=?{
??data()?{
????return?{
??????msg:?'123',
??????show:?false,
??????showNum:?false,
??????data:?{}
????};
??},
??methods:?{
????//?不使用set?直接改變數據，數據改變后頁面不會自動更新數據
????addProps()?{
??????this.data.count?=?this.data.count???this.data.count?+?1?:?1;
??????this.show?=?true;
??????console.log('this:?',?this);
????},
????//??使用set 增加新數據后，數據被vue監聽。會自動更新數據
????setProps()?{
??????this.data.num???(this.data.num?+=?1)?:?this.$set(this.data,?'num',?1);
??????this.showNum?=?true;
??????console.log('this:?',?this);
????},
????//??可以通過?更新引用對象。使vue重新監聽整個對象。這樣新增的屬性也會被監聽
????setData()?{
??????this.data?=?{?count:?pNum++?};
??????this.show?=?true;
????}
??},
??template:?`
????Vue.set?使用msg：{{msg}}msg=clickcount：{{data.count}}增加count屬性
????使用set增加響應式屬性num：{{data.num}}增加count屬性
????設置對象count：{{data.count}}增加count屬性`
};
?

總結

通過直接向 vm 中增加數據。vue 不會去監聽數據變化。需要使用Vue.set 或 this.$set

通過更新引用對象。使 vue 重新監聽整個對象。這樣新增的屬性也會被監聽

2.4 Vue.delete

Vue.delete( target, propertyName/index )
參數：

{Object?|?Array}?target
{string?|?number}?propertyName/index
僅在?2.2.0+?版本中支持 Array + index 用法。

用法：

刪除對象的 property。如果對象是響應式的，確保刪除能觸發更新視圖。這個方法主要用于避開 Vue 不能檢測到 property 被刪除的限制，但是你應該很少會使用它。

2.5 Vue.directive

Vue.directive( id, [definition] )
參數：

{string}?id
{Function?|?Object}?[definition]

用法：

注冊或獲取全局指令。

參考 vue 基礎入門二^[2]

2.6 Vue.filter

Vue.filter( id, [definition] )
參數：

{string}?id
{Function}?[definition]

用法：

注冊或獲取全局過濾器。

//?注冊
Vue.filter('my-filter',?function?(value)?{
??//?返回處理后的值
})

//?getter，返回已注冊的過濾器
var?myFilter?=?Vue.filter('my-filter')
?

參考管道操作符vue 過濾器^[3]

2.7 Vue.component

Vue.component( id, [definition] )
參數：

{string}?id
{Function?|?Object}?[definition]

用法：

注冊或獲取全局組件。注冊還會自動使用給定的 id 設置組件的名稱

//?注冊組件，傳入一個擴展過的構造器
Vue.component('my-component',?Vue.extend({?/*?...?*/?}))

//?注冊組件，傳入一個選項對象?(自動調用?Vue.extend)
Vue.component('my-component',?{?/*?...?*/?})

//?獲取注冊的組件?(始終返回構造器)
var?MyComponent?=?Vue.component('my-component')
?

總結

Vue.component傳入的id就是組件name,definition 就是options 對象

2.8 Vue.use

Vue.use( plugin )
參數：

{Object?|?Function}?plugin

用法：

安裝 Vue.js 插件。如果插件是一個對象，必須提供 install 方法。如果插件是一個函數，它會被作為 install 方法。install 方法調用時，會將 Vue 作為參數傳入。

該方法需要在調用 new Vue() 之前被調用。

當 install 方法被同一個插件多次調用，插件將只會被安裝一次。

示例

const?vueUse?=?{
??install(Vue){
????//?一些操作，如使用Vue.components()批量注冊全局組件。
??}
}

function?vueUseFn(Vue){
??//?一些操作，如使用Vue.components()批量注冊全局組件。
}

//?使用
Vue.use(vueUse);
Vue.use(vueUseFn)
?

總結

一些組件庫通過Vue.use，批量注冊多個組件，簡化手動調用Vue.components

自定義封裝的一些操作，簡化引入初始化過程可考慮使用

2.9 Vue.mixin

-Vue.mixin( mixin )

參數：

{Object} mixin

用法：

全局注冊一個混入，影響注冊之后所有創建的每個 Vue 實例。插件作者可以使用混入，向組件注入自定義的行為。不推薦在應用代碼中使用。

示例

const?vueMixin?=?{
??// vue的options，包括life cycle，methods，computed 等。被混入的對象都可以使用混入對象的屬性
};

Vue.mixin(vueMixin);
?

總結

不推薦全局混入。優先使用局部混入。

混入過多對代碼閱讀增加成本

2.10 Vue.compile

Vue.compile( template )
參數：

{string} template

用法：

將一個模板字符串編譯成 render 函數。只在完整版時可用。

var?res?=?Vue.compile('{{?msg?}}')

new?Vue({
??data:?{
????msg:?'hello'
??},
??render:?res.render,
??staticRenderFns:?res.staticRenderFns
})
?

總結

Vue.compile將字符串模板轉換成 render 函數，要獲得更多的自由度需要手動寫 render 函數

vue 編譯^[4]

2.11 Vue.observable

Vue.observable( object )
參數：

{Object} object

用法：

讓一個對象可響應。Vue 內部會用它來處理 data 函數返回的對象。

返回的對象可以直接用于渲染函數和計算屬性內，并且會在發生變更時觸發相應的更新。也可以作為最小化的跨組件狀態存儲器，用于簡單的場景：

const?state?=?Vue.observable({?count:?0?})

const?Demo?=?{
??render(h)?{
????return?h('button',?{
??????on:?{?click:?()?=>?{?state.count++?}}
????},?`count?is:?${state.count}`)
??}
}
?

總結

使數據對象變為響應式。

通過在渲染函數和計算屬性內使用，可以實現 vuex 的狀態共享

2.12 Vue.version

細節：

提供字符串形式的 Vue 安裝版本號。這對社區的插件和組件來說非常有用，你可以根據不同的版本號采取不同的策略。

用法：

var?version?=?Number(Vue.version.split('.')[0])

if?(version?===?2)?{
??//?Vue?v2.x.x
}?else?if?(version?===?1)?{
??//?Vue?v1.x.x
}?else?{
??//?Unsupported?versions?of?Vue
}
關注不迷路

Reference

[1]

參考: https://cn.vuejs.org/v2/guide/reactivity.html#%E5%BC%82%E6%AD%A5%E6%9B%B4%E6%96%B0%E9%98%9F%E5%88%97

[2]

參考 vue 基礎入門二: https://github.com/FearlessMa/FENotes/blob/master/docs/vue/vueBase/vue%E5%9F%BA%E7%A1%80%E5%85%A5%E9%97%A8%E4%BA%8C.md

[3]

vue 過濾器: https://cn.vuejs.org/v2/guide/filters.html

[4]

vue 編譯: https://cn.vuejs.org/v2/guide/render-function.html

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的vue devtools面板没有显示_vue 基础入门（四）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。