vue基础面试题(day01)

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

v-show和v-if指令的共同点和不同点？

当条件改变的时候v-if是通过DOM节点的添加和删除来控制节点的显示隐藏的，v-show是通过css样式控制节点的显示隐藏的。
v-if的切换成本比较高，v-show渲染成本比较高，所以当切换频繁的时候使用v-show，如果初次渲染数据较多的时候，使用v-if。

vue组件中data为什么必须是一个函数？

Vue 中的 data 必须是个函数，因为当data是函数时，组件实例化的时候这个函数将会被调用，返回一个对象，计算机会给这个对象分配一个内存地址，实例化几次就分配几个内存地址，他们的地址都不一样，所以每个组件中的数据不会相互干扰，改变其中一个组件的状态，其它组件不变。
简单来说，就是为了保证组件的独立性和可复用性，如果data是个函数的话，每复用一次组件就会返回新的data，类似于给每个组件实例创建一个私有的数据空间，保护各自的数据互不影响。
一个组件被复用多次的话，也就会创建多个实例。本质上，这些实例用的都是同一个构造函数。如果data是对象的话，对象属于引用类型，会影响到所有的实例。所以为了保证组件不同的实例之间data不冲突，data必须是一个函数。
而 new Vue 的实例，是不会被复用的，因此不存在引用对象的问题。

$nextTick的使用？

vue的$nextTick其本质是对js执行原理EventLoop的一种应用。
$nextTick的核心是利用promise，mutationObserver、setImmediate、setTimeout的原生
javascript方法来模拟对应的微/宏任务的实现，本质是为了利用JavaScript的这些异步回调任务队列来实现vue框架中自己的异步回调队列。
nextTick是典型的将底层的javascript执行原理应用到具体案例中的示例，引入异步更新队列机制的原因:

• 如果是同步更新，则多次对一个或者多个属性赋值，会频繁触发dom的渲染，可以减少一些无用的渲染。
• 同时由于virtualDom的引入，每一次状态发生变化之后，状态变化的信号会发送给组件，组件内部使用virtualDom进行计算得出需要更新的具体的dom节点，然后对dom进行更新操作，每次更新状态后的渲染过程需要更多的计算，而这种无用功也将浪费更多的性能，所以异步渲染变得更加至关重要。
• vue采用了数据驱动的思想，但是在一些情况下，仍然需要操作dom。有时候，可能遇到这样的情况，dom1的数据发生了变化，而dom2需要从dom1中获取数据，那这时候就会发现dom2的试图并没有更新，这时就需要用到nextTick了。

vue中双向数据绑定是如何实现的？

vue2.0

vue2.0的双向数据绑定是通过数据劫持，结合发布订阅的方式来实现的，也就是说数据和视图同步，数据发生变化，视图也会发生变化，视图变化，数据也会随之发生改变。vue2的双向数据绑定核心是object.definedproperty()方法。给vue中的数据绑定get和set方法，当获取数据的时候，调用get（）方法，当修改数据的时候调用set（）方法。通过watcher监听器去更新视图，完成数据的双向绑定。

主要分为以下几个步骤：
	1.需要observer的数据对象进行递归遍历，包括子属性对象的属性，都应该加上setter和getter，
	这样的话，给这个对象的某个值赋值就会触发setter，那么就能监听到数据的变化了。
	2.compile解析模板指令，将模板中的变量替换成数据，然后初始化渲染页面视图，并将每个指令
	对应的节点绑定更新函数，添加监听函数的订阅者，一旦数据发生变化，收到通知，更新视图。
	3**.watcher**订阅者是observer和compile之间通信的桥梁，主要做的事情是：在自身实例化时，
	往属性订阅器(dep)里面添加自己；自身必须有一个update()方法；待属性变动dep.notice()通知时，
	能调用自身的update（）方法，并触发compile中绑定的回调，则功成身退。
	4.MVVM作为数据绑定的入口，整合observer，compile和watcher三者，通过observer来监听
	自己的model数据变化，通过compile来解析编译模板指令，最终利用watcher搭起observer和compile
	之间的通信的桥梁，达到数据变化——>视图更新——>视图交互变化——>数据module变更的双向绑定效果。

vue3.0

Object.defineProperty 的问题：在Vue中，Object.defineProperty无法监控到数组下标的变化，导致直接通过数组的下标给数组设置值，不能实时响应。目前只针对以上方法做了hack处理，所以数组属性是检测不到的，有局限性Object.defineProperty只能劫持对象的属性,因此我们需要对每个对象的每个属性进行遍历。Vue里，是通过递归以及遍历data对象来实现对数据的监控的，如果属性值也是对象那么需要深度遍历,显然如果能劫持一个完整的对象，不管是对操作性还是性能都会有一个很大的提升。
Proxy的两个优点：可以劫持整个对象，并返回一个新对象，有13种劫持。

vue2和vue3中的v-if和v-for的优先级？

v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 true值的时候被渲染。
v-for 指令基于一个数组来渲染一个列表。v-for 指令需要使用 item in items 形式的特殊语法，其中 items 是源数据数组或者对象，而 item 则是被迭代的数组元素的别名。
在 v-for 的时候，建议设置key值，并且保证每个key值是独一无二的，这便于diff算法进行优化。
在vue中，永远不要把v-if和v-for同时用在同一个元素上，会带来性能方面的浪费。
vue 2.x:当 v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级
vue 3.x:当 v-if 与 v-for 一起使用时，v-if 具有比 v-for 更高的优先级。

vue中常用的修饰符？

事件修饰符：
stop（阻止事件冒泡）
prevent（阻止默认行为）
self（只触发本身）
once（只触发一次）
captrue（事件捕获，与事件冒泡的方向相反，事件捕获由外向内。）
表单修饰符：
lazy（当光标离开标签之后，才会赋值给value）
trim（过滤掉两边的空格）
number（自动将用户输入的值转化为数值类型。）
键盘修饰符：
普通键（enter、tab、delete、space、esc、up…）
系统修饰键（ctrl、alt、meta、shift…）
配合@keyup.键盘名称即可使用。

自定义指令的详解？

我们了解的vue指令有： v-model,v-show,v-for等，除了这些指令，我们也可以实现自己的自定义指令。在vue中代码的抽取和复用主要是通过组件，如果我们想要对DOM元素进行底层操作，可以通过自定义组件来完成。

自定义指令的分类

自定义局部指令：组件中通过 directives 选项，只能在当前组件中使用；
自定义全局指令： app的 directive 方法，可以在任意组件中被使用；

指令的生命周期

一个自定义指令定义的对象， Vue提供了如下的几个钩子函数：
created：元素已创建, 在绑定元素的 attribute 或事件监听器被应用之前调用；
beforeMount：当指令第一次绑定到元素并且在挂载父组件之前调用；
mounted：在绑定元素的父组件被挂载后调用；
beforeUpdate：在更新包含组件的 VNode 之前调用, 绑定元素的内部或后代元素更新也会执行；
updated：在包含组件的 VNode 及其子组件的 VNode 更新后调用；
beforeUnmount：在卸载绑定元素的父组件之前调用；
unmounted：当指令与元素解除绑定且父组件已卸载时，只调用一次；
使用场景：
普通dom元素进行底层操作的时候，可以使用自定义指令。
自定义指令是用来操作dom的，尽管vue推崇数据驱动视图的理念，但并不是所有的情况都适合数据驱动，自定义指令就是一种有效的补充和扩展，不仅可用于定义任何的dom操作，并且是可复用的。
使用案例：

初级应用：
	
	鼠标聚焦
	下拉菜单
	相对时间转换
	滚动动画
高级应用：
	
	自定义指令实现图片懒加载
	自定义指令集成第三方插件

对vue中的slot插槽的理解？

slot又名插槽，是vue的内容分发机制，组件内部的模板引擎使用slot元素作为承载分发内容的出口。插槽slot是子组件的一个模板标签元素，而在一个标签元素是否显示，以及怎么显示是父组件决定的。slot又分为三类，默认插槽，具名插槽，作用域插槽。
默认插槽：又称匿名插槽，当slot没有指定name属性值的时候，一个组件内只能有一个匿名插槽。
具名插槽：带有具体名字的插槽，也就是带有name属性的slot，一个组件可以出现多个具名插槽。
作用域插槽：默认插槽，剧名插槽的一个变体，可以是匿名插槽，也可以是具名插槽，该插槽的不同点在子组件渲染作用域插槽时，可以将子组件内部的数据传递给父组件，让父组件根据子组件传递过来的数据决定如何渲染该插槽。

vue初始化页面闪动问题的理解？

当网速较慢，vue.js文件还没有加载完时，在页面上会显示{{message}}的字样，知道vue创建实例，编译模板时，dom才会被替换，所以这个过程屏幕是闪动的。
所以解决这个问题，需要在style样式中设置【v-cloak】{display：none}。在一般情况下，v-clock是一个解决初始化慢导致页面闪动的最佳实践，对于简单的项目很实用。
但是在具有工程化的项目里，比如使用了webpack和vue-router的项目中，html结构只是一个空的div元素，剩余的内容都是由路由去挂载不同的组件完成的，所以不需要v-cloak。

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

vue.set():响应式新增与修改数据 。

用法：target：要更改的数据源(可以是对象或者数组)
key：要更改的具体数据
value ：重新赋的值

Vue.delete（）：删除对象或数组中的元素，通过key或数组索引，可以触发试图更新。
Vue 包含一组观察数组的变异方法，所以它们也将会触发视图更新。这些方法如下：

push()		向数组的末尾添加一个或多个元素，并返回新的长度。
pop()			删除最后一个元素，把数组长度减 1，并且返回它删除的元素的值。 
shift() 		把数组的第一个元素从其中删除，并返回第一个元素的值。
unshift()		向数组的开头添加一个或更多元素，并返回新的长度。 
splice() 		向/从数组中添加/删除项目，然后返回被删除的项目。 该方法会改变原始数组。 
sort()		对数组的元素进行排序。
reverse() 	颠倒数组中元素的顺序。
Vue包含一组观察数组变异的方法，使用它们改变数组也会触发视图更新不变异的方法。

不变异的方法：

filter() :过滤数组，会产生一个新的数组。
concat() ：该方法用于连接两个或多个数组。不会改变现有的数组，返回一个新的数组。
slice(start，end)截取数组 。