Vue基础知识收集，持续更新....

1. 说说你对MVVM的理解？

首先MVVM是Model-View-ViewModel的缩写

Model

：代表的是数据模型，可以在Model中定义数据修改和操作的业务逻辑

View

：代表是UI组件，它负责将数据模型转化为UI展示出来

ViewModel

：代表的是监听模型数据的变化和控制视图行为，处理用户交互，简单的说就是同步View和Model的一个对象

MVVM与MVC的主要区别有两点：

• 实现数据与视图之间的分离
• 通过 数据来驱动视图，开发者只需要关心数据的变化，DOM操作被封装了。

2.Vue的生命周期

beforeCreate

该函数执行在组件创建、数据观测（data observer）和event/watcher事件配置之前，实例初始化之后被调用。

在该阶段组件未创建、不能访问数据，组件中的

data

和

ref

均为

undefined

created

该函数在组件创建完成后立即被调用，在这个周期，实例已完成数据观测(data observer),属性和方法的运算，watch/event事件回调。

在这个阶段，组件中data对象已经存在，可以对data进行操作，可以访问数据，发送请求等操作，但是这时仍然还未渲染成HTML模板，组件中的ref依然是undefined，挂载阶段还没开始，$el尚不可用。

在这个周期，我们可以进行数据初始化，或者一些数据请求放在里面，结束loading效果等

beforeMount

该函数在组件挂载之前，在该周期页面上还没有渲染出HTML元素，data对象初始化完成，ref依旧是undefined，相关的render函数首次被调用。

在该周期，可以访问数据，编译魔板结束，虚拟DOM已经存在。

该钩子在服务端渲染期间不可用。

mounted

该钩子是在页面挂载完成后执行的，这时el被新创建的

vm.$el

替换掉，可以操作

ref

，一般将组件请求数据的方法放在里面，

filter

也是在这个钩子生效。

需要注意的是：

mounted

不能保证所有的子组件也会一起被挂载。如果你希望等到整个视图都渲染完毕,那你可以在

mounted

内部使用

this.$nextTick

。

mounted(){
this.$nextTick(()=>{
...
//show your code
})
}

该钩子在

服务器端渲染期间不被调用

。

beforeUpdate

这里可以在更新之前访问现有的DOM，如手动移除已添加的事件监听器。

updated

当这个钩子被调用时，意味着组件DOM已经更新。你现在可以执行依赖于 DOM 的操作。然而在大多数情况下，你应该避免在此期间更改状态。如果要相应状态改变，通常最好使用计算属性或 watcher 取而代之。

注意

：updated 不会保证所有的子组件也都一起被重绘。如果你希望等到整个视图都重绘完毕，可以在 updated 里使用 vm.$nextTick：

beforeDestroy

该函数在

实例销毁之前调用

，这里的

ref依旧可以操作

，

实例仍然完全可用

，可以在这里做

清除定时器

的操作，防止内存泄漏。

该钩子在

服务器端渲染期间不被调用

destroyed

该函数在

组件销毁的时候执行

，即

实例销毁后调用

，这里的

ref不存在

。

该钩子

被调用后

，

对应

Vue 实例的

所有指令

都被

解绑

，

所有

的

事件监听器

被

移除

，

所有的子实例也都被

销毁。

该钩子在

服务器端渲染期间不被调用

。

3. v-if和v-for一起使用的弊端以及解决办法

v-for具有比v-if更高的优先级，如果v-for和v-if一起使用，会导致v-if会重复运行在每一个v-for循环中，所以不推荐这两个东西一起使用。

必要的情况下应该替换成computed计算属性

<div class="cells">
<div class="cell" v-for="item in data" v-if="item.isActive" :key="item.id">
{{item.content}}
</div>
</div>

// 替换成

<div class="cells">
<div class="cell" v-for="item in formData" :key="item.id">
{{item.content}}
</div>
</div>

computed:{
formData(){
return this.datas.filter((item)=>{
return item.isActive
})
}
}

或者在需要遍历的元素外面包裹一层

<div class="cells">
<template v-for="item in datas">
<div class='cell' v-if="item.isActive">
{{item.content}}
</div>
</template>
</div>

未完待续…

参考链接