Vue

vue是什么？

渐进式的JavaScript框架
渐进式：

插件

必安装 - vue-devtools

学习和调试vue必备之利器 - 官方插件

• 下载插件：https://chrome.zzzmh.cn/info?token=nhdogjmejiglipccpnnnanhbledajbpd

  vscode 开发使用插件

• 代码高亮插件-vetur

• 代码提示插件-vue vscode snippets

理论

SPA单页应用

定义：SPA（single page application）单页面富应用开发=》典型代表：使用vue react angular框架开发

• 相对SPA比较传统开发方式MPA

区别：

1. SPA单页应用借助后续学习的路由切换页面（.vue文件）=》体验更好
2. MPA多页应用借助a标签跳转html页面

MVVM设计模式

数据驱动视图

转变开发思想，定义变量绑定框架之后，只需要修改数据就会更新页面，不需要去dom操作

MVVM详解

• 模式说明：MVVM = Model + View + ViewModel
  • M( Model ) 指 数据（data函数定义的变量）
  • V( View )指 视图（template）
  • VM( ViewModel ) 指 实例对象（组件实例/this）
• 
  

注意⚠️：
1. 在vue中，不推荐直接手动操作DOM！！！
2. 在vue中，通过数据驱动视图，不要在想着怎么操作DOM，而是想着如何操作数据！！(思想转变)
总结: vue源码内采用MVVM设计模式思想, 大大减少了DOM操作, 提高开发效率

虚拟dom和diff算法

1. vue框架初始生成一份虚拟DOM（本质是js）
2. 修改.vue页面数据后，会生成第二份虚拟DOM
3. 两份虚拟DOM使用Diff算法对比（找不同），得到需要更新的内容
4. 最后，vue只将变化的内容更新到DOM中，重新渲染到页面中