vue--温故而知新

1.vue组件中的data为何声明为函数(return)

首先，Vue 将会递归将 data 的属性转换为 getter/setter，从而让 data 的属性能够响应数据变化。对象必须是纯粹的对象 (含有零个或多个的 key/value 对)：浏览器 API 创建的原生对象，原型上的属性会被忽略。

其次，当一个组件被定义，data 必须声明为返回一个初始数据对象的函数，因为组件可能被用来创建多个实例(组件复用)。如果 data 仍然是一个纯粹的对象，则所有的实例将共享引用同一个数据对象！通过提供 data 函数，每次创建一个新实例后，我们能够调用 data 函数，从而返回初始数据的一个全新副本数据对象。
vuex中的数据必须和data中的属性遵循相同的规则

2.vuex中的getter、action

详细参考链接：https://vuex.vuejs.org/zh/guide/getters.html
Vuex 允许我们在 store 中定义“getter”（可以认为是 store 的计算属性）。就像计算属性一样，getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。
Getter 接受 state 作为其第一个参数。

Vuex 通过 store 选项，提供了一种机制将状态从根组件“注入”到每一个子组件中（需调用 Vue.use(Vuex)）：
结合辅助函数mapState、mapGetters、mapMutations…将this.事件名映射到this.$store.事件名

const app = new Vue({
  el: '#app',
  // 把 store 对象提供给 “store” 选项，这可以把 store 的实例注入所有的子组件
  store,
  components: { Counter },
  template: `
    <div class="app">
      <counter></counter>
    </div>
  `
})

Action 类似于 mutation，不同在于：

• Action 提交的是 mutation，而不是直接变更状态。
• Action 可以包含任意异步操作。
  如下理解：

const store = new Vuex.Store({
  state: {
    count: 0
  },
  //mutation注册一个更改state属性的方法，但需要commit才能执行，只能同步，通过commit触发
  mutations: {
    increment (state) {
      state.count++
    }
  },
  //action不直接改变状态，而是执行了commit这一步，可包含任意异步，通过dispatch触发
  actions: {
    increment (context) {
      context.commit('increment')
    }
  }
})

异步实例参考如下：https://www.jb51.net/article/173822.htm

3.promise和async函数必要时会是很好的解决方案

参考阮一峰的ES6教程：
async函数：http://es6.ruanyifeng.com/#docs/async
promise:http://es6.ruanyifeng.com/#docs/promise
async函数返回一个 Promise 对象，async放在function前，可以使用then方法添加回调函数。当函数执行的时候，一旦遇到await就会先返回，等到异步操作完成，再接着执行函数体内后面的语句。
示例：

//async 表示方法内有异步操作
async function getStockPriceByName(name) {
//这里异步操作间存在结果依赖--加上await处理依赖关系
  const symbol = await getStockSymbol(name);
  const stockPrice = await getStockPrice(symbol);
  return stockPrice;
}

getStockPriceByName('goog').then(function (result) {
  console.log(result);
});

4.响应式对象属性更改vue.set()

Vue.set( target, propertyName/index, value )
参数：

{Object | Array} target
{string | number} propertyName/index
{any} value
返回值：设置的值。

用法：
向响应式对象中添加一个属性，并确保这个新属性同样是响应式的，且触发视图更新。它必须用于向响应式对象上添加新属性，因为== Vue 无法探测普通的新增属性==
(比如 this.myObject.newProperty = ‘hi’)

5.自定义指令directive

参考详解：https://cn.vuejs.org/v2/guide/custom-directive.html
应用场景示例：
创建一个自定义指令，用来通过固定布局将元素固定在页面上(顶部或左侧)。我们可以像这样创建一个通过指令值来更新竖直位置像素值的自定义指令，并使用动态参数可以非常方便地根据每个组件实例来进行更新：

<div id="dynamicexample">
  <h3>Scroll down inside this section ↓</h3>
  <p v-pin:[direction]="200">I am pinned onto the page at 200px to the left.</p>
</div>

//自定义指令使用方法
Vue.directive('pin', {
  bind: function (el, binding, vnode) {
    el.style.position = 'fixed'
    var s = (binding.arg == 'left' ? 'left' : 'top')
    el.style[s] = binding.value + 'px'
  }
})

new Vue({
  el: '#dynamicexample',
  data: function () {
    return {
    //动态参数，确定固定在左侧还是顶部
      direction: 'left'
    }
  }
})