前端关于Vue的面试题（二）

17.Vue 组件中 data 为什么必须是函数

//为什么data函数里面要return一个对象
<script>
    export default {
        data() {
            return {  // 返回一个唯一的对象，不要和其他组件共用一个对象进行返回
                menu: MENU.data,
                poi: POILIST.data
            }
        }
    }
</script>

因为一个组件是可以共享的，同一个组件类可以创建很多歌组件对象，但每一个组件对象的data应该是私有的，所以每个组件都要return一个新的data对象，返回一个唯一的对象，不要和其他组件共用一个对象。

18.v-for 与 v-if 的优先级

当它们处于同一节点，v-for的优先级比v-if更高，这意味着 v-if将分别重复运行于每个 v-for循环中。

19.vue中子组件调用父组件的方法

主要步骤：

1、在父组件创建子组件实例的时候，通过v-on给子组件传递一个自定义事件。
2、在子组件 中 通过'$emit'触发 当前实例上的 自定义事件。

示例：

父组件：

<template>
	<div class="fatherPageWrap">
          <h1>这是父组件</h1>
          <!-- 引入子组件，v-on监听自定义事件 -->
          <emitChild v-on:emitMethods="fatherMethod"></emitChild>
	</div>
</template>

<script type="text/javascript">
    import emitChild from '@/page/children/emitChild.vue';
	export default{
		data () {
		    return {}
		},
		components : {
            emitChild
		},
		methods : {
		    fatherMethod(params){
                 alert(JSON.stringify(params));
            }
		}
	}
</script>

子组件：

<template>
	<div class="childPageWrap">
         <h1>这是子组件</h1>
	</div>
</template>

<script type="text/javascript">
	export default{
		data () {
		   return {}
		},
		mounted () {
           //通过 emit 触发
           this.$emit('emitMethods',{"name" : 123});
		}
	}
</script>

结果：子组件 会调用 父组件的fatherMethod 方法，该并且会alert 传递过去的参数：{"name":123}

20.vue中 keep-alive 组件的作用

keep-alive：主要用于保留组件状态或避免组件重新渲染。

属性：

• include:字符串或正则表达式。只有匹配的组件会被缓存。
• exclude：字符串或正则表达式。任何匹配的组件都不会被缓存。

21.vue中如何编写可复用的组件

组件由状态、事件和嵌套的片断组成。

状态 props，是组件当前的某些数据或属性，如 video 中的 src、width 和 height。

事件 events，是组件在特定时机触发一些操作的行为，如 video 在视频资源加载成果或失败时会触发对应的事件来执行处理。

片段 slots，指的是嵌套在组件标签中的内容，该内容会在某些条件下展现出来，如在浏览器不支持 video 标签时显示提示信息。

在编写组件的时候，要时刻考虑组件的复用性，良好的可复用组件应当定义一个清晰的公开接口。

• props 允许外部环境传递数据给组件
• events 允许组件触发外部环境的副作用
• slots 允许外部环境将额外的内容组合在组件中。

<my-video
  :playlist="playlist"
  width="320"
  height="240"
  @load="loadHandler"
  @error="errorHandler"
  @playnext="nextHandler"
  @playprev="prevHandler">
  <div slot="endpage"></div>
</my-video>

22.什么是vue生命周期和生命周期钩子函数

vue 的生命周期是： vue 实例从创建到销毁，也就是从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程。

在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。

23.vue生命周期钩子函数有哪些

生命周期钩子函数（11个）	类型	详细
beforeCreate	Function	在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。
created	Function	在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测 (data observer)， 属性和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。
beforeMount	Function	在挂载开始之前被调用：相关的 render 函数首次被调用。
mounted	Function	el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.$el 也在文档内。
beforeUpdate	Function	数据更新时调用，发生在虚拟 DOM 打补丁之前。这里适合在更新之前访问现有的 DOM，比如手动移除已添加的事件监听器。该钩子在服务器端渲染期间不被调用，因为只有初次渲染会在服务端进行。
updated	Function	由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。
activated	Function	keep-alive 组件激活时调用。该钩子在服务器端渲染期间不被调用。
deactivated	Function	keep-alive 组件停用时调用。该钩子在服务器端渲染期间不被调用。
beforeDestroy	Function	实例销毁之前调用。在这一步，实例仍然完全可用。该钩子在服务器端渲染期间不被调用。
destroyed	Function	Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。该钩子在服务器端渲染期间不被调用。
errorCaptured（2.5.0+ 新增）	(err: Error, vm: Component, info: string) => ?boolean	当捕获一个来自子孙组件的错误时被调用。此钩子会收到三个参数：错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串。此钩子可以返回 false 以阻止该错误继续向上传播。

注意：

1、mounted、updated不会承诺所有的子组件也都一起被挂载。如果你希望等到整个视图都渲染完毕，可以用vm.$nextTick替换掉mounted、updated：

updated: function () {
    this.$nextTick(function () {
        // Code that will run only after the
        // entire view has been re-rendered
    })
}

2、http请求建议在 created 生命周期内发出

vue生命周期图示：

24.vue如何监听键盘事件中的按键

我们可以通过按键修饰符来监听键盘事件中的按键 。Vue允许为 v-on在监听键盘事件时添加按键修饰符：

<input v-on:keyup.enter="submit">

<!-- 缩写语法 -->
<input @keyup.enter="submit">

全部的按键别名：

- .enter
- .tab
- .delete (捕获“删除”和“退格”键)
- .esc
- .space
- .up
- .down
- .left
- .right

可以通过全局 config.keyCodes 对象自定义按键修饰符别名：

// 可以使用 `v-on:keyup.f1`
Vue.config.keyCodes.f1 = 112

系统修饰键：

2.1.0 新增

可以用如下修饰符来实现仅在按下相应按键时才触发鼠标或键盘事件的监听器。
- .ctrl
- .alt
- .shift
- .meta

<!-- Alt + C -->
<input @keyup.alt.67="clear">

<!-- Ctrl + Click -->
<div @click.ctrl="doSomething">Do something</div>

2.5.0 新增

.exact修饰符允许你控制由精确的系统修饰符组合触发的事件。

<!-- 即使 Alt 或 Shift 被一同按下时也会触发 -->
<button @click.ctrl="onClick">A</button>

<!-- 有且只有 Ctrl 被按下的时候才触发 -->
<button @click.ctrl.exact="onCtrlClick">A</button>

<!-- 没有任何系统修饰符被按下的时候才触发 -->
<button @click.exact="onClick">A</button>

鼠标按钮修饰符：

2.2.0 新增

- .left
- .right
- .middle

这些修饰符会限制处理函数仅响应特定的鼠标按钮。

25.vue更新数组时触发视图更新的方法

Vue 包含一组观察数组的变异方法，所以它们也将会触发视图更新。这些方法如下：

- push()
- pop()
- shift()
- unshift()
- splice()
- sort()
- reverse()

当我们调用数组的上面这些方法修改数组的时候，页面会更新

26.vue中对象更改检测的注意事项

由于 JavaScript 的限制，Vue 不能检测对象属性的添加或删除：

var vm = new Vue({
  data: {
    a: 1
  }
})
// `vm.a`  响应式属性

vm.b = 2
// `vm.b`  非响应式属性

对于已经创建的实例，Vue 不能动态添加根级别的响应式属性。但是，可以使用 `Vue.set(object, key, value)`方法向嵌套对象`添加响应式属性`。例如，对于：

var vm = new Vue({
  data: {
    userProfile: {
      name: 'Anika'
    }
  }
})


你可以添加一个新的 age 属性到嵌套的 userProfile对象：
Vue.set(vm.userProfile, 'age', 27)

你还可以使用 vm.$set实例方法，它只是全局Vue.set 的别名：
vm.$set(vm.userProfile, 'age', 27)

有时你可能需要为已有对象赋予多个新属性，比如使用 `Object.assign()`或 `_.extend()`。在这种情况下，你应该用两个对象的属性创建一个新的对象。所以，如果你想`添加新的响应式属性`，不要像这样：

Object.assign(vm.userProfile, {
  age: 27,
  favoriteColor: 'Vue Green'
})

应该这样做：

vm.userProfile = Object.assign({}, vm.userProfile, {
  age: 27,
  favoriteColor: 'Vue Green'
})

27.如何解决非工程化项目，网速慢时初始化页面闪动问题？

使用`v-cloak`指令，`v-cloak`不需要表达式，它会在`Vue`实例结束编译时从绑定的HTML元素上移除，
经常和CSS的`display:none`配合使用。

<div id="app" v-cloak>
	{
   {
   message}}
</div>

<script>
var app = new Vue({
   
    el:"#app",
    data:{
   
        message:"这是一段文本"
    }
})
</script>


[v-cloak]{
   
    display:none;
}

在一般情况下，`v-cloak`是一个解决初始化慢导致页面闪动的最佳实践，对于简单的项目很实用。

28.v-for产生的列表，如何实现active样式的切换？

通过设置当前 currentIndex 实现：

<template>
	<div class="toggleClassWrap">
	 <ul>
	    <!--li是否有clicked样式取决于当前的currentIndex等于多少-->
		<li @click="currentIndex = index" v-bind:class="{clicked: index === currentIndex}" v-for="(item, index) in desc" :key="index">
			<a href="javascript:;">{
   {
   item.ctrlValue}}</a>
		</li>
	</ul>
	</div>
</template>

<script type="text/javascript">
	export default{
   
		data () {
   
			return {
   
				desc:[
                    {
   
                        ctrlValue:"test1"
                    },
                    {
   
                        ctrlValue:"test2"
                    },
                    {
   
                        ctrlValue:"test3"
                    },
                    {
   
                        ctrlValue