vue面试题

---恢复内容开始---

1.vue的生命周期并说明各个阶段的作用？

　　　　beforeate：组件实例化的时候，做了一个初始化的操作，注意当前生命周期是组建还没有实例化完毕，因此你是访问不到当前组件的data或者methods属性和方法，以及其他生命周期函数      场景：初始化loading。

            created：创建后

　　　　　　1.当created创建完毕后，会将data，methods身上的属性方法通过便利添加到vm实例身上。

　　　　　　2.created生命周期函数中会将data身上所有的属性都添加上一个getter/setter方法，让data的属性具有响应式的特性。

　　　　　　3.场景    当前生命周前函数中可以用开进行ajax数据的请求。

　　　　beforeMouted：挂载前

                      1.数据和模板还未进行结合，可以对数据做最后的处理。

　　　　　 　2.在这个生命周期函数中是访问不到真实的DOM结构

　　　　mouted ：挂在后

　　　　 　　1.数据和模板结合生成真正的Dom树

　　　　　    2在这个生命周期函数中我们可以通过this.$ref.属性名称    获取真正的DOM结构对DOM进行处理

　　　　　    3.一般在这个生命周期函数中做方法的实例

             beforeUpdate： 

　　　　　　1.更新的数据和模板还未进行结合，可以对数据做最后的修改

　　　　　　2.在当前生命周期函数中可以获取真正的DOM树结构

　　　　updated：更新后

　　　　　　1.更新的数据模板结合，在这个生命周期函数中我们可以获取到数据更新后的DOM结构，以及对数据的更新做一个监听。

　　　　beforeDestory： 销毁前

　　　　　　1.在当前生命周期函数中依旧是可以访问到DOM结构的

　　　　　　2.使用的场景：做一些事件监听的解绑。

　　　　destory：销毁后

　　　　　　1.在当前生命周期函数中不能访问到真正的DOM结构，

　　　　　　2.在这个生命周期中会将当前vm与DOM之间的关联全部断开

2.mvvm  mvc 是什么，区别，原理

　　MVC：m model 数据模型   v  view 视图模型    c controller  

        model 数据模型 负责对数据的获取，存放，即数据的管理者，可能存放在数据库，本地数据库中的数据，也可能ui填写的表单，即将上传服务器上面存放，它负责获取数据

     controller：不需要关心model如何拿到数据，只管调用。controller负责将model数据用view显示出来，话句话说就是在controller里面将model数据赋值给view

3.父子传值，子向父传值

　　

组件传值 组件之间的通讯

父传子

传递：当父组件给子组件进行传值的时候，给子组件的标签上加一个自定义属性 值为需要传递的数据

接收：在子组件内部通过props进行接受，props进行接收的方式有2中 一种是数组一种是对象

数组接收：

props:[自定义属性]

对象接收:

props:{

自定义属性:{

type:类型

default:"默认值",

required:必须传递

}

}

子传父

接收：当子组件给父组件进行传值的时候，首先给子组件标签绑定一个自定义方法，值为一个函数，

注意这个函数不需要加() 传递过来的值通过这个函数就可以接收到

 

传递：在子组件内部通过this.$emit("自定义方法名称",需要传递的参数) 来进行传递数据

非父子组件传值

一、公共的Vue实例

1、首先需要让所有的子组件都拥有共同的一个事件订阅的方法

Vue.prototype.Observer = new Vue();

2、给需要传值的组件调用this.Observer.$emit("事件名称",传递的值)

3、给需要接受的组件调用this.Observer.$on("事件名称",回调函数)

二、EventBus(自己了解)

三、手动封装$on $emit $off 事件订阅

1、首先需要让所有的子组件都拥有共同的一个事件订阅的方法

手动封装的Observer

import Observer from "./Observer";

Vue.prototype.Observer = Observer;

 

2、给需要传值的组件调用this.Observer.$emit("事件名称",传递的值)

3、给需要接受的组件调用this.Observer.$on("事件名称",回调函数)

4.comouted

　　　computed：计算属性 通过属性计算的来的属性  是个对象

　　　　　　1、computed里面的函数建议有返回值，不建议去修改data中的属性

　　　　　　2、在使用computed中的方法时,是不需要加()

　　　　　　3、computed是基于vue的依赖 当computed所依赖的属性发生改变的时候就会触发相对应的方法

　　　　　　4、当computed中的函数执行完毕后，会进行缓存。当下次所依赖的属性没有发生改变的时候会从缓存中读取结果

　　　　　　 特点： 一个属性受多个属性的影响

5.watch

　　　　1、watch中的函数的名称必须是data中的属性

　　　　 2、watch中的函数会接收2个值 一个是新值一个是旧值

　　　　 3、watch中的函数是不需要调用的，当所依赖的属性发生了改变，那么就会调用相关的函数

　　　　 4、watch的属性监听当中尽量不要去修改data中的属性

　　　　 5、watch监听属性的时候只会监听对象引用是否发生了改变，而具体的属性值发生改变是不会进行监听的

　　　　6、watch做属性监听的时候如果属性是一个对象，那么需要做深度监听，利用handler与deep进行深度监听

　　　　 7、watch初始化的时候是不会执行的,如果设置 immediate:true 则初始化的时候会执行一次

　　　　8、watch不会对数组的修改(特殊情况)进行监听 特点： 一个属性影响多个属性

　　　　场景： 1、模糊查询 2、网页的自适应 ....