Vue 全部知识点复习

Vue2.0

MVC、MVVM

MVC

MVC 模式同时提供了对 HTML、CSS 和 JavaScript 的完全控制。
Model（模型）是应用程序中用于处理应用程序数据逻辑的部分。
通常模型对象负责在数据库中存取数据。
View（视图）是应用程序中处理数据显示的部分。
通常视图是依据模型数据创建的。
Controller（控制器）是应用程序中处理用户交互的部分。
通常控制器负责从视图读取数据，控制用户输入，并向模型发送数据。

• 图示

  • M

    • 模型（数据层如数据库）

  • V

    • 视图（视图层、HTML页面）

  • C

    • 控制器（业务逻辑层）

• 优点

  • 耦合性低

    视图层和业务层分离，这样就允许更改视图层代码而不用重新编译模型和控制器代码，同样，一个应用的业务流程或者业务规则的改变只需要改动MVC的模型层即可。因为模型与控制器和视图相分离，所以很容易改变应用程序的数据层和业务规则。
    模型是自包含的，并且与控制器和视图相分离，所以很容易改变应用程序的数据层和业务规则。如果把数据库从MySQL移植到Oracle，或者改变基于RDBMS数据源到LDAP，只需改变模型即可。一旦正确的实现了模型，不管数据来自数据库或是LDAP服务器，视图将会正确的显示它们。由于运用MVC的应用程序的三个部件是相互独立，改变其中一个不会影响其它两个，所以依据这种设计思想能构造良好的松耦合

  • 重用性高

    随着技术的不断进步，需要用越来越多的方式来访问应用程序。MVC模式允许使用各种不同样式的视图来访问同一个服务器端的代码，因为多个视图能共享一个模型，它包括任何WEB（HTTP）浏览器或者无线浏览器（wap），比如，用户可以通过电脑也可通过手机来订购某样产品，虽然订购的方式不一样，但处理订购产品的方式是一样的。由于模型返回的数据没有进行格式化，所以同样的构件能被不同的界面使用。例如，很多数据可能用HTML来表示，但是也有可能用WAP来表示，而这些表示所需要的命令是改变视图层的实现方式，而控制层和模型层无需做任何改变。由于已经将数据和业务规则从表示层分开，所以可以最大化的重用代码了。模型也有状态管理和数据持久性处理的功能，例如，基于会话的购物车和电子商务过程也能被Flash网站或者无线联网的应用程序所重用。

  • 生命周期成本低

    MVC使开发和维护用户接口的技术含量降低。

  • 部署快

    使用MVC模式使开发时间得到相当大的缩减，它使程序员（Java开发人员）集中精力于业务逻辑，界面程序员（HTML和JSP开发人员）集中精力于表现形式上。

  • 可维护性高

    分离视图层和业务逻辑层也使得WEB应用更易于维护和修改。

  • 有利软件工程化管理

    由于不同的层各司其职，每一层不同的应用具有某些相同的特征，有利于通过工程化、工具化管理程序代码。控制器也提供了一个好处，就是可以使用控制器来联接不同的模型和视图去完成用户的需求，这样控制器可以为构造应用程序提供强有力的手段。给定一些可重用的模型和视图，控制器可以根据用户的需求选择模型进行处理，然后选择视图将处理结果显示给用户。

• 缺点

  • 没有明确的定义
  • 不适合小型，中等规模的应用程序
  • 增加系统结构和实现的复杂性
  • 视图与控制器间的过于紧密的连接
  • 视图对模型数据的低效率访问
  • 一般高级的界面工具或构造器不支持模式

MVVM

MVVM是Model-View-ViewModel的简写。它本质上就是MVC 的改进版。MVVM 就是将其中的View 的状态和行为抽象化，让我们将视图 UI 和业务逻辑分开。当然这些事 ViewModel 已经帮我们做了，它可以取出 Model 的数据同时帮忙处理 View 中由于需要展示内容而涉及的业务逻辑。

• MVVM（Model–View–Viewmodel）是一种软件架构模式

  • M

    • 模型

      • 数据模型与持久化抽象模型。数据模型很好理解，就是从服务器拉回来的JSON数据。而持久化抽象模型暂时放在Model层，是因为MVVM诞生之初就没有对这块进行很细致的描述。按照经验，我们通常把数据库、文件操作封装成Model，并对外提供操作接口。（有些公司把数据存取操作单拎出来一层，称之为DataAdapter层，所以在业内会有很多MVVM的变种，但其本质上都是MVVM）

  • V

    • 视图

      • 视图展示。包含UIView以及UIViewController，View层是可以持有ViewModel的。

  • VM

    • 视图模型

      • 视图适配器。暴露属性与View元素显示内容或者元素状态一一对应。一般情况下ViewModel暴露的属性建议是readOnly的，至于为什么，我们在实战中会去解释。还有一点，ViewModel层是可以持有Model的。

  • Binder

    • MVVM的灵魂。可惜在MVVM这几个英文单词中并没有它的一席之地，它的最主要作用是在View和ViewModel之间做了双向数据绑定。如果MVVM没有Binder，那么它与MVC的差异不是很大。

• 优点

  • 低耦合
  • 可重用性
  • 独立开发
  • 可测试

• 缺点

  • 调用复杂度增加
  • DEBUG困难
  • 数据双向绑定不利于View部分的代码复用
  • 类会增多

环境搭建

单页面应用

• 直接引用CDN链接

使用Cli搭建本地开发

• 1、全局安装cli

  • npm install -g @vue/cli
    yarn global add @vue/cli

• 2、初始化项目

  • vue create hello-world

• 3、进入项目

  • cd hello-world

• 4、安装依赖

  • npm/ cnpm install
    yarn install

• 5、启动项目

  • npm run serve
    yarn run serve / yarn serve

生命周期

beforeCreate

• 在实例初始化之后，数据观测（data observer）和event/watcher 事件配置之前调用

  • el (DOM) // undefined
    data // undefined
    message // undefined

created

• 实例已经已经创建完成之后被调用。在这一步，实例一完成了以下配置：数据观测（data observer）, 属性和方法的运算，watch/event 事件回调，但是挂载阶段还未开始，$el 属性目前还是undefined

  • el (DOM) // undefined
    data // 已被初始化
    message //已被初始化

beforeMount

• 在挂载开始直接被被调用;相关的render韩式首次被调用。该钩子在服务器端渲染期间不被调用

  • el (DOM) // 已被初始化
    data // 已被初始化
    message //已被初始化

mounted

• el 被薪创建的vm. e l 替 换 ， 并 挂 载 到 实 例 上 去 之 后 调 用 该 钩 子 ， 如 果 r o o t 实 例 挂 载 了 一 个 文 档 内 元 素 ， 当 m o u n t e d 被 调 用 时 v m . el 替换，并挂载到实例上去之后调用该钩子，如果root 实例挂载了一个文档内元素，当mounted 被调用时 vm.