1. 错误处理
在 Vue 3 中，你可以使用全局错误处理函数 config.errorHandler 来捕获组件渲染或生命周期钩子中的错误。这可以用于全局错误的日志记录或错误报告。
const app = Vue.createApp({});
app.config.errorHandler = (err, vm, info) => {
// 处理错误
console.error(`Error: ${err.toString()}\nInfo: ${info}`);
};
app.mount('#app');
2. 异步操作
在组件的生命周期钩子或方法中执行异步操作时，你需要小心处理 Promise 的状态，以避免未捕获的 Promise 错误。
const app = Vue.createApp({
data() {
return {
data: null,
error: null
};
},
mounted() {
fetchData()
.then(response => {
this.data = response.data;
})
.catch(error => {
this.error = error;
});
}
});
app.mount('#app');
3. 组件生命周期
在 Vue 3 中，生命周期钩子发生了一些变化。一些钩子的名字被修改，新的 beforeUnmount 钩子被引入，取代了之前的 beforeDestroy 钩子。
const app = Vue.createApp({
beforeCreate() {
console.log('组件创建前');
},
created() {
console.log('组件已创建');
},
beforeMount() {
console.log('组件挂载前');
},
mounted() {
console.log('组件已挂载');
},
beforeUpdate() {
console.log('组件更新前');
},
updated() {
console.log('组件已更新');
},
beforeUnmount() {
console.log('组件销毁前');
},
unmounted() {
console.log('组件已销毁');
}
});
app.mount('#app');
通过正确使用生命周期钩子，你可以在组件的不同阶段执行特定的逻辑。
4. 针对特定情况的处理
在实际项目中，处理边界情况通常是针对具体业务需求和应用场景的。例如，当组件接收到无效的 props 时，你可以使用 watchEffect 来观察 props 的变化并进行相应的处理。
const app = Vue.createApp({
props: {
value: {
type: String,
required: true
}
},
setup(props) {
// 使用 watchEffect 监听 props 变化
Vue.watchEffect(() => {
if (!props.value) {
console.warn('接收到无效的 value！');
}
});
return {};
}
});
app.mount('#app');
上述例子中，通过 watchEffect 监听 props.value 的变化，如果 value 为 falsy，则发出警告。
在实际开发中，你需要根据具体情况选择合适的处理方式，以保证应用的稳定性和可维护性。
转载请注明出处：http://www.zyzy.cn/article/detail/500/Vue 3.0