针对VUE和VUEX的知识点梳理

目标人群：

有一定的MVVM知识基础

上手过MVVM的项目，理解各种情况的下的通信方式

技术文档：

VUE

VUEX

1. VUE:

生命周期
常用模板语法：
- {{value}} 插值表达式
- v-model="value" 双向绑定
- v-bind:name="props" 输入属性 => angular的[name]="props"
- v-on:nameChange="nameChange" 输出属性，组件事件 => angular的(nameChange)="nameChange()"
- v-if="NMFReady"
- v-show="NMFReady"
- v-for="(item, index) of componentList"

VUE组件类属性：

data： 组件中的属性定义在data方法中，其他方法使用其值时直接用this.xxx访问即可。

  data() {
    return {
      componentList: [],
      NMFReady: false,
      inputData: 'AAAAA',
      checkboxData: true,
      numberData: 1
    };
  },

methods: 组件中触发各种事件时掉用的函数。

  methods: {
    getComponent(item) {
      if (item && item.component) {
        return item.component.default;
      }
    }
  }

computed: 计算属性

  1.相比于methods，优势在于可以根据计算元的变化而动态的进行计算，计算元不发生变化时，可以储存缓存，不进行无效计算。
  2.相比于watch，可以精简不必要的变量。

watch: 侦听器

  相比于computed，前者相当于js中的get方法，直接返回数据，那么异步操作，前者就爱莫能助了。

组件基础

props: 组件的输入属性：

  <blog-post
    v-for="post in posts"
    v-bind:key="post.id"
    v-bind:post="post"
  ></blog-post>

  Vue.component('blog-post', {
    props: ['post'],
    template: `
      <div class="blog-post">
        <h3>{{ post.title }}</h3>
        <div v-html="post.content"></div>
      </div>
    `
  })

$emit: 组件的输出属性：

  子组件内部：
  <button v-on:click="$emit('enlarge-text', 0.1)">
    Enlarge text
  </button>

  父组件：
  <blog-post
    v-on:enlarge-text="onEnlargeText"
  ></blog-post>

  methods: {
    onEnlargeText: function (enlargeAmount) {
      this.postFontSize += enlargeAmount
    }
  }

插槽

2.VUEX

VUEX是什么

它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
五大VUEX核心概念
- State 状态 => 数据的状态，项目中存储数据的地方。
- Mutation 更改状态的工具 => stroe中的状态不能在外部进行修改，只能通过提交Mutation来完成。
- Action 事件 => 组件流中修改状态的接口，通过分发事件来进行Mutation的commit，进而修正State。
- Getter 取得器 => 很多组件对于状态的操作不都是修改，大部分都是单纯的取操作，所以Getter应运而生。
- Module 模块 => 不同的业务中使用单一的State是不合理的，所以Module应运而生，他可以让项目中不同的业务使用不同的数据源。
使用VUEX如何双向绑定