Vue前端面试2021-03

1、什么是侦听器？

侦听器，也称为监听器，vue框架提供给开发人员 的一个用来监控变量数据的组件，一旦监控的变量数据发生变化，侦听器对应的函数就会执行，函数内部可以针对变化的数据进行业务数据运算

2、Vue中计算属性和普通函数的区别是？

vue中的计算机属性本质上也是一个处理函数，可以和普通函数一样调用执行；普通函数就是生命在methods中的函数，可以调用执行

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

3、Vue中计算属性和侦听器的区别是？

相同的地方是当目标数据发生变化时，都会自动调用并执行相关函数
计算属性的本质就是函数的运行结果；侦听器仅仅是监听了数据变化。
当需要针对每个数据的变化执行不同的业务操作或者数据运算时，建议使用侦听器；当多个变量中数据的变化互相关联时，建议使用计算属性

4、Vue中的过滤器有什么作用？全局过滤器和私有过滤器有什么区别？

vue作为一个前端框架，对视图的处理也是非常友好，针对数据的渲染展示，提供了过滤器组件，用来对页面视图中展示的数据进行格式化处理

过滤器在使用的时候主要区分为两种
组件过滤器（私有过滤器），只能在vue实例中使用
全局过滤器，可以被所有vue实例使用

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

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

//1、声明一个临时存储变量
let temp；
//2、数据劫持的方式，声明指定变量
Object.defineProperty(window,”myVariable”,{
      //获取数据时自动执行get()
      get(){
        return temp
       },
       //设置数据时自动执行set()
       set(value){
    temp=value
//TODO自动执行数据渲染，达到数据同步更新的目的
}
})

//访问变量
console.log(myVariable)
//设置变量
myVairable = “新数据”

6、简述你用过的Vue中哪些指令？分别有什么含义？

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