vue面试重点总结（常见基础面试题1）

Vue的两个核心

组件系统，方便多个页面功能开发复用
数据驱动，修改数据就能实现视图层更新，只需要关心数据变化，不需要去操作DOM
虚拟DOM,不需要频繁去操作真实DOM,提高性能

什么是双向数据绑定？

Vue中数据变了，视图层也会发生变化，当使用v-model命令时就可以实现双向绑定，即视图层改变数据也会发生改变，一般绑定在Input输入框上

v-model实现原理：v-model可以认为是使用v-bind和v-on组合使用实现双向绑定的语法糖给一个input输入框绑定v-bind:value='变量'实现数据层向视图层的数据绑定，这样数据变化，input中的内容也变化，再给input绑定个input事件即v-on:input(@input)在输入时执行变量=$event.target.value实现视图层变化数据层也发生变化，到此v-model双向绑定就完成了

单向数据流

父子组件传值，父向子通过props传值时，父组件中的数据发生改变时，子组件中的数据也会相应发生改变，相反则不行甚至不能修改props传过来的数据，因为默认props传过来的值是只读属性

但是存在特殊情况，当传的值为引用数据类型时，子组件是可以修改其中的属性的，引用数据类型的地址没发生改变就行，但是官方认为这样会造成数据流向混乱不推荐使用

利用.sync修饰符也可以实现子组件修改父组件的数据

MVVM的理解

MVVM由三个单词组成，M(model数据)V(view视图)VM(viewmodel Vue实例) 数据改变时视图也会跟着改变，当用v-model时可以实现双向绑定，viewmodel可以认为就是数据和视图间的桥梁好处：

因为数据变了视图就会变化，所以不用操作DOM
解耦，降低了代码的耦合性，model数据变了view不用改，两者没关系

事件传参

没有参数时，事件函数的默认第一个参数就是事件对象
有参数传递时，默认没有事件对象，时间函数就没了默认参数
当既想传参又想传事件对象时通过$event传递事件对象

自定义指令directive的理解

当Vue自带的一些指令满足不了我们的需求时，可以定义自定义指令，一般都全局和组件内两种定义注册方式

directive拥有三种钩子函数

bind：只调用一次，当指令绑定到元素时调用，类比于created，一般用来修改style样式
inserted：只调用一次，当绑定的元素挂载到dom树插入到页面中时调用,类比于mounted
undate：能多次执行，当所绑定的元素所在的组件的data数据发生更新时就会执行