導讀
vue3官網地址 https://v3.cn.vuejs.org/api/application-config.html#warnhandler
一.應用配置
1.errorHandle 與 warnHandler
errorHandle 官網上說 : 指定一個處理函數，來處理組件渲染函數和偵聽器執行期間拋出的未捕獲錯誤。這個處理函數被調用時，可獲取錯誤信息和相應的應用實例。
可以理解為開啟了 errorHandle 輸出的錯誤信息都會統一在errorHandler 的回調函數err 拿到 可以統一對錯誤進行一個處理
同理 warnHandler 也是一樣
main中
import { createApp } from 'vue';
import App from './App.vue';
// 應用配置
const app = createApp(App);
app.config.errorHandler = (err, vm, info) => {
console.log(err); //err 報錯信息
console.log(vm); //Proxy
console.log(info); //info` 是 Vue 特定的錯誤信息，比如錯誤所在的生命周期鉤子
};
app.config.warnHandler = function (msg, vm, trace) {
console.log(msg); //msg 警告信息
console.log(vm); //Proxy
console.log(trace); //`trace` 是組件的繼承關系追蹤
};
2.globalProperties 全局屬性
- 類似于vue2中的 this.+ 我們掛載的屬性名
vue2 main中
Vue.prototype.$Name = '帥哥'
頁面中：
let name = this.$Name //帥哥
vue3 main中
import { createApp } from 'vue';
import App from './App.vue';
// 應用配置
const app = createApp(App);
app.config.globalProperties.$Name = '大神';
app.mount('#app');
頁面中：
<script>
import { getCurrentInstance } from 'vue';
export default {
setup() {
// 獲取當前實例
const app = getCurrentInstance();
const name = app.appContext.config.globalProperties.$Name //'大神'
return {
name,
};
},
};
</script>
3.optionMergeStrategies 合并策略
官網寫的有些不是太好理解 可以理解為自定義一個合并的策略 也就是寫一個規則 那么就會遵照這個規則執行合并!!!
手寫個案例試試看
main 在main中寫一個合并的規則
const app = Vue.createApp({})
//合并custom的規則
app.config.optionMergeStrategies.custom = (toVal, fromVal) => {
console.log('父實例的值 + ', toVal, '||' + '子實例的值 + ', fromVal);
return toVal || fromVal;
};
上面這個規則就是說 合并custom 如果父實例有custom 那么就返回父實例的custom 如果父實例沒有custom 就返回子實例custom
- 做一下驗證
main （在main中混入custom 為'goodbye!‘）
app.mixin({
custom: 'goodbye!',
});
HelloWorld頁面定義 custom屬性為‘hello‘
export default {
name: 'HelloWorld',
custom: 'hello',
created() {
console.log(this.$options.custom) // goodbye!
},
};
結果就是 HelloWorld頁面 created生命周期 輸出 goodbye!
最后，讓我們嘗試將策略更改為優先返回子實例的值
main中
//合并custom的規則
app.config.optionMergeStrategies.custom = (toVal, fromVal) => {
console.log('父實例的值 + ', toVal, '||' + '子實例的值 + ', fromVal);
//return toVal || fromVal; //原先的
return fromVal || toVal ; //修改后
};
結果就是 HelloWorld頁面 created生命周期 輸出 hello!
- 最后 人家官網也說了不足之處 大家了解這個知識點就好
image.png
