导读
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
