一、对于MVVM的理解
MVVM是Model-View -ViewModel的缩写
Model：数据模型，定义数据修改
View：代表ui组件，将数据模型转化成ui展现出来
ViewModel：监听模型数据的改变和控制ui视图，处理交互，也就是连接Model和View。
在MVVM架构下，View和Model之间并没有直接联系，model和viewmodel之间的交互是双向的，即：view的变化会同步到model中，而model数据的变化也会立即反映到view中
二、vue的生命周期
beforeCreate（创建前）：在实例初始化还未创建之前： 这里可以访问$router进行重 定向等操作
Created（创建后）：实例创建完成，可以访问data属性，数据请求等操作，但实例还未挂载（el属性没有显示出来）
beforeMount（载入前）：实例挂载之前，DoM是虚拟的，可以执行render函数，生成html，但还没有挂载到页面上
mounted（载入后）：操作DOM
beforeUpdate（更新前）：在数据更新之前调用，虚拟DOM重新渲染和打补丁之前
updated（更新后）：这时组件DOM已经更新，所以可以执行依赖DOM的操作
beforeDestroy（销毁前） 在实例销毁之前调用。实例仍然完全可用。
destroyed（销毁后） 在实例销毁之后调用。调用后，所有的事件监听器会被移除，所有的子实例也会被销毁。该钩子在服务器端渲染期间不被调用。
1.什么是vue生命周期？
Vue 实例从创建到销毁的过程，就是生命周期。从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、销毁等一系列过程，称之为 Vue 的生命周期。
2、vue生命周期的作用：
它的生命周期有8个阶段（创建前/后、载入前/后、更新前/后、销毁前/后），让我们在vue实例的过程中有更好的逻辑
注：第一次页面加载会触发这4个（创建前/后、载入前/后）钩子函数，因为DOM渲染在mounted中就会完成
三、vue中实现数据的双向绑定原理：Object.definePropert()
我有写过关于数据劫持的简书，想了解的小伙伴请点击该链接 双向绑定原理
四、父组件与子组件传值
父组件传给子组件：子组件通过props方法接受数据
父：<Child :father="data.value"/> 子： prop:['father'] 这时候，father就可以使用了;
子组件传给父组件：
子：this.$emit('定义的名字', 传的值 ) 父：<Child @自定义一个方法接收="emit里定义的名字"/>
2.非父子组件间的数据传递，兄弟组件传值
vuex：在公司的项目是经常用到的，存取数据很方便，想了解的看右边，写的很清楚的 vuex详解
eventBus，就是创建一个事件中心，相当于中转站，可以用它来传递事件和接收事件。项目比较小时，用这个比较合适。
五、vuex是什么
状态管理系统； 改变状态的方式是提交mutations，这是个同步的事物； 异步逻辑应该封装在action中。
在main.js引入store，注入。并抛出实例
场景有：单页应用中，组件之间的状态、音乐播放、登录状态、加入购物车
state：存放的数据状态
mutations：动态修改store中的数据
action：异步操作mutations中的数据
六、vue自定义指令：
1、创建局部指令：
var app = new Vue({
el: '#app',
data: {
},
// 创建指令(可以多个)
directives: {
// 指令名称
名称: {
inserted(el) {
el.style.background = '#000';
}
}
}
})
使用：某个组件中的某个想使用该指令的标签上 例： <div v-名称></div>
创建全局指令：
在入口js里写：
Vue.directive('名称', {
inserted(el) {
el.style.color = 'red';
}
})
使用： 想使用的哪个标签写入 例： <div v-名称></div>
七、vue自定义一个过滤器
贴上代码：
<div id="app">
<input type="text" v-model="msg" />
{{msg| capitalize }}
</div>
var vm=new Vue({
el:"#app",
data:{
msg:''
},
filters: {
capitalize: function (value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase()；
}
}
})
上面代码就是把msg的内容给处理了一下，也就是过滤
2、全局定义过滤器：
Vue.filter('capitalize', function (value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
})
过滤器接收表达式的值 (msg) 作为第一个参数。capitalize 过滤器将会收到 msg的值作为第一个参数。
八、keep-alive
keep-alive是 Vue 内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染。可以理解成缓存的意思
include：被缓存的组件名
exclude：不被缓存的组件名
注： 当使用正则或者是数组时，要记得使用v-bind 。
<keep-alive include='include_components' exclude='exclude_components'>
<component>
<!-- 该组件是否缓存取决于include和exclude属性 -->
</component>
</keep-alive>
例：
<!-- 逗号分隔字符串，只有组件a与b被缓存。 -->
<keep-alive include="a,b">
<component></component>
</keep-alive>
<!-- 正则表达式 (需要使用 v-bind，符合匹配规则的都会被缓存) -->
<keep-alive :include="/a|b/">
<component></component>
</keep-alive>
还有很多没有整理完全的，欢迎大家做补充
![]()
