前端面试（2021（Vue篇））

1.社么是Vue，为什么要使用Vue

Vue是一个基于JavaScript的渐进式的前端开发框架
主要的目的是为了提高项目的开发效率的运行性能

2.什么是插值表达式

插值表达式是Vue中一种特殊的语法，用于输出表达式运运算的结果数据
插值表达式可以直接输出输出变量数据、可以完后简单运算符的运算操作、可以调用系统函数、可以调用自定义函数、可以使用三元表达式运算

3.如果要在页面中渲染变量message中的数据，有几种操作方式

插值表达式：{{message}}
指令渲染：v-text、v-html、v-once（结合插值表达式进行一次性渲染）

4.简述v-show和v-if指令的区别和联系

v-show、v-if指令，都可以根据条件判断，完成一个目标数据的显示或者隐藏
v-show是通过display完成显示隐藏效果，如果一个元素需要频繁的显示隐藏的切换，可以使用v-show，如选项卡
v-if是通过DOM节点是否加载完成显示隐藏效果，如果一个元素很少进行显示隐藏的切换、可以使用v-if指令，如登录用户信息展示

5.通过class属性给指定元素添加样式，数组方式和对象方式分别怎么实现

Vue中可以直接绑定元素的class属性，完成样式的动态赋值和控制
数组方式

对象方式

...

6.简述你在项目中使用过的Vue指令以及它们的含义

v-text 用于渲染展示是文本数据
v-html 用于渲染展示文本数据，并在渲染的同时解释执行标签语法
v-once 用于和展示数据的操作语法配合使用，在页面中完成一次性数据加载
v-if 用于根据条件控制元素显示/隐藏
v-for 用于支持程序流程控制，循环渲染输出数据
v-bind 用于动态绑定目标元素的属性，将属性值进行动态数据控制
v-on 用于给目标节点添加事件控制的指令

7.下面的代码输出结果正确吗，为什么

const vm = new Vue({
      methods:{
          handlerEvent(event){
                    console.log(event)  //鼠标点击时，获取到事件对象
            }
    }
})

如果只是事件函数的调用，函数名称后面不需要添加括号，函数执行时，第一个形式参数会被系统自动注入一个事件对象给函数使用
如果时间函数和调用执行时需要传递参数，函数名后面必须添加括号，如果要使用事件对象，必须在括号内部传递（$event）(固定语法)

8.什么是事件冒泡，原生JS中如何阻止事件冒泡，Vue中如何阻止事件冒泡

事件冒泡是JS语法中的一种事件触发机制，描述的是目标元素上的事件一旦发生生，就会根据DOM节点结构，将事件逐步一次出发到父节点上的一种事件机制
原生JS只能通过兼容性语法阻止事件冒泡
event.stopPropagation?event.stopPropgation():event.cancelBubble=true
Vue中对于事件冒泡的处理进行了封装，提供了事件修饰符完成阻止冒泡行为，即在标签对象的事件属性上，添加@事件对象.stop=‘处理函数’

9. .self事件修饰符的作用，是让标签对象的事件只能由发生在当前标签上的操作触发，是否支持事件捕获和事件冒泡行为

.self事件修饰符的作用，是让标签对象的事件只能由发生在当前标签上的操作触发，当前标签上的事件触发，就是通过事件触发机制从文档根节点逐步触发到当前节点，如果没有事件触发机制（事件捕获）当前节点上就不会有事件存在
事件冒泡行为，.self修饰符仅仅是让当前节点的事件由当前节点触发，包含的子节点的事件以及自身触发的事件引起冒泡行为不会被阻止，依然会向父节点冒泡触发

10.表单修饰符.lazy的作用是什么

.lazy作为表单修饰符，经常用在表单元素上，用于将表单数据的同步机制延迟到表单元素失去焦点时再进行同步，节省资源、提高整体效率

11.Vue的数据双向绑定特性具体指代的是什么绑定方式，请简述数据双向绑定的底层的实现原理

Vue数据双向绑定的特性，指代的是Vue实例中的数据和网页视图中的数据绑定，实例中数据的更新会直接影响视图的渲染展示，视图中的数据更新会自动同步到实例中的数据，这样的操作机制就是数据双向绑定机制；Vue底层主要是通过Object.defineProperty()数据劫持的操作方式完成的

12.什么是数据劫持

数据劫持本质上就是一种变量的高级声明方式，通过数据劫持的语法声明的变量，可以针对变量数据的查询、编辑进行监听，随时根据变量的使用情况进行功能的添加，如数据的双向绑定，完成数据的自动同步和自动渲染

13.什么是侦听器

侦听器是Vue中的一个对象，主要用于监听实例中指定变量的数据是否发生更新的处理模块，在实例中通过watch进行声明
侦听器是Vue实例中，使用watch配置选项声明的一个对象，对象的内部可以监听实例中指定名称的变量，当变量的数据发生更新时触发对应的侦听器，在侦听器处理函数中完成对应的数据运算或者业务处理

14.Vue中计算属性和普通函数的区别

Vue中的计算属性本质上也是一个处理函数，可以和普通函数一样进行调用执行，普通函数就是声明在methods中的函数，可以调用执行
计算属性声明在实例中的computed配置选项上，可以和普通变量一样直接访问，访问的时候相当于调用执行函数，执行结果会及逆行缓存，如果下次继续访问时参与的数据没有发生变化就会直接使用缓存的数据结果，不会再次执行函数内部的代码，性能上得到了提升
普通函数声明在实例中的methods配置选项上，必须调用才能执行，每次调用执行时都会重新执行函数内部代码

15.Vue中计算属性和侦听器的区别是

Vue中计算属性本质上一个函数，侦听器内部也包含了处理函数，都可以在数据发生变化时自动调用执行函数内部的代码得到运算结果，计算属性和侦听器都可以监听变量数据是否发生更新
计算属性本质上是一个存粹的函数，通过函数名称直接访问数据，和普通变量的访问方式一致；调用执行时如果数据没有发生变化就会使用上一次缓存的运算结果，不会再次执行函数内部的代码，计算属性可以同时监听一个或多个数据的变化
侦听器本质上是一个包含了处理函数的对象，主要监听指定变量的数据是否发生变化，一旦监听的变量发生数据更新就会自动执行对应侦听函数完成数据的运算或者业务处理，每个侦听器对象一般只监听一个变量的数据变化

16.Vue中的过滤器有什么作用，全局过滤器和私有过滤器有什么区别

Vue中的过滤器，主要的作用是格式化渲染插值表达式或者指令中的数据输出格式
全局过滤器在Vue实例创建之前，声明在Vue.filter()函数上，全局过滤器可以用在所有声明后的Vue实例中
私有过滤器也成为组件过滤器，一般声明在当前实例的filters配置选项上，私有过滤器只能用在当前实例作用范围中

17.Vue中数据双向绑定的底层实现原理是什么？请实现一个简单的数据双向绑定功能

Vue非常明显的一个特征就是数据实现了双向绑定，简化了实例对象中的数据和网页视图中的数据的双向更新，底层主要是通过数据劫持实现的

let temp = ''
Object.defindProperty(window,'myVariable',{
  //获取数据自定执行get()
  get() {
           return temp
    },
   //设置数据自动执行set()
  set(val) {
        temp = val
        //自动执行数据渲染
    }
})

18.Vue实例中的data为什么是一个对象，组件中的data为什么是一个返回对象的函数

Vue开发的应用一般都是单页面应用，通常情况下只唯一一个Vue实例，所以实例中的数据可以在当前项目中共享，所以Vue实例中的data是一个对象
Vue组件的出现，是为了组件中的视图和数据可以复用，被复用的组件在不同的复用位置可能操作不同的数据，所以每个组件的data数据必须相互独立，所以组件中data是一个函数，函数内部返回一个只能让当前组件使用的对象数据

19.Vue实例中，数组通过push()/pop()函数的数据更新可以完成数据双向渲染，为什么通过[索引]的形式增加数据不会引起数据双向渲染，应该怎么解决

Vue中的数据双向绑定底层是通过数据劫持实现的，数据劫持中如果对目标对象数据进行更新操作就会自动调用set()函数完成数据赋值和视图的更新，但是如果数据是查询操作的时候会自动调用get()函数完成数据获取
数组通过push（）/pop（）函数是一种显式的数据更新操作，所以会自动完成数据同步渲染；通过[索引]的形式本质上获取数据的操作，所以不会调用set()函数完成数据同步渲染，如果必须通过索引的形式完成数据的更新并且要同步渲染，Vue2.x版本中可以通过Vue提供的vm.$set()或者Vue.set()函数完成数据双向同步

20.讲述Vue中都有哪些声明周期

创建阶段
beforeCreate：实例创建前
create:实例创建后
beforeMount:虚拟DOM渲染前
mounted:虚拟DOM渲染之后
运行阶段
beforeUpdata：数据更新前
updated：数据更新后
销毁阶段
beforeDestory：实例销毁前
destoyed： 实例销毁后
缓存组件声明周期
activated：组件激活
deactivated：组件失活

21.v-for指令循环中为什么要使用key属性

v-for指令主要用于循环展示数组，通过key属性可以将视图中 数据进行唯一性渲染，保障数据的正确渲染展示

22.简述组件的缓存如何实现，实现缓存的好处式什么

组件的缓存通过进行包含，组件在切换过程中就不会频繁的创建和销毁，在一定程度上节省了系统资源同时提高了运行效率
被缓存的组件中如果要执行数据更新，可以通过缓存组件的activated和deativated生命周期完成

23.Vue中的过滤器的作用是什么？如何声明过滤器

Vue中的过滤器主要是用来按照指定的格式进行数据输入格式渲染、声明过程中根据使用的方式不同可以声明为全局过滤器或局部过过滤器
全局过滤器：可以在任意Vue实例中使用
Vue.filter(过滤器名，（dat）=>处理函数)
局部过滤器：只能在当前实例中进行使用
new Vue({
filters:{声明过滤器}
})

24.Vue项目中为什么组件的数据声明data（）是一个返回了对象的函数

因为Vue中的组件是被用来复用的一个代码块，在不同的复用的地方处理的数据可能不同，组件中定义的data（）就是一个返回了对象的函数，保障了每个复用的组件都有自己独立的数据，多个复用的地方操作的数据互相独立不会受到影响

25.组件的作用是什么？如何声明组件

组件是Vue中的一个蟾宫的视图对象，组件的声明主要是为了数据视图的复用，组件根据使用范围不同可以声明为全局组件和局部组件
全局组件，可以在任何Vue实例中使用
Vue.component(组件名,{组件模板})
局部组件：只能在当前实例或组件中使用
new Vue({
components:{声明局部组件}
})

26.父组件如何给子组件传值？传递数据的使用有什么注意事项

在组件的嵌套关系中，父组件一般通过自定义属性的形式将数据传递给子组件
Vue中规范了父组件传递数据给子组件，建议单向数据绑定，如果子组件中需要使用父组件的数据作为运算数据，可以通过computed计算属性进行数据的获取

27.子组件如何给父组件传值，传递数据时有什么注意事项

子组件是通过自定义事件将数据传递给父组件，父组件需要监听子组件的自定义事件，然后通过事件处理函数获取子组件传递的数据
自定义事件的名称必须全部匹配的情况下才能触发和正确监听，包括大小写字符，不存在自动转换的操作

28.计算属性和侦听器的区别是什么

计算属性是Vue实例中通过computed声明的对象，侦听器是Vue实例中通过watch声明的对象
侦听器一般针对单个变量的数据变化进行监听和处理的配置对象，当监听变量数据发生更新时自动执行对应的监听函数，处理相关的业务逻辑
计算属性一般都是针对单个或多个数据的变化进行监听和处理的配置对象，当监听的一个或多个变量数据发生变化是，调用执行计算属性的位置会自动运算得到结果，如果数据没有发生变化，调用执行时会直接使用上次缓存的计算结果，不会再次执行运算

29.计算属性和普通函数的区别是什么

计算属性是Vue实例中声明在computed上的配置对象，普通函数主要声明在Vue实例的methods配置选项上
普通函数必须通过函数名称进行调用才能执行，每次调用都会重复执行函数内部的所有代码，计算属性可以当成普通属性一样使用，当计算属性监听的变量数据发生改变时可以和普通函数的执行一样执行函数内部代码得到结果，如果监听的变量数据没有发生变化就会直接使用上次的运算结果，比普通函数的执行效率更高