Vue官方文档梳理之全局配置

2024-07-29 03:47:05

本文主要介绍了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');

比如在谷歌浏览器中查看自定义组件Vue.component('my-component')的各个阶段花费的时间：

在 IE11 中查看

productionTip（2.2.0+）

对于开发版本，会默认向控制台打印：

设置为false就不再显示。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

vue 如何添加全局函数或全局变量以及单页面的title设置总结

传统的设置title的方法是:document.title = 'title' 但是这种写法在iOS的微信上是不兼容的这里设置title的方法是通过在百度搜索的所谓黑科技,避免了安卓和iOS的不兼容写法首先在index.html中定义一个全局的函数: var setTitle = function (title) { var u = navigator.userAgent var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linu
详解Vue.use自定义自己的全局组件

通常我们在vue里面使用别人开发的组件,第一步就是install,第二步在main.js里面引入,第三步Vue.use这个组件.今天我简单的也来use一个自己的组件. 这里我用的webpack-simple这个简单版本的脚手架为例,安装就不啰嗦了,直接进入正题首先看下目前的项目结构: webpack首先会加载main.js,所以我们在main的js里面引入.我以element ui来做对比说明 import Vue from 'vue' import App from './App.vue'
详解VUE 定义全局变量的几种实现方式

最近在学习VUE.js 中间涉及到JS全局变量,与其说是VUE的全局变量,不如说是模块化JS开发的全局变量. 1.全局变量专用模块就是以一个特定模块来组织管理这些全局量,需要引用的地方导入该模块便好. 全局变量专用模块 Global.vue <script type="text/javascript"> const colorList = [ '#F9F900', '#6FB7B7', '#9999CC', '#B766AD', '#B87070', '#FF8F59'
Vue中建立全局引用或者全局命令的方法

如何在Vue中建立全局引用或者全局命令,具体内容如下 1 一般在vue中,有很多vue组件,这些组件每个都是一个文件.都可能需要引用到相同模块(或者插件).我们不想每个文件都import 一次模块. 如果是基于vue.js编写的插件我们可以用 Vue.use(...) main.js 2 但是如果想添加一个全局命令,同时又让每个vue的文件都能用到怎么办? 第一步:最好建立一个全局的命令文件例如:directive/directive.js 第二步:利用Vue.directive()建立一个全局
vue2.0全局组件之pdf详解

目的:像elementUI那样注册全局组件预览pdf文件技术支持:使用火狐的pdf.js http://mozilla.github.io/pdf.js/ 准备:新建一个CPdf.vue文件,把火狐demo里面的build里面的pdf.js下载来,并且依赖了elementUI开发的其实就是用了<el-button> 编写: template <template> <div class="cpdf"> <div class="cen
vue教程之toast弹框全局调用示例详解

本文实例为大家分享了vue toast弹框全局调用示例,供大家参考,具体内容如下 1.首选新建一个toast.vue模板文件: <template> <transition :name="fadeIn"> <div class="alertBox" v-show="show"> <div class="alert-mask" v-show="isShowMask"&
详解vue.js全局组件和局部组件

这两天学习了Vue.js 感觉组件这个地方知识点挺多的,而且很重要,所以,今天添加一点小笔记. 首先Vue组件的使用有3个步骤,创建组件构造器,注册组件,使用组件3个方面. 代码演示如下: <!DOCTYPE html> <html> <body> <div id="app">  <my-component></my-compo
自定义vue全局组件use使用、vuex的使用详解

自定义vue全局组件use使用(解释vue.use()的原理) 我们在前面学习到是用别人的组件:Vue.use(VueRouter).Vue.use(Mint)等等. 其实使用的这些都是全局组件,这里我们就来讲解一下怎么样定义一个全局组件,并解释vue.use()的原理而我们再用Axios做交互,则不能使用Vue.use(Axios),因为Axios没有install自定义一个全局Loading组件,并使用: 总结目录: |-components |-loading |-index.js 导出
Vue官方文档梳理之全局配置

本文主要介绍了Vue官方文档梳理之全局配置,分享给大家,也给自己留个笔记.具体如下: optionMergeStrategies 用于自定义选项的合并策略,Vue已经预定义了一些自己配置项的合并策略,如下图所示. 比如props.methods.computed就是同一个策略:子配置项会覆盖父级配置项.源码如下: var strats = config.optionMergeStrategies; strats.props = strats.methods = strats.computed =
深入理解Vue官方文档梳理之全局API

Vue.extend 配置项data必须为function,否则配置无效.data的合并规则(可以看<Vue官方文档梳理-全局配置>)源码如下: 传入非function类型的data(上图中data配置为{a:1}),在合并options时,如果data不是function类型,开发版会发出警告,然后直接返回了parentVal,这意味着extend传入的data选项被无视了. 我们知道实例化Vue的时候,data可以是对象,这里的合并规则不是通用的吗?注意上面有个if(!vm)的判断,实例化
Rainbond配置组件自动构建部署官方文档讲解

目录前言前提条件基于源代码操作流程 1.开启组件 Git-Webhook 2.配置代码仓库基于镜像仓库操作流程 1.开启镜像仓库 Webhook 自动构建 2.Tag 触发自动修改策略 3.配置镜像仓库 API 触发自动构建前言通过自动构建的功能,可以实现代码或镜像提交后组件自动触发构建和部署,Rainbond 提供了基于代码仓库 Webhooks.镜像仓库 Webhooks 和自定义 API 三种方式触发组件自动部署.自动构建的功能可以辅助开发者便捷的实现敏捷开发. 前提条件组件
fullCalendar中文API官方文档

1. 使用方式: 引入相关js, css后, $('#div_name').fullCalendar({//options}); 接受的是一个option对象 2. 普通属性 2.1. year, month, date: 整数, 初始化加载时的日期. 2.2. defaultView: 字符串类型, 默认是'month; 2.2.1. 允许的views: 2.2.1.1. month 一页显示一月, 日历样式 2.2.1.2. basicWeek 一页显示一周, 无特殊样式 2.2.1.3.
Rainbond应用分享与发布官方文档说明

目录应用分享与发布应用分享应用发布流程完善应用信息提交发布任务确认发布编辑应用发布信息应用分享与发布应用分享应用市场定义了支持大型分布式的数字化业务系统的标准云原生应用模型.它可以包含1-N个服务组件,模型包含其中每个服务组件资源及配置,插件资源及配置,拓扑关系.部署关系等.精心制作完成即可一键发布.一键安装. 在Rainbond中,组件是Rainbond可管理的最小服务单元,用户可以将多个组件组成一个复杂的业务系统,这套业务系统可以对外提供服务,也可以分享给其他组织独立部署
Rainbond网络治理插件ServiceMesh官方文档说明

目录 ServiceMesh网络治理插件插件实践综合网络治理插件入站方向出站方向出站网络治理插件 ServiceMesh网络治理插件 5.1.5版本后,Rainbond默认提供了综合网络治理插件(同时处理入站和出站网络)和出站网络治理插件两个插件可用. 网络治理插件工作在与业务容器同一个网络空间之中,可以监听一个分配端口,拦截入站的业务流量进行限流.断路等处理再将流量负载到业务服务的实际监听端口之上. 同时也可以工作在出站方向,业务服务需要访问上游服务时,通过访问本地出站治理
iPhone X官方文档的适配学习详解

前言官方文档原文地址:链接,iPhone X在文中均用iPX来表示,iPhone 7在文中均用iP7来表示屏幕尺寸 iPX的屏幕尺寸是2436px×1125px(812pt×375pt @ 3x),也就是说我们依然使用的是3x的素材应该影响不大,他和iP7在宽度上是一致的,但是高度上多了145个点. 布局最好在真机上预览一下布局. 布局需要延伸到边缘,另外在纵向高度上最好可以根据不同情境滚动. 状态栏的高度已经改变了,如果布局没有使用系统的导航栏,或者布局是依照导航栏来的,那么需要重新适配
vue webpack开发访问后台接口全局配置的方法

在实际开发中,使用vue 后就是前后端分离开发了,这时候我们就需要访问后台的接口来拿到数据,需要URL,name,password来获取到token才能正常使用接口,下面就来配置. 1.找到config文件夹,在prod.env.js中添加一下代码(若没有此JS,自己创建一个就可以了) 'use strict' module.exports = { NODE_ENV: '"production"', API_ROOT: '"//123.116.245.150:18081/ap
利用python查看官方文档

离线版本Python Mannuals,直接开始菜单搜索就行,Module Docs是安装模块的文档,点开在浏览器打开或者安装Python目录下找Doc点进去比如查看python内置的函数像re,tkinter在D:\Python36\lib下,jupyter,mysql安装在D:\Python36\lib\site-packages下官网点击Docs https://docs.python.org/3/ 到此这篇关于利用python查看官方文档的文章就介绍到这了,更多相关python查
Rainbond部署组件Statefulset的使用官方文档

目录前言组件部署类型服务的“状态” 处理服务的 “状态” 前言对于kubernetes老玩家而言,StatefulSet这种资源类型并不陌生.对于很多有状态服务而言,都可以使用 StatefulSet 这种资源类型来部署.那么问题来了:挖掘机技术哪家强?额,不对. 如何在 Rainbond 使用 StatefulSet 资源类型来部署服务呢? 组件部署类型通过在服务组件的其他设置中,更改组件部署类型即可选择使用 StatefulSet 资源类型部署服务,操作之前要注意以下几点: 组

Vue官方文档梳理之全局配置

相关推荐

随机推荐