Sicilia

Vue

Vue是一套用于构建用户界面的渐进式框架。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

 

模板语法

Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。

在底层的实现上，Vue 能够智能地计算出最少需要重新渲染多少组件，并把 DOM 操作次数减到最少。

模板语法

<span>Message: {{ msg }}</span>
<p v-if="seen">现在你看到我了</p>

绑定文本

指令

……

模板语法

<ul id="example-1">
  <li v-for="item in items">
    {{ item.message }}
  </li>
</ul>
var example1 = new Vue({
  el: '#example-1',
  data: {
    items: [
      { message: 'Foo' },
      { message: 'Bar' }
    ]
  }
})

计算属性

模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护：

<div id="example">
  {{ message.split('').reverse().join('') }}
</div>

当模板内部的逻辑比较复杂的时候，应该使用计算属性

计算属性

<div id="example">
  <p>Original message: "{{ message }}"</p>
  <p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>
...
  data: {
    message: 'Hello'
  },
  computed: {
    reversedMessage: function () {
      return this.message.split('').reverse().join('')
    }
  }
...

计算属性 VS 方法

我们可以将同一函数定义为一个方法而不是一个计算属性。两种方式的最终结果确实是完全相同的。然而，不同的是:

  • 计算属性基于依赖进行缓存的
  • 只有相关依赖发生改变时它们才会重新求值

这就意味着只要 message 还没有发生改变，多次访问 reversedMessage 计算属性会立即返回之前的计算结果，而不必再次执行函数。

组件

组件

定义一个button-counter组件，并在Vue中注册后，就可以任意次的复用

<div id="components-demo">
  <button-counter></button-counter>
  <button-counter></button-counter>
  <button-counter></button-counter>
</div>

Vue Loader

vue-loader 是一个 webpack 的 loader，可以将用某种格式编写的 Vue 组件转换为 JavaScript 模块

  • 默认支持ES2015
  • 允许对Vue组件的组成部分使用其它 webpack loader
  • .vue 文件中允许自定义节点，然后使用自定义的 loader 进行处理
  • 对每个组件模拟出 CSS 作用域
  • ……

Vue loader Support

Webpack

Webpack 是一个模块打包工具。它将一堆文件中的每个文件都作为一个模块，找出它们的依赖关系，将它们打包为可部署的静态资源。

Webpack

可以想像我们有一些 CommonJS 模块，它们不能直接在浏览器中运行，所以我们需要打包成一个文件，这样就可以通过 <script> 标签加载。webpack 可以遵循 require() 调用的依赖关系，为我们完成这些工作。

Webpack

  • 转换 ES2015，CoffeeScript 或者 TypeScript 模块为普通的 ES5 CommonJS 模块
  • 可以选择在编译之前检验你的源代码，比如eslint
  • 处理 HTML 或者 CSS 中引用的图片，移动到配置的路径中，并且使用 md5 hash 重命名
  • 更方便地结合第三方库，使用npm管理包

Webpack允许我们

 Use Vue loader

Vue提供了vue cli来方便地创建Vue loader项目

npm install -g @vue/cli
vue create hello-vue

默认的项目模板基本可以满足开发所需

Vuex

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

State

Vuex 使用单一状态树，一个对象包含了全部的应用层级状态。这也意味着，每个应用将仅仅包含一个 store 实例。单一状态树让我们能够直接地定位任一特定的状态片段，在调试的过程中也能轻易地取得整个当前应用状态的快照。

获取State

从 store 实例中读取状态最简单的方法就是在计算属性中返回某个状态

const Counter = {
  template: `<div>{{ count }}</div>`,
  computed: {
    count () {
      return this.$store.state.count
    }
  }
}

每当 store.state.count 变化的时候, 都会重新求取计算属性，并且触发更新相关联的 DOM

获取State

当一个组件需要获取多个状态时候，我们可以使用 mapState 辅助函数帮助我们生成计算属性：

import { mapState } from 'vuex'

export default {
  // ...
  computed: mapState({
    // 箭头函数可使代码更简练
    count: state => state.count,
    // 传字符串参数 'count' 等同于 `state => state.count`
    countAlias: 'count',
  })
}

获取State

当一个组件需要获取多个状态时候，我们可以使用 mapState 辅助函数帮助我们生成计算属性：

import { mapState } from 'vuex'

export default {
  // ...
  computed: mapState({
    // 箭头函数可使代码更简练
    count: state => state.count,
    // 传字符串参数 'count' 等同于 `state => state.count`
    countAlias: 'count',
  })
}

Mutation

更改状态的唯一方法是提交 mutation。每个mutation都有一个事件类型和一个回调函数。这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数

Mutation

首先需要注册一个类型为increment的Mutation

mutations: {
  increment (state) {
    // 变更状态
    state.count++
  }
}

要唤醒一个 mutation handler，你需要以相应的 type 调用 store.commit 方法

store.commit('increment')

Notice

Mutation 必须是同步函数

如果我们需要用日志记录每一条 mutation ，需要捕捉到前一状态和后一状态的快照。如果mutation 中存在异步函数，这是不可能完成的：因为当 mutation 触发的时候，回调函数还没有被调用，devtools 不知道什么时候回调函数实际上被调用，这导致实质上任何在回调函数中进行的状态的改变都是不可追踪的。

Action

在 Mutation 中混合异步调用会导致你的程序很难调试。这就是为什么我们要区分Action和Mutation这两个概念。在 Vuex 中，mutation 都是同步事务，而Action负责处理异步操作。

Action

Action 类似于 Mutation，不同在于：

  • Action 提交的是 Mutation，而不是直接变更状态。
  • Action 可以包含任意异步操作。

Action

同样地，Action需要进行注册

actions: {
  incrementAsync ({ commit }) {
    setTimeout(() => {
      commit('increment')
    }, 1000)
  }
}
store.dispatch('incrementAsync', {
  amount: 10
})

然后进行分发

Thanks

deck

By Fan Shi

Made with Slides.com

deck

  • 884

More from Fan Shi