vue2基础知识

一、vue2篇

1.关于生命周期

1.1.Vue生命周期是什么，有哪些？发送请求在created 还是 mounted？

• vue的生命周期就是Vue实例从创建到销毁的过程就是生命周期，即指从创建、初始化数据、编译模版、挂载DOM 到渲染、更新到渲染、销毁等一系列过程。

• vue2.x系统自带八个阶段：1创建前后，2载入前后，3更新前后，4销毁前，销毁后，以及一些特殊场景的生命周期。如果开启keep-alive会增加两个生命周期Activated \ deactivated

beforeCreate 创建前
created 创建后
beforeMounted 挂载前
mounted 挂载后
beforeUpdate 更新前
updated 更新后
beforeDestroy 销毁前
destroyed 销毁后

发送请求在created 还是 mounted？

- 这个问题具体要看项目和业务的情况了，因为组件的加载顺序是，如果父组件引入子组件，先执行父组件的前3个生命周期，再执行子组件的前4个生命周期。
- 那如果业务是父组件引入子组件，并且优先加载子组件的数据，那么在父组件中当前的请求要放在 mounted 中，如果先加载父组件的数据，那就created中发请求。
- 如果当前组件没有依赖关系，那放在哪个生命周期中请求都可以。

获取数据时created 和 mounted的区别

• created 是在组件实例一旦创建完成的时候，立刻调用，这时候页面dom节点并未生成

• mounted 是在页面 dom 节点渲染完毕之后，就立刻执行的。created 的触发时机要比 mounted 更早一些。

• 相同点：都是能拿到实例对象的属性和方法，但是如果放在 mounted 请求，有可能导致页面闪动，但如果在页面加载前完成则不会出现此情况

1.2为什么发送请求不在beforeCreate里?

1.先执行同步任务，再执行异步任务
2.因为：如果请求是在 methods 封装好了，在 beforeCreate 调用方法的时候，beforeCreate阶段是拿不到methods的，会报错。

beforeCreate和created 有什么区别？

beforeCreate 阶段没有 $data， 拿不到 methods 方法
created 阶段 有 $data, 可以拿到 methods 方法

1.3在 created 中如何获取dom？

1.只要写异步代码，获取 dom 是在异步任务中获取的，在异步任务里写 document.getElementById('home')
例如：setTimeout，axios请求，Promise.xxx() 等等...
2.使用 vue 系统内置的 this.$nextTick ,说明 nextTick 这个APi 是一个异步的
	created() {
	this.$nextTick(res => {
	console.log(document.getElementById('home'), this.$refs.child)
	})
	}
- 获取 dom 可以通过原生JS获取， vue 中还有一个 ref,定义一个ref属性，例如 ref="child"就能获取
2.在同步任务获取不到 dom

1.4一旦进入页面或着组件，会执行哪些生命周期？顺序。

- 前四个都会执行 
- brforeCreate ---> 无 dom
- created --> 无 dom
- beforeMount  ---> 准备dom
- mounted ---> 有dom

在哪个阶段有$el, 在哪个阶段有$data?

- $el 代表 dom , $data 代表数据data
- beforeCreate ---> 啥也没有
- created 阶段 ---> 有data 没有 el，dom
- beforeMount  ---> 有data没有 el，dom
- mounted ---> dom 和数据 都有
- 后面的阶段都有

1.5第二次或者第N次进去组件会执行哪些生命周期？

如果当前组件加入了keep-alive，只会执行一个生命周期

activated

如果没有加入keep-alive，依然执行前四个生命周期

-  brforeCreate 
-  created
-  beforeMount 
-  mounted

1.6父组件引入子组件，那么生命周期执行的顺序是？

1.先把父组件的数据准备好，即先执行
	beforeCreate，
	created，
	beforeMount
2.然后执行子的数据处理 和 dom，即
	子：beforeCreate
	子：created，
	子：beforeMount
	子：mounted
	可能有多个子组件，按顺序执行即可
3.最后再执行父组件的 dom，即
	mounted

1.7 如果加入了 keep-alive 会执行哪些生命周期？

如果使用了keep-alive，当前的组件会额外增加两个生命周期（系统 8 + 2）

activated
deactivated

如果当前组件加入了 keep-alive,第一次进入组件会执行5个生命周期？

-  brforeCreate 
-  created
-  beforeMount 
-  mounted
-  activated

1.8你在什么情况下用过哪些生命周期？说一说生命周期的使用场景？

重点介绍项目中常用的即可，根据业务决定，比如在请求的时候，根据组件间的关系，优先级关系确定。
-看有没有父子间的关系，如果是父组件引入子组件，且子组件要优先加载的话，那么父组件里的请求应该写着mounted。
-如果是单一的组件，没有父子关系，那么我会把请求放在 created
-如果需要“同步”获取 dom，那肯定是在 mounted 中
-如果用到 keep-alive 那会新增生命周期 activated，比如做了一个项目，项目有详情页，详情页可能是课程或者文章，他们的模版都是一样的，只不过数据不一样。如果用户从首页一直进入这个详情页，那么这个详情页就会被缓存。所以需要判断，如果当前的id 和之前进入的 id 是相同的，此时此刻就不会再发送请求了。
如果当前id 和之前的 id 不相同，这时候会在 activated 生命周期里发送一次请求。
-使用销毁生命周期，比如当我们再看一个视频的时候，看到一半关掉，下次再打开我们希望能接着上次看的播放，所以需要记录时长，一个方法是一直记录，另一个方法是当关闭的时候再记录或者路由跳转的时候再记录
created   ==> 单组件请求
mounted   ==> 同步可以获取 dom，如果先子请求后父组件请求
activated ==> 判断 id 是否相等，如果不相同发起请求
destroyed ==> 关闭页面记录视频播放的时间，初始化的时候从上一次的历史开始播放

2.Vue 的生命周期方法有哪些？

系统自带了8个生命周期，分别是：哪8个，第一次进入到组件会执行前4个周期，分别是 beforeCreate，created，beforeMount，mounted，如果用到keep-alive 就变成了10个生命周期，因为会额外增加两个生命周期，activated,deactivated,如果加入keep-alive，第一次进入到组件，就会执行5个生命周期了前面那4个，再加上keep-alive那一个，如果第二次或者第N次进入到这个组件，就会执行一个生命周期了，也就是keep-alive那一个。这就是生命周期

(1) beforeCreate(): 在实例初始化之后调用, data和methods都还没有初始化完成, 通过this不能访问
(2) created(): 此时data和methods都已初始化完成, 可以通过this去操作, 可以在此发ajax请求
(3) beforeMount(): 模板已经在内存中编译, 但还没有挂载到页面上, 不能通过ref找到对应的标签对象
(4) mounted(): 页面已经初始显示, 可以通过ref找到对应的标签, 也可以选择此时发ajax请求
(5) beforeUpdate(): 在数据更新之后, 界面更新前调用, 只能访问到原有的界面
(6) updated(): 在界面更新之后调用, 此时可以访问最新的界面
(7) beforeDestroy(): 实例销毁之前调用, 此时实例仍然可以正常工作
(8) destroyed(): Vue 实例销毁后调用, 实例已经无法正常工作了
(9) deactivated():组件失活, 但没有死亡
(10) activated(): 组件激活, 被复用
(11) errorCaptured(): 用于捕获子组件的错误,return false可以阻止错误向上冒泡(传递)

3.Vue 组件通讯有哪几种方式

	1.props 和emit父组件向子组件传递数据是通过prop传递的，子组件传递数据给父组件是通过 emit触发事件来做到的
	2.parent,parent,parent,children 获取当前组件的父组件和当前组件的子组件
	3.attrs和attrs和attrs和listeners A->B->C。Vue 2.4开始提供了attrs和 attrs 和 attrs和listeners 来解决这个问题
	4.父组件中通过provide来提供变量，然后在子组件中通过 inject 来注入变量。(官方不推荐在实际业务中使用，但是写组件库时很常用)
	5.$refs获取组件实例
	6.envetBus兄弟组件数据传递 这种情况下可以使用事件总线的方式
	7.vuex状态管理

4.v-show 与 v-if 有什么区别？

	1.v-show 仅仅控制元素的显示方式，将 display 属性在 block 和 none 来回切换；
	2.而v-if会控制这个 DOM 节点的存在与否。当我们需要经常切换某个元素的显示/隐藏时，
	使用v-show会更加节省性能上的开销；当只需要一次显示或隐藏时，使用v-if更加合理。

5.简述Vue的响应式原理

当一个Vue实例创建时，vue会遍历data选项的属性，用 Object.defineProperty 
将它们转为getter/setter并且在内部追踪相关依赖，在属性被访问和修改时通知变化。 
每个组件实例都有相应的watcher程序实例，它会在组件渲染的过程中把属性记录为依赖，
之后当依赖项的setter被调用时，会通知watcher重新计算，从而致使它关联的组件得以更新。

2.关于组件

2.6keep-alive是什么？

keep-alive是什么： 是用来缓存当前组件的
如果需要在组件切换的时候，保存一些组件的状态，防止多次渲染，就可以使用 keep-alive 标签包裹需要保存的组件。

两个重要属性，include 缓存组件名称，exclude 不需要缓存的组件名称

 <keep-alive>
    <router-view></router-view>
    <!--这里是会被缓存的组件-->
</keep-alive>

7.vue优化

1.合理使用v-show 和 v-if 以及 computed
2.使用 v-for 时要加key，以及避免和 v-if 同时使用
3.自定义事件、DOM 事件及时销毁
4.合理使用异步组件
5.合理使用keep-alive
6.data层级不要太深（因为深度监听一次性监听到底）
7.使用 vue-loader 在开发环境做模板编译（预编译）
8.webpack 层面的优化
9.前端通用的性能优化，如 图片懒加载等

8.谈谈你对MVVM开发模式的理解

1.MVVM分别为Model、View、ViewModel
2.model 代表数据模型，数据和业务逻辑都在model层中定义；
3.view 代表ui视图，负责数据的展示；
4.viewmodel 负责监听model中数据的改变且控制视图的更新，处理用户交互操作；
5.model和view并无直接关联，而是通过viewmodel来进行联系的，model和viewmodel之间有着双向数据绑定的联系。
因此当model中的数据改变时会触发view层的刷新，view中由于用户交互操作而改变的数据也会在model中同步。
6.总结，这种模式实现了model和view的数据自动同步，因此开发者只需要专注对数据的维护操作即可，而不需要自己操作dom。