Vue前端面试2021-014

1、下面的代码输出结果正确吗？为什么

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

1、如果只是事件函数的调用，函数名称后面不要添加括号 好处：函数执行时，第一个形式参数会被系统自动注入 一个事件对象，提供给函数使用

 @click="handlerEvent"

2、如果事件函数调用执行时，需要传递参数，函数名称后面 必须添加括号，如果要使用事件对象，就必须手工注入(固定语法)

@click="handlerEvent($event)"

2、什么是事件冒泡，原生JS中如何阻止事件冒泡，Vue中如何阻止事件冒泡？

事件冒泡是JS语法中的一种事件触发机制，描述的是目标元素上的事件一旦发生，就会根据DOM节点结构，将事件逐步依次触发到父节点上的一种事件机制

原生JS中通过兼容性语法阻止事件冒泡 event.stopPropagation?event.stopPropagation():event.cancelBubble=true

Vue中对于事件冒泡的处理进行了封装，提供了事件修饰符完成阻止冒泡行为 固定语法：标签对象的事件属性上，添加 @事件对象.stop="处理函数"

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

.self事件修饰符的作用，就是让事件的触发方式只能由当前标签上发生的事件触发！

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

4、表单修饰符.lazy的作用是什么？

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

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

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

6、什么是数据劫持？

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