vue.js初级教程--01.简介

Posted 2020-10-04

Vue特点

• 渐进式框架

  • 采用自底向上增量开发的设计

  • 核心库只关注视图层

• 轻量级

  • 22kb min+gzip

• 高性能

  • 渲染性能：支持条件、循环、服务端渲染方式

  • 更新性能：数据驱动、响应式

特性

• 数据驱动,支持双向数据绑定，异步批量DOM更新

• 组件化,支持组件独立、组件复用以及异步加载

• 模块化,模板、数据、外数据、方法、生命周期函数、样式

• 指令,支持内置指令和自定义指令

虚拟DOM

为什么需要虚拟DOM

DOM是很慢的，其元素非常庞大，页面的性能问题鲜有由JS引起的，大部分都是由DOM操作引起的。如果对前端工作进行抽象的话，主要就是维护状态和更新视图；而更新视图和维护状态都需要DOM操作。其实近年来，前端的框架主要发展方向就是解放DOM操作的复杂性。

在jQuery出现以前，我们直接操作DOM结构，这种方法复杂度高，兼容性也较差；有了jQuery强大的选择器以及高度封装的API，我们可以更方便的操作DOM，jQuery帮我们处理兼容性问题，同时也使DOM操作变得简单；但是聪明的程序员不可能满足于此，各种MVVM框架应运而生，有angularJS、avalon、vue.js等，MVVM使用数据双向绑定，使得我们完全不需要操作DOM了，更新了状态视图会自动更新，更新了视图数据状态也会自动更新，可以说MMVM使得前端的开发效率大幅提升，但是其大量的事件绑定使得其在复杂场景下的执行性能堪忧；有没有一种兼顾开发效率和执行效率的方案呢？ReactJS就是一种不错的方案，虽然其将JS代码和html代码混合在一起的设计有不少争议，但是其引入的Virtual DOM(虚拟DOM)却是得到大家的一致认同的。

理解虚拟DOM

虚拟的DOM的核心思想是：对复杂的文档DOM结构，提供一种方便的工具，进行最小化地DOM操作。这句话，也许过于抽象，却基本概况了虚拟DOM的设计思想

(1) 提供一种方便的工具，使得开发效率得到保证 (2) 保证最小化的DOM操作，使得执行效率得到保证

本文出自 “徐天友” 博客，请务必保留此出处http://mariocoding.blog.51cto.com/6328404/1961086