一 什么是vue
是一套用于构建用户界面的渐进式框架
Vue在构建用户界面时,能够
- 编写结构:vue提供指令、数据驱动视图构建页面的结构
- 美化样式:基础css样式即可美化
- 处理交互:基于vue提供的事件绑定,可轻松处理用户和界面之间的交互行为
二 Vue的特点和优势
vue两大特点:响应式编程、组件化。
vue的优势:轻量级框架、简单易学、双向数据绑定、组件化、数据和结构的分离、虚拟DOM、运行速度快。 vue是单页面应用,使页面局部刷新,不用每次跳转页面都要请求所有数据和dom,这样大大加快了访问速度和提升用户体验。而且他的第三方ui库很多节省开发时间
** 响应式的数据绑定**
这里的响应式不是@media 媒体查询中的响应式布局,而是指vue.js会自动对页面中某些数据的变化做出响应。
这也就是vue.js最大的优点,通过MVVM思想实现数据的双向绑定,让开发者不用再操作dom对象,有更多的时间去思考业务逻辑。
组件化开发
Vue.js通过组件,把一个单页应用中的各种模块拆分到一个一个单独的组件(component)中,我们只要先在父级应用中写好各种组件标签(占坑),并且在组件标签中写好要传入组件的参数(就像给函数传入参数一样,这个参数叫做组件的属性),然后再分别写好各种组件的实现(填坑),然后整个应用就算做完了。
组件化开发的优点:提高开发效率、方便重复使用、简化调试步骤、提升整个项目的可维护性、便于协同开发。
组件化的优点
- 提高开发效率
- 方便重复使用
- 简化调试步骤
- 提升整个项目的可维护性
- 便于协同开发
三、Vue中的性能优化
- v-for不与v-if同层使用,因为v-for的优先级大于v-if
- 使用 keep-alive缓存组件,避免组件反复的创建与销毁
- 设置key,提高对比新旧dom树中节点时的效率
- 使用v-if时默认不显示
- 切换频率高时用,用v-show代替v-if ;切换频率低时,用v-if代替v-show
- 无需自动响应的数据不放入data中。因为在data中的数据都会被监听,浪费内存。
四、vue常用的钩子函数
beforeCreate
这个时候,this变量还不能使用
computed
是把所有需要需要依赖其他值计算的值写成对象的key值
watch
把监听的值写成对象的key值
methods
可以在methods属性里给vue定义方法