本文供稿:南京正厚陈琦明老师
Vue-loader是Webpack的加载模块,它使我们可以用Vue文件格式编写单文件组件。
单文件组件文件有三个部分,(模板、脚本和样式)。vue-loader模块允许webpack使用单独的加载模块(例如SASS或SCSS加载器)提取和处理每个人部分。该设置使我们可以使用Vue文件无缝编写程序。
vue-loader模块还允许把静态资源视为模块依赖性,并允许使用webpack加载器进行处理。而且还允许还开发过程中进行热重装。
2、prop如何指定其类型要求?通过实现prop验证选项,可以单个prop指定类型要求。这对生产没有影响,但是会在开发段发出警告,从而帮助开发人员识别传人数据和prop的特定类型要求的潜在问题。
配置三个prop的例子:
、什么是虚拟DOM?
文档对象模型或DOM定义一个接口,该接口允许JavaScript之类的语言访问和操作HTML文档。元素由树中的节点表示,并且接口允许我们操作它们。但是此接口需要付出代价,大量非常频繁的DOM操作会使页面速度变慢。
Vue通过在内存中实现文档结构的虚拟表示来解决此问题,其中虚拟节点(Node)表示DOM树中的节点。当需要操纵时,可以在虚拟DOM的内存中执行计算和操作,而不是在真实DOM上进行操纵。这自然会更快,并且允许DOM算法计算最优化算出计算出最优化的方式来更新实际DOM结构。
一旦计算出,就将其应用于实际的DOM树,这就提高了性能,这就是为什么基于虚拟DOM的框架(例如Vue和React)如此突出的原因。
4、什么是Vue插件?
Vue插件允许开发人员构建全局级别的功能并将其添加到Vue。用于向程序添加可以全局访问的方法和属性、资源、选项,mixin以及其他自定义APl。VueFire是Vue插件的一个例子,该插件添加了Firebase特定的方法并将其绑定到整个程序。之后firebase函数可在程序结构中的任何位置的this上下文中使用。
5、什么是mixin?
Mixin使我们能够为Vue组件编写可插拔和可重用的功能。如果你希望再多个组件之间重用一组组件选项,例如生命周期hook、方法等,则可以将其编写为mixin,并在组件中简单的引用它。然后将mixin的内容合并到组件中。如果你要在mixin中定义生命周期hook,那么它在执行时将优化于组件自已的hook。
6、什么是渲染函数?举个例子。
vue允许我们以多种方式构建模板,其中最常见的方式是只把HTML与特殊指令和mustache标签一起用于相响应功能。但是你也可以通过JavaScript使用特殊的函数类(称为渲染函数)来构建模板。这些函数与编译器非常接近,这意味它们比其他模板类型更高效、快捷。由于你使用JavaScript编写渲染函数,因此可以在需要的地方自由使用该语言直接添加自定义函数。
对于标准HTML模板的高级方案非常有用。这里是用HTML作为模板Vue程序
这里是用渲染函数开发的同一个程序:
输出如下:
FruitBasket
1、Apples2、Oranges、Kiwi
在上面的例子中,我们用了一个函数,它返回一系列createElement()调用,每个调用负责生成一个元素。尽管v-for指令在基于HTML的模板中起作用,但是当时用渲染函数时,可以简单的用标准的.map()函数遍历fruits数据数组。
7、哪个生命周期hook最合适从APl调用中获取数据?
尽管这取决于组件的用途及,但是创建的生命周期hook内通常非常适合放置APl调用。这时可以使用组件的数据和响应性功能,但是该组件尚未渲染。
8、什么时候调用“updated”生命周期hook?
在更新响应性数据并重新渲染虚拟DOM之后,将调用更新的hook。它可以用于执行与DOM相关的操作,但是(默认情况下)不能保证子组件会被渲染,尽管也可以通过在更新函数中使用this.$nextTick来确保。
9、在Vue实例中编写生命周期hook或其他option/propertie时,为什么不使用箭头函数?
箭头函数自已没有定义this上下文中。当你在Vue程序中使用箭头函数(=)时,this关键字病不会绑定到Vue实例,因此会引发错误。所以强烈建议改用标准函数声明。
10、什么是异步组件?
当大型程序使用大量组件时,从服务器上同时加载所有组件可能是没有意义的。在这种情况下,Vue允许我们在需要时定义从服务器异步加载的组件。在声明或注册组件时,Vue接受提供Promise的工厂函数。然后可以在调用该组件时对其进行“解析”。
通过仅加载基本组件并把异步组件的加载推迟到未来的调用时间,可以节省带宽和程序加载时间。这是一个异步组件的简单示例。
当以这种方式使用时,Webpack的代码拆分将用于提供此功能。