VUE及VUEX的快速简单梳理

针对VUE和VUEX的知识点梳理

目标人群：

• 有一定的MVVM知识基础
• 上手过MVVM的项目，理解各种情况的下的通信方式

技术文档：

• VUE
• VUEX

1. VUE:

1. 生命周期
2. 常用模板语法：
   • {{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"
3. 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方法，直接返回数据，那么异步操作，前者就爱莫能助了。
   

4. 组件基础
   • props: 组件的输入属性：

     
   
     Vue.component('blog-post', {
       props: ['post'],
       template: `
         
   
           
   {{ post.title }}
           
   
         
       `
     })
   

   • $emit: 组件的输出属性：

     子组件内部：
     
       Enlarge text
     
   
     父组件：
     
   
     methods: {
       onEnlargeText: function (enlargeAmount) {
         this.postFontSize += enlargeAmount
       }
     }
   

5. 插槽

2.VUEX

1. VUEX是什么

   它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

2. 五大VUEX核心概念

   • State 状态 => 数据的状态，项目中存储数据的地方。
   • Mutation 更改状态的工具 => stroe中的状态不能在外部进行修改，只能通过提交Mutation来完成。
   • Action 事件 => 组件流中修改状态的接口，通过分发事件来进行Mutation的commit，进而修正State。
   • Getter 取得器 => 很多组件对于状态的操作不都是修改，大部分都是单纯的取操作，所以Getter应运而生。
   • Module 模块 => 不同的业务中使用单一的State是不合理的，所以Module应运而生，他可以让项目中不同的业务使用不同的数据源。

3. 使用VUEX如何双向绑定