前端面试(必会题)

1 . Vue数据双向绑定原理

实现mvvm的数据双向绑定，是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。从而更新视图 主要步骤是以下几点：

1、通过数据监听器Observer，来监听model数据变化
2、通过指令解析器Compile来解析编译模板指令
3、最终利用watch搭起Observer和Compile之间的通信桥梁,实现数据变化=>视图更新;视图交互变化=>数据model变更的双向绑定效果

2. vue 常用指令有哪些,并说明作用

1.  v-model (多用于表单元素实现双向数据绑定)
2. v-for  (多用于循环创建DOM元素)
3. v-show (为true显示元素,false隐藏元素)
4. v-if  (true显示元素,false 隐藏元素)
5. v-hide (隐藏元素)
6. v-else-if  (必须和v-if连用)
7. v-else (必须和v-if连用)
8. v-on:click  (给元素绑定点击事件,可简写成@click)
9. v-text (解析文本)
10. v-html (解析标签)
11. v-bind (绑定一个动态属性,可以简写 :)
12. v-once (进入页面只渲染一次,过后不再渲染)

 3.vue生命周期钩子函数及应用场景

        Vue生命周期可以分为4大阶段及8个钩子函数(总共有 11 个钩子函数)：

1. beforeCreate（创建前）：vue实例的挂载元素$el和数据对象data都为undefined，还未初始化。无法访问到数据和真实的dom和data中的数据

2、created（创建后）: created函数中可以对data对象里面的数据进行使用和更改，一般可以在这里做初始数据的获取， 这里进行dom操作需要使用vue.nextTick()方法

3、beforeMount（挂载前）：vue实例的$el和data都初始化了, 注意此时还没有挂在html到页面上

4、mounted（挂载后）：挂载完成  组件已经出现在页面中，数据、真实dom都已经处理好了

5、beforeUpdate （更新前）：当组件或实例的数据更改之后，会立即执行beforeUpdate，然后vue的虚拟dom机制会重新构建虚拟dom与上一次的虚拟dom树利用diff算法进行对比之后重新渲染，

6、updated（更新后）：当更新完成后，执行updated，数据已经更改完成，dom也重新render完成，可以操作更新后的虚拟dom

7、beforeDestroy（销毁前）：在实例销毁之前调用，实例仍然完全可用  这一步还可以用this来获取实例，一般在这一步做一些重置的操作，比如清除掉组件中的定时器 和 监听的dom事件

8、destroyed（销毁后）：在实例销毁之后调用，调用后，所有的事件监听器会被移出，所有的子实例也会被销毁，该钩子在服务器端渲染期间不被调用