Web Front-end
JS Tutorial
Detailed explanation of global configuration of Vue official documentation
Detailed explanation of global configuration of Vue official documentation
本文主要介绍了Vue官方文档梳理之全局配置，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧，希望能帮助到大家。
optionMergeStrategies
用于自定义选项的合并策略，Vue已经预定义了一些自己配置项的合并策略，如下图所示。
比如props、methods、computed就是同一个策略：子配置项会覆盖父级配置项。源码如下：
var strats = config.optionMergeStrategies;
strats.props =
strats.methods =
strats.computed = function (parentVal, childVal) {
if (!childVal) { return Object.create(parentVal || null) }
if (!parentVal) { return childVal }
var ret = Object.create(null);
extend(ret, parentVal);
extend(ret, childVal);
return ret
};什么时候才会用到这些配置的合并规则呢？查阅源码，发现只要调用mergeOptions时，就会用到上面的策略。总结下来有以下几种场景：
使用了 Vue.mixin 或 mixins 配置项
使用了 Vue.extend 或 extends 配置项或Vue.component（背后实际上是调用了Vue.extend）
new Vue() 或 new Vue.extend()
单独使用一个时，也会触发合并规则，但是只会有child包含配置项，所以不需要合并。只有当多个一起使用时，比如 Vue.compeont 和 extends 、mixins 配置项一起使用，这个时候就parent和child都会有相同的配置项，这时候也才有所谓的合并，举个完整的例子来说明上述的场景。
Vue.config.optionMergeStrategies['customOption'] = function (toVal, fromVal) {
console.log(toVal, fromVal)
if (!toVal) return fromVal
if (!fromVal) return toVal
// toVal 和 fromVal 同时存在，表明此时parent和child都包含配置型
return toVal + '&' + fromVal
}
Vue.extend({
customOption: 'Vue.extend'
})
Vue.component('custom', {
customOption: 'Vue.component'
})
var vm = new Vue({
customOption: 'newVue',
extends: {
customOption: 'extends'
},
mixins: [{
customOption: 'mixins'
}]
})
console.log(vm.$options.customOption)控制台打印如下：
按顺序解释如下：
undefined "Vue.extend"合并 Vue.options 和 extendOptions
undefined "Vue.component"合并 Vue.options 和 extendOptions
undefined "extends"extends配置项合并先于mixins，此时合并的是 Vue.options 和extends配置，因此toVal是undefined
extends mixins完成了extends合并，接着就是mixins，此时 Vue.options 上已经包含了extends的配置项，因此 toVal 是extends，fromVal就是mixins。最终合并后的值：extends&mixins
extends&mixins newVue完成了extends和mixins后，最终合并vm.constructor和实例的options
extends&mixins&newVue最终合并后的 customOption 的选项值
devtools
离线下载chrome 扩展地址（不需要梯子）：https://www.crx4chrome.com/crx/11903/
把下载的文件拖到扩展程序页面即可完成安装。
errorHandler
Vue 涉及到执行用户配置的地方都放在 try catch 中，因此即使你 throw 抛出错误，整个实例也不会挂。
Vue.config.errorHandler = function (err, vm, info) {
console.log(arguments)
}
new Vue({
created: function () {
throw "error msg"
}
})
// ["error msg", Vue$3, "created hook"]ignoredElements
首先要理解忽略的到底是什么？是元素本身还是包括元素里的内容（就像v-pre一样），首先要知道这个配置的背景，官网举了Web Components APIs（以下简称WCA）的例子，WCA和Vue.component一样，也可以自定义元素，不过这个目前还是个草案。那么对于Vue来讲，元素就可以分为：HTML原生元素，Vue自定义元素，WCA自定义元素。那么对于一个元素，Vue的判断顺序：原生 > Vue自定义 > ignoredElements > 无法识别，对于无法识别的Vue会假定你可能把Vue自己定义元素拼错了，因此会发出Unknown custom element的警告。另外：
Vue定义和HTML标签同名的元素是无效的，比如定义Vue.compoent('header',{})
ignoredElements包含Vue定义的元素是无效的
WCA自定义元素可以被构建虚拟dom
performance（2.2.0+）
只能在开发版上使用。caniuse上查询 performance 可知主流浏览器都已经支持，这个可以用于分析Vue组件在不同阶段中花费的时间，进而知道哪里可以优化。查看源码，发现在以下阶段加上了performance.measure。
performance.measure((组件名+ " render"), startTag, endTag);
performance.measure((组件名+ " patch"), startTag, endTag);
performance.measure((组件名 + " init"), startTag, endTag);
performance.measure(((组件名 + " compile"), 'compile', 'compile end');
For example, view the time spent in each stage of the custom component Vue.component('my-component') in Google Chrome:
View in IE11
productionTip (2.2.0+)
For the development version, it will default to the control Desktop printing:
# will no longer be displayed if set to false.
Related recommendations:
Vue.js develops a globally called MessageBox component
Vue.js implementation of divided components Method introduction
Share an example code of vue global configuration
The above is the detailed content of Detailed explanation of global configuration of Vue official documentation. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
How to set up Git configuration in PyCharm
Feb 20, 2024 am 09:47 AM
Title: How to correctly configure Git in PyCharm In modern software development, the version control system is a very important tool, and Git, as one of the popular version control systems, provides developers with powerful functions and flexible operations. As a powerful Python integrated development environment, PyCharm comes with support for Git, allowing developers to manage code versions more conveniently. This article will introduce how to correctly configure Git in PyCharm to facilitate better development during the development process.
The perfect combination of PyCharm and PyTorch: detailed installation and configuration steps
Feb 21, 2024 pm 12:00 PM
PyCharm is a powerful integrated development environment (IDE), and PyTorch is a popular open source framework in the field of deep learning. In the field of machine learning and deep learning, using PyCharm and PyTorch for development can greatly improve development efficiency and code quality. This article will introduce in detail how to install and configure PyTorch in PyCharm, and attach specific code examples to help readers better utilize the powerful functions of these two. Step 1: Install PyCharm and Python
The working principle and configuration method of GDM in Linux system
Mar 01, 2024 pm 06:36 PM
Title: The working principle and configuration method of GDM in Linux systems In Linux operating systems, GDM (GNOMEDisplayManager) is a common display manager used to control graphical user interface (GUI) login and user session management. This article will introduce the working principle and configuration method of GDM, as well as provide specific code examples. 1. Working principle of GDM GDM is the display manager in the GNOME desktop environment. It is responsible for starting the X server and providing the login interface. The user enters
Understand Linux Bashrc: functions, configuration and usage
Mar 20, 2024 pm 03:30 PM
Understanding Linux Bashrc: Function, Configuration and Usage In Linux systems, Bashrc (BourneAgainShellruncommands) is a very important configuration file, which contains various commands and settings that are automatically run when the system starts. The Bashrc file is usually located in the user's home directory and is a hidden file. Its function is to customize the Bashshell environment for the user. 1. Bashrc function setting environment
How to configure workgroup in win11 system
Feb 22, 2024 pm 09:50 PM
How to configure a workgroup in Win11 A workgroup is a way to connect multiple computers in a local area network, which allows files, printers, and other resources to be shared between computers. In Win11 system, configuring a workgroup is very simple, just follow the steps below. Step 1: Open the "Settings" application. First, click the "Start" button of the Win11 system, and then select the "Settings" application in the pop-up menu. You can also use the shortcut "Win+I" to open "Settings". Step 2: Select "System" In the Settings app, you will see multiple options. Please click the "System" option to enter the system settings page. Step 3: Select "About" In the "System" settings page, you will see multiple sub-options. Please click
Simple and easy-to-understand PyCharm configuration Git tutorial
Feb 20, 2024 am 08:28 AM
PyCharm is a commonly used integrated development environment (IDE). In daily development, using Git to manage code is essential. This article will introduce how to configure Git in PyCharm and use Git for code management, with specific code examples. Step 1: Install Git First, make sure Git is installed on your computer. If it is not installed, you can go to [Git official website](https://git-scm.com/) to download and install the latest version of Git
How to configure and install FTPS in Linux system
Mar 20, 2024 pm 02:03 PM
Title: How to configure and install FTPS in Linux system, specific code examples are required. In Linux system, FTPS is a secure file transfer protocol. Compared with FTP, FTPS encrypts the transmitted data through TLS/SSL protocol, which improves Security of data transmission. In this article, we will introduce how to configure and install FTPS in a Linux system and provide specific code examples. Step 1: Install vsftpd Open the terminal and enter the following command to install vsftpd: sudo
MyBatis Generator configuration parameter interpretation and best practices
Feb 23, 2024 am 09:51 AM
MyBatisGenerator is a code generation tool officially provided by MyBatis, which can help developers quickly generate JavaBeans, Mapper interfaces and XML mapping files that conform to the database table structure. In the process of using MyBatisGenerator for code generation, the setting of configuration parameters is crucial. This article will start from the perspective of configuration parameters and deeply explore the functions of MyBatisGenerator.
