vue基础

vue是一套用于构建用户界面的前端框架，提供构建用户界面的一整套解决方案（俗称vue全家桶）

区别	传统开发	vue开发
构建方式	jQuery+模板引擎	结构：vue指令，数据驱动视图 交互：事件绑定（双向数据绑定）
缺点	基于结构：需要定义大量模板结构，数据变化时需要重新调整，否则不会更新 基于交互：业务复杂数据变化频繁，DOM操作困难	底层基于Object.defineProperty实现响应式，兼容性较差，api本身不支持IE8及以下浏览器 CRS（浏览器端渲染）先天不足，首页白屏 SPA先天对SEO（搜索引擎优化）优化不足
优点	基于结构：不用手动拼接字符串 基于交互：屏蔽DOM API兼容性，提高操作效率体验	配合diff算法、响应式和观察者、异步队列等手段最小代价更新dom，渲染页面 组件化，支持强大预处理 丰富API满足业务开发 生命周期钩子函数

包含：

vue(核心库)

vue-router(路由方案)

vuex(状态管理方案)

vue组件库(快速搭建页面ui效果的方案)

辅助工具：

vue-cli(npm全局包：一键生成工程化vue项目-基于webpack-大而全)

vite(npm全局包：一键生成工程化的vue项目-小而巧)

vue-devtools(浏览器插件：辅助调试)

vetur(vscode插件：提供语法高亮和智能提示)

数据驱动视图

页面所依赖的数据（从接口获取还是页面上假数据）都会被vue实时监听并且自动渲染到页面上

好处：当页面数据发生变化时，页面会自动进行重新渲染

数据驱动视图是单项数据绑定

双向数据绑定

在填写表单时，双向数据绑定辅助开发者不操作DOM的前提，自动把用户填写的内容同步到数据源中

好处：不需要手动操作DOM元素，获取表单元素最新的值

MVVM

MVVM是vue实现数据驱动视图和双向数据绑定的核心原理：

 

ViewModel表示vue实例，是MVVM的核心

MVVM是Model+View+ViewModel缩写