前端面试题解答（十四）

1、什么是侦听器？

侦听器是Vue中的一个对象，主要用于监听实例中指定变量的数据是否发生更新的处理模块，在实例中通过watch进行声明！

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

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

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

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

普通函数声明在实例中的methods配置选项上，必须调用才能执行，每次调用执行时都会重新执行函数内部代码

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

Vue中计算属性本质上是一个函数，侦听器内部也包含了处理函数，都可以在数据发生变化时自动调用执行函数内部的代码得到运算结果！计算属性和侦听器都可以监听变量数据是否发生更新

计算属性本质上是一个纯粹的函数，通过函数名称直接访问数据，和普通变量的访问方式一致；调用执行时如果数据没有发生变化就会使用上一次缓存的运算结果，不会再次执行函数内部代码，计算属性可以同时监听一个或者多个数据的变化

侦听器本质上是一个包含了处理函数的对象，主要监听指定变量的数据是否发生变化，一旦监听的变量发生数据更新就会自动执行对应侦听器函数完成数据的运算或者业务处理，每个侦听器对象一般只监听一个变量的数据变化

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

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

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-if/v-show：用于数据按照条件进行渲染
v-if/v-for：用于程序流程控制
v-bind：动态操作属性
v-on：事件操作指令
v-model：表单数据双向绑定