Skip to content

Vue 学习

Jump to bottom
LanSa edited this page Jul 16, 2018 · 16 revisions

在已熟练使用 react 的基础上，对 Vue 进行触类旁通学习。整个学习过程围绕以下三个方面进行：

  1. 理解 mvvm 模式，辅助 vue 设计原理进行理解
  2. 通过查阅 API 实现页面及组件，掌握组件的生命周期，基础知识体系。
  3. 收集有关 vue 的面试题，学习并思考它在实际工作中可能遇到的问题。

一. vue 设计原理

什么是 MVVM 模式 ？

  1. 概念

    MVVM，即 Model-View-ViewModel，一种程序架构设计思想，通过抽象 View 的状态及行为，将开发过程中的 UI 和业务逻辑分开为 View 和 Model，而 View 及 Model 的通信则由 ViewModel 来桥接：

    • Model: 数据层，纯数据对象
    • View: 视图层，用户所看见的页面
    • ViewModel: 数据层与视图层的桥接层，通过向 Model 层取数据进行业务逻辑处理后通知 View 进行绘制，当 View 状态发生变化时，ViewModel 将这种状态变化通知到 Model。

图例：

image

  1. 原生 JS 实践

<待续...>

vue 当中的 mvvm

vue 是使用 MVVM 模式的典范，ViewModel 通过对数据进行劫持，并向 View 暴露数据接口及指令，当数据发生变化时，会触发劫持时绑定的方法，完成对 View 的更新。

原理：

  • Observer 观察者，遍历data 数据对象的属性，用 Object.defineProperty 将它们转换为 getter 及 setter, 即劫持监听所有属性，当某一属性发生变化时，通知订阅者 watcher
  • Compile 指令解析器，扫描并解析每个节点的指令，根据指令模板替换数据，并绑定相应的状态更新函数。
  • Watcher 订阅者，订阅并接收每个属性变动的通知，执行指令绑定的相应回调函数
  • Dep 消息订阅器，通过内部维护的数组来收集订阅者，数据变动触发 notify 函数，再调用订阅者的 update 方法

图例：

image

参考

二. vue 生命周期

1. created

vue 实例被创建时执行, 相当于 react 的 componentDidMount
例如，监听事件并执行回调

created () {
 EventBus.$on('someEvent', (messages) => {
   // do something
 })
}

三. vue 实践

1. 知识点(不同于 react)：

API:

  • components: 注册该组件可能需要使用的子组件。
  • props: 接收由父组件传递而来的数据。
  • data: function, 以返回值形式存放组件渲染所需的数据, 可在此对数据进行数据变换，如调用枚举等。
  • methods: object, 定义组件需要执行的方法及处理函数，如 button 的点击事件等。
  • computed: object, 存放需要计算的属性，该属性拥有两种方法：
    • getter: 返回经过计算的属性。
    • setter: 接收一个参数，当对该属性赋值时，将会调用该方法，与该属性存在计算关系的其他属性将会受到影响。
  • watch: object, 监听某一属性，当该属性发生变化时，触发 callback。通常用在数据变化引起异步执行或开销较大的计算当中，如发送网络请求等。

注意：

  • computed vs methods：computed 类的属性具有缓存功能，即所依赖的属性不发生变化时，该属性的 callback 也不会被调用，即其不会发生变化。
  • computed vs watch: computed 类的属性依赖其他属性，当所依赖的属性发生变化时，该属性的 callback 主动触发；watch 是监听已定义好的属性，当该属性发生变化时，触发 callback，需要变化的属性相应地得到改变。

常用指令集合：

  • v-if:
  • v-on:
  • v-bind:
  • v-for:
  • v-show：
  • v-model:

2. 组件

<Todolist />

Clone this wiki locally