【Vue】面试题总结 - 基础知识总结 - 复习专用 - 组件相关 - Vue家族 - 源码相关

本来是想总结一些面试题，这一总结起来，直接又重新学了一遍Vue
就当作复习Vue用的，总结了一些基础知识也有一些面试题
持续更新…

1. 基础知识

1.1 指令

v-text : 更新元素的 textContent
v-html : 更新元素的 innerHTML
v-if : 如果为true, 当前标签才会输出到页面
v-else: 如果为false, 当前标签才会输出到页面
v-show : 通过控制display样式来控制显示/隐藏
v-for : 遍历数组/对象
v-on : 绑定事件监听, 一般简写为@
v-bind : 强制绑定解析表达式, 可以省略v-bind
v-model : 双向数据绑定
ref : 为某个元素注册一个唯一标识, vue对象通过$refs属性访问这个元素对象
v-cloak : 使用它防止闪现表达式, 与css配合: [v-cloak] { display: none }

1.2 v-if与v-show 显式

v-if是控制元素是否加载到页面上（有性能开销）
v-show是控制元素的显示与隐藏 （初始创建时加载一次）

频繁切换使用v-show

使用v-if会有性能开销。每次插入或者移除元素时都必须要生成元素内部的DOM树，这在某些时候是非常大的工作量。
而v-show除了在初始创建开销时之外没有额外的开销。

1.3 v-for 遍历

数组

v-for="(item, index) in array"

对象

v-for="(value, key, index) in object"

key的重要性：key不要乱写（如random或index）

1.4 v-if与v-for不能同时用

v-for优先级高一点，会循环之后再判断条件（重复判断），开销比较大

可以把 v-if 放在【父】标签或者【子】标签中

1.5 data、计算属性、方法

• data对象：可以使用它来存储字符串、数组和对象等数据；
• 方法：可以使用它来存储函数并在模板中调用；
• 计算属性：可以使用它将函数存储下来，然后像访问data对象中的属性一样调用

1.6 计算属性与方法

1. 计算属性会被缓存（只有当计算属性的依赖发生变化时，代码才会被再次执行）

2. 计算属性可以设置setter和getter

1.7 方法中的this

在方法中，this指向该方法所属的组件
可以使用this访问data对象的属性和其他方法

1.8 事件对象

默认传入 $event
有参数时，显式的在最后传入 $event

<p>{
  {number}}</p>
<button @click="incrementBy1">点击+1</button>
<button @click="incrementBy10(10, $event)">点击+10</button>

data(){
   
	return {
   
		number: 0
	}
}
methods: {
   
	incrementBy1(e){
   
		this.number++
		console.log(e.__proto__.constructor) // f MouseEvent()
		console.log(e.target) // <button>点击+1</button>
		console.log(e.currentTarget) // <button>点击+1</button>
	},
	incrementBy10(step, e){
   
		this.number+=step
		console.log(e.__proto__.constructor) // f MouseEvent()
	}
}

1. event是原生的
2. 事件被挂载到当前元素

1.9 事件修饰符

.prevent 阻止执行事件默认行为
.stop 阻止事件继续传播
.once 只在第一次触发事件的时候触发事件侦听器
.capture 使用捕获模式
.self 只监听元素自身而不是它的子元素上触发的事件

还有一些按键修饰符
@click.ctrl 按CTRL或 CTRL加Alt或Shift 一同按下
@click..ctrl.exact 只按CTRL键
@click..exact 没有任何系统修饰符被按下

1.10 侦听器 watch

侦听器可以监听data对象属性或者计算属性的变化
当监听的属性发生变化时，侦听器会被传入两个参数：所监听属性的当前值和原来的旧值
监听整个对象被称作深度监听，通过将deep选项设置为true来开启这一特性

data() {
   
	return {
   
		name: 'YK菌',
		info: {
   
			hobby: '写博客'
		}
	}
},
watch: {
   
	name(newValue, oldValue){
   
		console.log(newValue, oldValue);
	},
	info: {
   
		handle: function(newValue, oldValue){
   
			console.log(newValue, oldValue);
		},
		deep: true
}

当数据改变时，会调用watch里对应的函数
引用类型值改变后，新旧值都改变了，所以拿不到oldValue

1.11 动态绑定class、style

1. 类名class

对象

:class="{ 'active': isActive, 'error': isError }"

data(){
   
	return {
   
		isActive: true,
		isError: false
	}
}

数组

:class="[activeCls, errorCls]"

data(){
   
	return {
   
		activeCls: 'active',
		errorCls: 'error'
	}
}

对象数组之间可以互相嵌套

2. 内联样式style

对象

:style="{ 'color': color, 'fontSize': fontSize + 'px' }"

data(){
   
	return {
   
		color: 'red',
		fontSize : 14
	}
}

数组

:style="[ styleA, styleB ]"

1.12 过滤器

使用
只可以在插值和v-bind指令中使用过滤器

{
   {
    origin | format }}

组件中定义

filters: {
   
	format(value){
   
		return value + 2;
	}
}

全局定义

Vue.filter('format', function(value){
   
	return value + 2;
})

过滤器是组件中唯一不能使用this来访问数据或者方法的地方
因为过滤器应该是纯函数，也就是说对于同样的输入每次都返回同样的输出，而不涉及任何外部数据。如果想在过滤器中访问其他数据，可以将它作为参数传入

1.13 v-clock

解决初始化慢导致页面闪动
不需要表达式，和CSS的display:none配合使用

<div v-clock>{
  { data }}</div>

[v-clock] {
   
	display: none;
}

1.14 生命周期钩子

生命周期钩子是一系列会在组件生命周期——从组件被创建并添加到DOM，到组件被销毁的整个过程——的各个阶段被调用的函数

一个有八个 四组

beforeCreate在实例初始化前被触发。
created会在实例初始化之后、被添加到DOM之前触发。
beforeMount会在元素已经准备好被添加到DOM，但还没有添加的时候触发。
mounted会在元素创建后触发（但并不一定已经添加到了DOM，可以用nextTick来保证这一点）。
beforeUpdate会在由于数据更新将要对DOM做一些更改时触发。
updated会在DOM的更改已经完成后触发。
beforeDestroy会在组件即将被销毁并且从DOM上移除时触发。
destroyed会在组件被销毁后触发

1.15 什么是nextTick

Vue.nextTick( [callback, context] )

vm.$nextTick( [callback, context] )

Vue 是异步渲染
data改变后，DOM不会立即渲染
$nextTick 会在DOM渲染之后被触发，以获取最新的DOM节点

1.16 自定义实现v-model

v-model实现数据双向绑定实际上是一个语法糖

<input type="text" v-model="name">

相当于

<input type="text" :value="name" @input="name = $event.target.value">

<template>
    <input type="text" :value="value" @input="handleInput" :placeholder="placehodler" />
</template>

<script>
  export default {
   
    name: 'YkInput',
    props: {
   
        value: ['String', 'Number'],
        placeholder: String
    },
    methods: {
   
        handleInput ($event) {
   
            // 通过input标签的原生事件input将值emit出去，以达到值得改变实现双向绑定