🔥码云GVP开源项目 12k star Uniapp+ElementUI 功能强大 支持多语言、二开方便! 广告
>属性和方法: ["defineReactive", "_toString", "toNumber", "makeMap", "isBuiltInTag", "remove", "hasOwn", "isPrimitive", "cached", "camelize", "capitalize", "hyphenate", "bind", "toArray", "extend", "isObject", "isPlainObject", "toObject", "noop", "no", "genStaticKeys", "isReserved", "def", "parsePath", "hasProto", "inBrowser", "devtools", "UA", "nextTick", "_Set", "mergeOptions", "resolveAsset", "warn", "formatComponentName", "validateProp"] >defineReactive:定义一个对象的响应属性(core/observer/index.js) usage: Vue.util.defineReactive(obj,key,value,fn) obj: 目标对象, key: 目标对象属性; value: 属性值 fn: 只在node调试环境下set时调用 >_toString : 字符串表示,与原生的toString()方法的区别:object和array使用JSON.stringify()处理,null输出'';(shared/util.js) usage: let person = { name : 'libai' } Vue.util._toString(person) >toNumber: 转化为number类型,内部使用parseFloat;返回浮点数或者本身(shared/util.js) usage: let size = '0.1$'; Vue.util.toNumber(size) //--0.1 >makeMap: 生成一个Map对象实例,并返回检测key是否存在的函数;(shared/util.js) usage: Vue.util.makeMap(str,toLowerCase); str : 生成map对象key键的字符串,以‘,’隔开 toLowerCase: boolen是否小写 let keys = 'name,age,job,email'; let maps = Vue.util.makMap(keys); console.log(maps['name']) //---true console.log(maps['phone']) //--false >isBuiltInTag : makeMap('slot,component',true)执行结果(shared/util.js) usage: console.log(Vue.util.isBuiltInTag('slot')) //--true; console.log(Vue.util.isBuiltInTag('component')) //--true; console.log(Vue.util.isBuiltInTag('transition')) //--false; >remove: 删除数组中的一个项(shared/util.js) usage: Vue.util.remove(array,item); let arr = ['libai','age']; Vue.util.remove(arr,'libai'); console.log(arr) //['age']; >hasOwn: 其实就是Object.hasOwnProperty(obj,key)的封装;(shared/util.js) usage: Vue.util.hasOwn(obj,key); let person ={ name : 'libai', age : '100' }; console.log(Vue.util.hasOwn('name')) //---true >isPrimitive : 检测是不是简单类型值:string,number;(shared/util.js) usage: Vue.util.isPrimitive(value); console.log(Vue.util.isPrimitive(12)) // --true >cached : 缓存函数执行的结果;将函数执行结果缓存在内部cache变量上,当第二次执行相同参数时,直接返回缓存结果(shared/util.js) usage : Vue.util.cached(fn); 实例: var camelizeRE = /-(\w)/g; var camelize = Vue.util.cached(function (str) { return str.replace(camelizeRE, function (_, c) { return c ? c.toUpperCase() : ''; }); }); let str = 'person-name-age'; let ret = camelize(str); let ret1 = camelize(str); //--此时取缓存值 console.log(ret,ret1) >camelize : 驼峰写法,使用了cached方式缓存结果;(shared/util.js) usage: Vue.util.camelize(str); example: let str = 'person-name-age'; let ret = Vue.util.camelize(str); console.log(ret) //personNameAge; >hyphenate: 驼峰写法转化为连接符'-'写法:(shared/util.js) usage: Vue.util.camelize(str); example: let name = 'personNameAge'; let ret = Vue.util.hyphenate(name); console.log(ret) //--输出person-name-age >bind: 绑定函数作用域,(shared/util.js) usage: Vue.util.bind(fn,ctx) example: var name = 'dufu'; var name1 = 'libai' var person = { name1 }; var fn = Vue.util.bind(test,person); test() //dufu fn() //libai function test(){ console.log(this.name) } >toArray: 将类数组转化为数组(shared/util.js) usage: window.util.toArray(likeArray,start) likeArray: 类数组对象; start: 开始位置 example: let divs = document.querySelectorAll('div'); let arr = Vue.util.toArray(divs,0); >extend: 浅复制(shared/util.js) usage: Vue.util.extend(to,form); to : 目标对象 form: 源对象 example: let person ={ name: 'libai', age : 100 }; let cloneObj = Vue.util.extend({},person); console.loh(cloneObj) > isObject : 检测是不是对象和null;(shared/util.js) usage: Vue.util.isObject(obj); example: Vue.util.isObject(null) //true > isPlainObject : 检测是不是object对象,(shared/util.js) usage: Vue.util.isPlainObject(obj); example: Vue.util.isPlainObject(null) //false Vue.util.isPlainObject({}) //true > toObject : 将对象数组合并为一个对象;后面的属性覆盖前面的属性(shared/util.js) usage: Vue.util.toObject(arr); arr : 对象数组; example: let name='libai',age=100 let names = {name }; let ages = {age} let ret = Vue.util.toObject([names,ages]); console.log(ret) //{name:'libai',age:100} > 一些简单工具函数:(shared/util.js) noop : 纯函数;= function(){} no : 返回false函数;=> false > genStaticKeys: 链接staticKeys合并成一个字符串(shared/util.js) usage: Vue.util.genStaticKeys(modules) modules: 对象数组,包含staticKeys数组字段; example: let keys1 = ['name','age']; let keys2 = ['job','email','phone']; let module1 = { staticKeys:keys1 } let module2 = { staticKeys:keys2 }; Vue.util.genStaticKeys([module1,module2]); //--输出:'name,age,job,email,phone' > isReserved: 判断字符串是不是$和_符开始的:用来过滤vm的方法和属性 (core/util/lang.js); usage: Vue.util.isReserved(str); example: let str = '$name'; let str1 = '_age'; let str2= 'normal'; Vue.util.isReserved(str) //true Vue.util.isReserved(str1) //true Vue.util.isReserved(str2) //false >def : 其实就是Object.defineProperty()方法的简便封装; usage: Vue.util.def(obj,key,value,enumerable) enumerable: 是否可枚举; example: let target = Object.create({}); Vue.util.def(target,'name','libai',true); console.log(target) //---{name:'libai'} > parsePath: 解析路径 usage: Vue.util.parsePath(str) str : 'vue.core.util'; example: let pathname = 'vue.core.util'; let paths = { vue:{ core:{ util:['index.js','util.js','lang.js'] } } }; let parse = Vue.util.parsePath(pathname); let ret = parse(paths) console.log(ret) //['index.js','util.js','lang.js'] > hasProto : 是否可以使用__proto__属性; usage: Vue.util.hasProto; //true or false >inBrowser : 是否是浏览器环境 usage: Vue.util.isBrowser //--true or false >devtools: 浏览器环境是否安装vue-devtools工具 usage: Vue.util.devtools //true or false >UA : 浏览器用户代理navigator.userAgent.toLowerCase() usage: Vue.util.UA //--string >nextTick : 延迟到下有一次执行:使用最新的window.MutationObserver对象;回退使用setTimeout方法; usage : Vue.util.nextTick(fn,ctx); example: let name = 'libai'; let person = {name}; Vue.util.nextTick(function(){console.log(this.name)},person); console.log('dufu'); >_Set: 兼容es6中的Set数据结构;只提供了add,has,clear三个方法 usage: let set = new Vue.util._Set(); set.add(1); set.has(1); set.clear(); es6中还包含有delete,keys,values,entries,forEach,size等方法和属性; >warn: 输出警告信息:(core/util/debug.js) usage: Vue.util.warn(message,vm); message: 输出信息 vm: 取得vm.name,告之警告信息是来源于那个组件 example: let message = 'text warn'; let name='vue'; Vue.util.warn(message,{name}); 'vue.js:2250 [Vue warn]: text warn (found in component <vue>)' >formatComponentName:格式化组件名称,(core/util/debug.js) usage: Vue.util.formatComponentName(vm); 1: 'root instance' 2: 'component <${name}>' 3: 'anonymous component' example: let name = 'libai'; let vm = {name} Vue.util.formatComponentName(vm) //--component <libai>