三十七个常见Vue面试题
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了三十七个常见Vue面试题相关的知识，希望对你有一定的参考价值。
参考技术A 映射关系简化，隐藏controller MVVM在MVC的基础上，把控制层隐藏掉了。Vue不是一个MVVM框架，它是一个视图层框架。
ViewModal是一个桥梁，将数据和视图进行关联。
数组和对象类型的值变化的时候，通过defineReactive方法，借助了defineProperty，将所有的属性添加了getter和setter。用户在取值和设置的时候，可以进行一些操作。
缺陷：只能监控最外层的属性，如果是多层的，就要进行全量递归。
get里面会做依赖搜集（dep[watcher, watcher]） set里面会做数据更新（notify，通知watcher更新）
vue中对数组没有进行defineProperty，而是重写了数组的7个方法。 分别是：
因为这些方法都会改变数组本身。
数组里的索引和长度是无法被监控的。
Vue初始化的时候，挂载之后会进行编译。生成renderFunction。
当取值的时候，就会搜集watcher，放到dep里面。
当用户更改值的时候，就会通知watcher，去更新视图。
这个问题的核心是如何将template转换成render函数。
Vue的生命周期钩子是回调函数，当创建组件实例的过程中会调用相应的钩子方法。 内部会对钩子进行处理，将钩子函数维护成数组的形式。
Vue的mixin的作用就是抽离公共的业务逻辑，原理类似对象的继承，当组件初始化的时候，会调用mergeOptions方法进行合并，采用策略模式针对不同的属性进行合并。 如果混入的数据和本身组件的数据有冲突，采用本身的数据为准。
缺点：命名冲突、数据来源不清晰
new Vue是一个单例模式，不会有任何的合并操作，所以根实例不必校验data一定是一个函数。 组件的data必须是一个函数，是为了防止两个组件的数据产生污染。 如果都是对象的话，会在合并的时候，指向同一个地址。 而如果是函数的时候，合并的时候调用，会产生两个空间。
nextTick是一个微任务。
Vue的diff算法是平级比较，不考虑跨级比较的情况。内部采用深度递归的方式+双指针方式比较
所以采用watcher + Diff算法来检测差异。
产生组件虚拟节点 -> 创建组件的真实节点 -> 插入到页面
属性更新会触发patchVnode方法，组件的虚拟节点会调用prepatch钩子，然后更新属性，更新组件。
先渲染异步占位符节点 -> 组件加载完毕后调用forceUpdate强制更新。
正常的一个组件是一个类继承了Vue。
函数式组件，就是一个普通的函数。
主要作用是为了实现批量传递数据。
provide/inject更适合应用在插件中，主要实现跨级数据传递。
首先，v-for和v-if 不能在同一个标签中使用。
先处理v-for，再处理v-if。
如果同时遇到的时候，应该考虑先用计算属性处理数据，在进行v-for，可以减少循环次数。
在组件上用的v-model，是model和callback
在普通元素上用v-model，会生成指令，还可能因为不同的元素：
指令在什么时候会调用？
源码：
普通插槽是渲染后做替换的工作。父组件渲染完毕后，替换子组件的内容。
在模板编译的时候，处理组件中的子节点和slot标签
在创建元素的时候，用_t()方法方法来替换_v()的内容。
作用域插槽可以拿到子组件里面的属性。在子组件中传入属性然后渲染。
作用域插槽的编译结果：
Vue.use是用来使用插件的。我们可以在插件中扩展全局组件、指令、原型方法等。 会调用install方法将Vue的构建函数默认传入，在插件中可以使用vue，无需依赖vue库
使用有两个场景，一个是动态组件，一个是router-view
这里创建了一个白名单和一个黑名单。表明哪些需要需要做缓存，哪些不需要做缓存。以及最大的缓存个数。
缓存的是组件的实例，用key和value对象保存。
加载的时候，监控include和exclude。
如果不需要缓存，直接返回虚拟节点。
如果需要缓存，就用组件的id和标签名，生成一个key，把当前vnode的instance作为value，存成一个对象。这就是缓存列表
如果设置了最大的缓存数，就删除第0个缓存。新增最新的缓存。
并且给组件添加一个keepAlive变量为true，当组件初始化的时候，不再初始化。
钩子函数有三种：
Vuex是专门为vue提供的全局状态管理系统，用于多个组件中的数据共享、数据缓存。
问题：无法持久化。
Vue2.0学习—watch和computed对比（三十七）
【Vue2.0学习】—watch和computed对比（三十七）
计算属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="root">
姓：<input type="text" v-model="firstname"> <br> <br> 名： <input type="text" v-model="lastname"> <br> <br> 姓名：
<span>fullName</span>
</div>
<script>
const vm = new Vue(
el: "#root",
data:
firstname: '张',
lastname: '三'
,
computed:
//完整写法
// fullName:
// //当有人读取fullName时，get就会被调用且返回值作为fullName的值
// // get什么时候调用？初次读取fullName时；所依赖的数据发生变化
// get()
// console.log('get被调用了');
// return this.firstname + '-' + this.lastname
// ,
// set(value)
// console.log('set', value);
// const arr = value.split('-');
// this.firstname = arr[0];
// this.lastname = arr[1];
//
//
//
//简写
fullName()
return this.firstname + this.lastname
)
</script>
</body>
</html>
watch 属性
以上是关于三十七个常见Vue面试题的主要内容，如果未能解决你的问题，请参考以下文章