vue中常见前端面试题

1. vue组件之间的传值
   （1）父组件向子组件传递数据
   【父组件部分】
   在调用组件的时候，使用v-bind将要传递给子组件值的自定义属性和数据源里的变量进行绑定

<子组件 ：自定义属性名 = ‘数据源里的变量名’></组件名>`在这里插入代码片`

【子组件部分】
使用props 从父组件里获取想要传递给子组件的值（使用自定属性绑定数据源）

props：['自定义属性名']
在props中添加了元素之后，可直接使用，不需要再data中再添加变量

（2）子组件向父组件传值
【父组件部分】
引入子组件，并定义一个on的方法监听子组件的状态

<子组件名 @子组件里自定义的事件名 = '方法名'></子组件名>
该方法名不需要添加（），用来获取从子组件传递过来的参数，将值存入数据源中

【子组件部分】
选择合适的事件类型，定义一个子组件传值的方法

Html部分:@事件类型 = ’方法名‘
methods部分：方法名（）{
this.$emit(参数1|参数2）
}
//参数1自定义事件名，不负组件的on监听
//参数2子组件想要传递的值

（3）非父子组件进行传值
定义一个公共的xx.js，文件，作为中间仓库来传值
如果时子子传参，先传到父组件，在传给子组件，父组件作为中间仓库
2. MVVM模式，以及特点
MVVM即Model-View-ViewModel，使用数据绑定基础架构，分离视图和模型view绑定到viewmodel，然后执行一些命令再向它请求一个动作。反过来，viewmodel跟model通讯，告诉它更新来响应ui（在前端页面中，把model用纯javascript对象表示：view负责显示作为关联的viewmodel负责把model的数据同步到view显示出来，还负责把view的修改同步回model）让mvvm架构去自动更新Dom的状态，而不是频繁的操作dom
特点（1）低耦合
（2）可重用性
（3) 独立开发
（4） 可测试
3. keep-alive标签的作用
（1）包裹动态组件时，会缓存不活动的组件实例，而不是销毁他们
（2）是一个抽象组件，它自身不会渲染一个DOM元素，也不会出现在父组件链中
（3）当组件在内初切换，它的avtivated和deactiveated两个生命周期钩子函数会被对应调用
（内置组件keep-alive来缓存组件内部状态，避免重复渲染）
4.vue中的路由模式
vue中路由是由多个url组成的，不同的url访问到不同的位置，实现多视图的单页面web切换页面时没有重新进行请求，即页面跳转而不刷新（改变视图时不向后端发送请求）
三种模式：（1）hash：使用url的hash值来作为路由。即地址栏url中的#符号
（2)History：Html5中history接口和服务器配置
（3）Abstract：如果发现浏览器的api，路由会自动强制进入该模式
【hash】hash发生变化的url都会被浏览器记录下来，从而使浏览器的前进，后退
【history】 mode：’history’
1.切换历史状态
2.修改历史状态
3.popstate实现history路由拦截，监听页面返回事件
hash模式下，前端路由修改的是#中的信息，刷新时浏览器请求与他无关，所以问题
history模式下，可以自由修改path，刷新时服务器中没有相应的响应或资源，就会404