vue编译器util工具使用方法示例

 更新时间:2022年07月13日 10:02:18   作者:李李  
这篇文章主要为大家介绍了vue编译器util工具使用方法示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪

makeMap源码:

function makeMap(str, expectsLowerCase) {
	var map = Object.create(null);
	var list = str.split(',');
	for (var i = 0; i < list.length; i++) {
		map[list[i]] = true;
	}
	return expectsLowerCase ?
		function(val) {
			return map[val.toLowerCase()];
		} :
		function(val) {
			return map[val];
		}
}
  • 描述:makeMap 函数首先根据一个字符串生成一个 map,然后根据该 map 产生一个新函数,新函数接收一个字符串参数作为 key,如果这个 key 在 map 中则返回 true,否则返回 undefined。
  • 参数:{String} str 一个以逗号分隔的字符串 、{Boolean} expectsLowerCase 是否小写
  • 返回值:根据生成的 map 产生的函数

isReservedTag 源码:

var isReservedTag = function(tag) {
	return isHTMLTag(tag) || isSVG(tag)
};

判断一个标签是否是保留标签,我们可以知道,如果一个标签是html标签,或者是svg标签,那么这个标签即是保留标签。

pluckModuleFunction 源码:

function pluckModuleFunction(modules,key) {
	return modules ?
		modules.map(function(m) {
			return m[key];
		}).filter(function(_) {
			return _;
		}) : []
}

检测在modules 数组中的成员对象是否有key属性,如果有"采摘"出来,组成一个新的数组。

如下实例代码:

transforms = pluckModuleFunction(options.modules, 'transformNode')

传递给 pluckModuleFunction 函数的第二个参数的字符串为 'transformNode',同时我们观察 options.modules 数组:

var modules$1 = [
	klass$1,
	style$1,
	model$1
];
var klass$1 = {
	staticKeys: ['staticClass'],
	transformNode: transformNode, //处理静态属性和非静态属性
	genData: genData
};
var model$1 = {
	preTransformNode: preTransformNode
};
var style$1 = {
	staticKeys: ['staticStyle'],
	transformNode: transformNode$1, //处理静态样式和非静态样式
	genData: genData$1
};

此时按照 pluckModuleFunction 函数的逻辑:

modules ?
	modules.map(function(m) {
		return m[key];
	}).filter(function(_) {
		return _;
	}) : []

我们拆分开看:

modules ? modules.map(function(m) {
		return m[key];
	})

如果modules存在则,调用 modules.map 创建一个新的数组。

[
  transformNode,
  transformNode$1,
  undefined
]

还没完紧接着又在新生成的数组之上调用了 filter 函数相当于:

[transformNode, transformNode$1, undefined].filter(function(_){ return _ });

把值为 undefined 的元素过滤掉,所以最终生成的数组如下:

[transformNode, transformNode$1]

isReserved 源码:

function isReserved(str) {
	var c = (str + '').charCodeAt(0);
	return c === 0x24 || c === 0x5F
}

在Vue中不允许使用以$或_开头的字符串作为data数据的字段名, isReserved 函数用来检测一个字符串是否以$ 或者 _ 开头。

如:

new Vue({
  data: {
    $count: 1,  // 不允许
    _ret: 2   // 不允许
  }
})

isReserved是如何判断一个字符串是否以 $ 或 _ 开头呢?

它的实现方式是通过字符串的 charCodeAt 方法获得该字符串第一个字符的 unicode,然后与 0x24 和 0x5F 作比较。其中 $ 对应的 unicode 码为 36,对应的十六进制值为 0x24;_ 对应的 unicode 码为 95,对应的十六进制值为 0x5F。

以上就是vue编译器util工具使用方法示例的详细内容,更多关于vue编译器util工具的资料请关注脚本之家其它相关文章!

相关文章

  • vue.js 子组件无法获取父组件store值的解决方式

    vue.js 子组件无法获取父组件store值的解决方式

    今天小编就为大家分享一篇vue.js 子组件无法获取父组件store值的解决方式,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-11-11
  • Vue3 使用v-model实现父子组件通信的方法(常用在组件封装规范中)

    Vue3 使用v-model实现父子组件通信的方法(常用在组件封装规范中)

    这篇文章主要介绍了Vue3 使用v-model实现父子组件通信(常用在组件封装规范中)的方法,本文通过实例代码给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧
    2024-06-06
  • Vue.js子组件向父组件通信的方法实例代码详解

    Vue.js子组件向父组件通信的方法实例代码详解

    这篇文章主要介绍了Vue.js子组件向父组件通信的方法实例代码,非常不错,具有一定的参考价借鉴价值,需要的朋友可以参考下
    2018-12-12
  • vue3 provide与inject的使用小技巧分享

    vue3 provide与inject的使用小技巧分享

    这篇文章主要介绍了vue3 provide与inject的使用小技巧,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • vue中安装使用cesium方式(亲测可用)

    vue中安装使用cesium方式(亲测可用)

    这篇文章主要介绍了vue中安装使用cesium方式(亲测可用),具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-04-04
  • vue 解决报错问题小结

    vue 解决报错问题小结

    最近入门vue,用字节跳动的arco初始化一个项目的时候报错自己解决后没来的及截图,从别人那拷贝个网图把,是一样的报错,本文给大家分享vue 解决报错问题小结,感兴趣的朋友一起看看吧
    2023-09-09
  • vue实现页面添加水印

    vue实现页面添加水印

    这篇文章主要为大家详细介绍了vue实现页面添加水印功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-07-07
  • Vue系列:通过vue-router如何传递参数示例

    Vue系列:通过vue-router如何传递参数示例

    本篇文章主要介绍了Vue系列:通过vue-router如何传递参数示例,具有一定的参考价值,有兴趣的可以了解一下。
    2017-01-01
  • vue设置默认首页的操作

    vue设置默认首页的操作

    这篇文章主要介绍了vue设置默认首页的操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-08-08
  • vue如何通过插槽组件之间数据传递

    vue如何通过插槽组件之间数据传递

    这篇文章主要介绍了vue如何通过插槽组件之间数据传递问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-06-06

最新评论