Vue.js中的高级面试题及答案

对于标准 HTML 模板的高级方案非常有用。

这里是用 HTML 作为模板 Vue 程序

new Vue ({
 el: '#app',
 data:{
  fruits: ['Apples','Oranges','Kiwi'] },
 template:
 `<div>
  <h1>Fruit Basket</h1>
  <ol>
  <li v-for="fruit in fruits">{{ fruit }}</li>
  </ol>
  </div>
 `
});

这里是用渲染函数开发的同一个程序：

new Vue({
 el: '#app',
 data: {
 fruits: ['Apples', 'Oranges', 'Kiwi'] },
 render: function(createElement) {
 return createElement('div', [
  createElement('h1', 'Fruit Basket'),
  createElement('ol', this.fruits.map(function(fruit) {
  return createElement('li', fruit);
  }))
 ]);
 }
});

输出如下：

Fruit Basket

1、Apples 2、Oranges 3、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 的工厂函数。然后可以在调用该组件时对其进行 “解析”。

通过仅加载基本组件并把异步组件的加载推迟到未来的调用时间，可以节省带宽和程序加载时间。

这是一个异步组件的简单示例。

new Vue({
 components: {
  'tweet-box': () => import('./components/async/TweetBox')
 }
});

当以这种方式使用时，Webpack的代码拆分将用于提供此功能。