Vue2.0
Vue的解决了什么问题
- 虚拟dom:频繁操作原生dom非常耗性能。
- 视图、数据、结构分离:修改数据自动更新视图。
- 组件化:把一个单页应用中的各个模块拆分到一个一个单独的组件中,可复用性,维护性强。
Vue.js的特点
- 简洁:HTML模板+JSON数据+Vue实例组成。
- 数据驱动:自动计算数据和追踪依赖的模板表达式。
- 组件化:可复用、解耦的组件来构造页面
- 轻量:代码量小,不依赖其他库。
- 快速:精确有效批量DOM更新
- 模板友好:可通过npm bower等多种方式安装,很容易融入。
Vue的生命周期
- beforecreate创建前:data和methods中的数据方法还没有初始化。
- created创建后:data和methods已经初始化好了。
- beforeMount载入前:模板已经在内存中编译好了,但是尚未挂载到页面中去,此时页面还是旧的。
- mounted载入后:此时页面和内存中都是最新的数据,DOM已全部渲染。
- beforUpdate更新前:此时页面中的数据还是旧的,但是data中的数据是最新的,页面并未和最新的数据同步。
- Updated更新后:此时页面显示数据和data数据同步都是最新的。
- beforDestroyed销毁前:实例身上所有的data、methods已经过滤器都是可用状态,并没有真正的销毁。
- destroyed此时组件所有数据方法都不可用,真正的销毁。
- actiated组件激活时:用于重复激活一个实例的时候。
- deactiveated: 实例没有被激活时。
- errorCaptured 当捕获一个来自后代组件的错误是被调用。
watch、computed和methods的区别
- methods:在重新渲染的时候每次都会被重新的调用。
- computed:监听依赖的变化,只读且具有缓存的作用,用于复杂的运算。
- watch:监听依赖的变化,用于值的变化后需要执行业务逻辑才用watch。
Vue组件为什么是一个函数
- data是一个函数是,每个组件实例都有自己的作用域,每个实例相互独立,不会相互影响。Object是引用类型,如果不用function返回,每个组件的data都是用同一个内存地址,一个数据变量其他组件的数据也改变了。
路由懒加载
- 使用原因:在页面应用中,如果没有懒加载,运用webpack打包后文件将会异常的大,造成进入首页时,按需加载的内容过多,延时过长,不利于用户体验。使用懒加载可以按需加载,有效的分担首页所承当的加载压力,减少首页加载用时 原理:vue异步组件技术:异步记在路由配置,实现按需加载。
MVVC的理解
- MVVM就是将视图和业务逻辑分开。
- view:视图层,Model:数据模型,ViewModel:是两者的通信桥梁。
- 在MVVM框架下,View和Model组件没有直接联系,而是通过ViewModel进行交互,View和ViewModel之间已经Model和ViewModel之间的交互多事双向的,因此view数据变化会同步到model中,model变化也会反映到view上。因此开发者只需要关注业务逻辑,不需要手动操作DOM,也不需要关心数据状态的同步问题,这些都有MVVM统一管理。