vue.js完整开发移动端AppVue全家桶内容备注 Vue.js 框架前端开发趋势 MVVM模式核心思想：数据

Vue.js 全家桶

Vue全家桶	内容	备注
Vue.js 框架	前端开发趋势 MVVM模式	核心思想：数据驱动和组件化
Vue-cli 脚手架	搭建基本代码框架	写好目录结构、本地调试、代码部署、热加载、单元测试
vue-router	官方插件管理路由
vue-resource	Ajax通信
Webpack 构建工具	vue源码经编译生成浏览器识别运行的代码	将各种前端资源文件打包为静态文件`.js` `.css` `.png`
vuex/Pinia	全局状态管理

前端开发趋势

旧浏览器（IE 6~8 不支持 ES5 特性）逐渐淘汰、移动端需求增加；
前端交互增多，功能复杂化（电商、金融信贷、音乐互动社区、视频分享、社交网络、打车出行）；
架构从传统后台 MVC 向 REST API + 前端 MV* 迁移;(MV*框架有：MVC、MVP、MVVM)

MVVM架构

把一堆乱数据，通过VM视图模型，转换为DOM页面结构。优势是View和Model之间是双向数据传递的，视图改变数据也随之改变。

MVVM 框架	内容	备注
Model 数据层	JS对象存储数据及对数据的处理CRUD	通过 ViewModel 实现与 View 通信；当 `VM` 监听到数据变化时，会通知对应视图更新
View 视图层	DOM UI 用户界面	通过 ViewModel 实现与 Model 通信；当用户操作视图，`VM`监听到变化，通知数据做改动
ViewModel 业务逻辑层	连接 View 和 Model	用`Observe`观察者实现监听

// View 视图：模板语法
<div id="root">
  <h1>hello, {{ name }}</h1>
</div>

// ViewModel 视图模型：Vue实例
// vm 上所有的属性 及 Vue原型上所有属性，在Vue模板中都可以直接使用
const vm = new Vue({   
    el:'#root',
    data(){
      return{
        // Model 模型：data中的数据；data中所有的属性，最后都出现在 vm 上
        name:'jianlong'
      }
    }

Vue.js 核心思想

数据驱动

DOM是数据的一种自然映射。Vue.js不直接操作DOM，只需要改变数据，Vue.js通过Directives指令对DOM做一层封装，当数据发生变化，会通知指令去修改对应的DOM，实现数据驱动视图；

当修改视图的时候，Vue.js会监听到这些变化，从而改变数据。形成了对数据的双向绑定。

数据响应原理

也就是说，数据驱动具体是怎么实现的呢？数据改变驱动视图自动更新：

最右侧的数据a，其b属性在Vue实例化时，会通过JS引擎的Object.defineProperty方法添加了getter和setter 函数，同时Vue会对模板进行编译，解析生成一个指令对象（是对DOM的封装）：Directive v-text="a.b"，每个指令对象都会关联一个Watcher，当数据a.b做求值时，就会触发getter，就会把依赖收集到Watcher里，当改变了a.b的值时，就会触发setter，并通知到被关联的Watcher，此时Watcher会再次对a.b求值，对比新旧值，发现值改变时，会通知到指令，通过update方法更新DOM，从而更新视图。

组件化

标题	内容	备注
封装可重用的代码	把页面拆分成区块每个区块对应一个组件	每个组件都对应一个`VM`，生成`VM`树，与`DOM`树一一对应
组件设计原则	页面上每个独立的可视/可交互区域视为一个组件	每个组件对应一个工程目录，组件所需资源在此目录下就近维护；页面是组件的容器，组件可嵌套组合形成完整页面

完整开发主要流程

需求分析、脚手架工具、架构设计、代码编写、自测、编译打包。

vue.js完整开发移动端App