Vue项目总结

vue生命周期

beforeCreate 初始化实例 不能获取dom节点
created 实例化创建
beforeMount 过渡阶段获取不到具体的dom节点 vue挂载的根节点已经创建
mounted 数据和dom都渲染出来了
beforeUpdate 检测数据更新时，在dom更新之前执行
updated dom更新结束后执行
beforeDestory vue实例销毁之前执行
destoryed 销毁实例后执行

vue双向数据绑定原理

object.defineProperty
MVVM 双向绑定 采用数据劫持发布者-订阅者模式的方法object.defineProperty。来劫持各个属性的值再发布给订阅者
实现一个数据监听observer 能够对数据对象的所有属性进行监听 如果有变动可以通知到订阅者
实现一个指令解析起器complie 对每个元素节点进行扫描和解析。根据指令替换数据以及绑定相应的更新函数
实现一个watcher作为连接observer和 complie 之间的桥梁 能够订阅并收到每个属性变动的通知，执行指令绑定的函数并更新视图

vue中的watch和computed之间的区别

watch是为了监听响应数据的变化 omputed是自动监听依赖变化，从而动态的返回内容
主要区别来源于用法，只是需要改变动态值就用computed 需要值之后改变业务逻辑使用watch

vue的核心是什么

数据驱动和组件化

vue中 v-if 和v-show之间的区别

v-if根据后面的数据的真假判断节点是否被删除或者重建。v-show 只是修改节点的样式控制display的显示与隐藏是一直在dom树上面的
v-if切换会有更高的消耗 不适合做频繁的切换 v-show 有更多的初始化渲染 适合做频繁的切换

vuex

vuex实现了一个单项数据流在全局拥有一个state存放数据 当组件要更新state时必须通过mutation进行。mutation 同时提供了订阅者模式供外部插件调用state数据的更新而当所有异步操作或批量操作要走action时，无法直接修改state 的需要通过mutation来修改state数据。最后根据state的变化，渲染到视图上
五个部分：state getter mutations module action

组件通信

父传子： props
子传父： $emit
兄弟组件 ： $emit 和 $on
跨级组件通信 ： provide inject（provide和inject的绑定并不是响应的，使用vue2.6.0中新增的Vue.observable 优化响应式）

vue单页面的优点和缺点

优点： vue尽可能通过简单的API实现响应的数据绑定和组合的视图组件，核心是一个响应数据的绑定系统MVVM 数据驱动 简洁高效快速友好
缺点是不支持低版本的浏览器，不利于SEO 优化 第一次加载时间过长，不可以使用浏览器导航按钮的的前进 后退

对于MVVM的理解

model代表数据模型 也可以在model中定义数据修改和操作逻辑和任务
view 代表UI组件 他负责将数据模型通过UI转化出来
ViewModel监听数据模型和改变以及控制视图的行为，处理Model 和 View之间的交互是双向的，因此Model的变化会同步到View，View的变化也会同步到Model

第一次进入页面会触发哪几个生命周期

beforeCreate
created
beforeMount
mounted

created和mounted之间的区别

created 在渲染之前初始化数据时使用此时dom还未挂载
mounted 实例已挂载可以操作dom数据

$router 和 $route之间的区别

$route是路由信息对象 包含path params hash query fullPath name matched等路由信息参数
$router 是路由实例对象包含了路由的跳转方法和钩子函数

vue常用修饰符

.stop 阻止事件冒泡 .self 当事件发生在该元素本身而不是子元素的时候触发
.prevent 提交时间不再重新加载页面 .capture 事件监听 事件发生时调用