携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第1天，点击查看活动详情

传统网页开发步骤

• Ajax请求服务器的数据
• 当数据获取到本地，生成对应的网页结构
• 通过对事件的设置来监听用户的操作和用户操作导致的变化
• 当元素放生变化，会将用户操作导致的结果发送给服务器，以告知服务器客户端进行了哪些处理
• 最后根据用户的操作更新结构，比如：用户点击了删除等等

传统开发方式的缺点

• DOM操作频繁，代码繁杂：比如每写一次queryselector很繁杂
• DOM操作与逻辑代码混合，可维护性差：数据操作与结构操作混合在一起
• 不同功能区域书写在一起，可维护性低：一个网页的功能按照功能性需要分成很多部分，比如轮播图与列表区域应该书写在不同文件中，而不是结构都写在html中，样式都写在CSS文件中
• 模块之间的依赖关系复杂

什么是Vue

• 框架：指JavaScript的框架
• Vue.js两大核心特性：数据驱动视图
• 数据变化会自动更新到对应元素中，无需手动操作DOM，这种行为称作单向数据绑定（从数据到视图的单向过程）
• 对于输入框等可输入元素，可设置双向数据绑定（对于div、p之类的无法进行双向数据绑定）
• 双向数据绑定是在数据绑定基础上，可自动将元素输入内容更新给数据，实现数据与元素内容的双向绑定
• Vue.js两大核心特性：组件化开发
  • 组件化开发，允许我们将网页功能封装为自定义HTML标签，复用时书写自定义标签名即可
  • 组件不仅可以封装结构，还可以封装样式与逻辑代码，大大提高了开发效率与可维护性
• Vue实例
  • Vue实例是通过Vue函数创建的对象，是使用Vue功能的基础：var vm = new Vue({选项对象})

数据驱动视图

• 数据驱动视图实现原理
  • Vue.js的数据驱动视图是基于MVVM模型实现的
  • MVVM（Model-View-ViewModel）是一种软件开发思想
    • Model层，代表数据，网页的核心
    • View层，代表视图模块，网页结构
    • ViewModel层，代表业务逻辑处理代码，控制器
• 数据驱动视图优点与缺点
  • 优点
    • 基于MVVM模型实现的数据驱动视图解放了DOM操作
    • View与Model处理分离，降低代码耦合度
  • 缺点
    • 双向数据绑定时的Bug调式难度增大
    • 大型项目的View与Model过多，维护成本高
      

本期的内容就到这里啦！让我们明天一起继续学习Vue.js吧!