2020-vue面试题

1.vue双向绑定的原理

2.解释单向数据流和双向数据绑定

• 单向数据流：
  data改变页面会自动改变，页面改变不影响data
• 双向数据绑定
  data改变页面会自动改变，页面改变影响data自动改变

3.如何去除url中的“#”(history模式和hash模式的区别)

vue-router默认使用hash模式，所以在路由加载时，项目中的URL会自带#；
如果不想使用#，可以使用vue-router的另一种模式history

new Router({
     
                mode:'history',
                routes: []
            })

4.对MVC、MVVM的理解

5.介绍虚拟DOM树

虚拟DOM树：
仅包含 可能变化的节点 和 可能变化的属性 的树结构。
虚拟DOM树内容较真实DOM树内容少，便于快速遍历比较不同。
当data中模型变量改变时，会通知虚拟DOM树 ==> 虚拟DOM树先缓存本次的修改在元素对象上 ==> 将一批修改生成新的DOM子树，和原虚拟DOM树做对比 ==> 一旦发现不同的元素或内容，就只更新有修改的元素 ==> 虚拟DOM树中，封装了传统DOM API：createElement() appendChild() .innerHTML，避免了大量重复的代码

6.vue生命周期（4个阶段，8个钩子函数）

• beforeCreate() 在实例创建之间执行，数据未加载状态
• created() 在实例创建，数据加载之后，能初始化数据，DOM渲染之前执行
• beforeMount() 虚拟dom树已创建完成，在数据渲染前最后一次更改数据
• mounted() 页面、数据渲染完成，真实dom树挂载完成
• beforeUpdate() 重新渲染之前触发
• updated() 数据已经更改完成，dom也重新render完成，更改数据会陷入死循环
• beforeDestory() 销毁前执行，实例仍然完全可用
• destoryed() 销毁后执行

7.组件间通信

组件间通信

1）父子通信

子组件通过props属性，绑定父组件数据，实现双方通信

2）子父通信

将父组件的事件在子组件中通过$emit触发

3）兄弟间通信

8.vue-router路由实现

9.v-if 和 v-show 的区别

10.$route 和 $router 的区别

11.vue组件data为什么必须是函数

12.计算属性computed和事件methods有什么区别

13.jQuery和vue的区别

14.vue中怎么自定义指令

1）全局注册

2）局部注册

15.vue中怎么自定义过滤器

16.对keep-alive的了解