1. vm.$nextTick()

    什么叫DOM更新后执行，又在数据修改后立即使用这个方法，就不能在修改数据后并且DOM更新后再执行？

    • 简单说，因为DOM至少会在当前tick里面的代码全部执行完毕再更新。所以不可能做到在修改数据后并且DOM更新后再执行，要保证在DOM更新以后再执行某一块代码，就必须把这块代码放到下一次事件循环里面，比如setTimeout(fn, 0)，这样DOM更新后，就会立即执行这块代码。
    1. //改变数据
    2. vm.message = 'changed'
    4. //想要立即使用更新后的DOM。这样不行，因为设置message后DOM还没有更新
    5. console.log(vm.$el.textContent) // 并不会得到'changed'
    7. //这样可以，nextTick里面的代码会在DOM更新后执行
    8. Vue.nextTick(function(){
    9.     console.log(vm.$el.textContent) //可以得到'changed'
    10. })
    1. vue和vuex管理状态的差异
      Vue
    1. <script src="https://unpkg.com/vue/dist/vue.js"></script>
    2. <div id="app">
    3.   <p>{{count}}
    4.     <button @click="inc">+</button>
    5.     <button @click="dec">-</button>
    6.   </p>
    7. </div>
    8. <script>
    9. new Vue({
    10.     el: '#app',
    11.     data() {
    12.         return {
    13.             count: 0
    14.         }
    15.     },
    16.     methods: {
    17.         inc() {
    18.             this.count++
    19.         },
    20.         dec() {
    21.             this.count--
    22.         }
    23.     }
    24. })
    25. </script>

    Vuex

    1. <script src="https://unpkg.com/vue/dist/vue.js"></script>
    2. <script src="https://unpkg.com/vuex@next"></script>
    3. <div id="app">
    4.   <p>{{count}}
    5.     <button @click="inc">+</button>
    6.     <button @click="dec">-</button>
    7.   </p>
    8. </div>
    9. <script>
    10. const store = new Vuex.Store({
    11.     state: {
    12.         count: 0
    13.     },
    14.     mutations: {
    15.         inc: state => state.count++,
    16.         dec: state => state.count--
    17.     }
    18. })
    20. const app = new Vue({
    21.     el: '#app',
    22.     computed: {
    23.         count() {
    24.             return store.state.count
    25.         }
    26.     },
    27.     methods: {
    28.         inc() {
    29.             store.commit('inc')
    30.         },
    31.         dec() {
    32.             store.commit('dec')
    33.         }
    34.     }
    35. })
    36. </script>

    我们先看到有哪些重要的变化：

    • 新的代码添加了对vuex@next脚本的依赖。这是当然的，因为你需要使用vuex的技术，当然需要引用它
    • methods数组还是这两个方法，这和demo1是一样的；但是方法内的计算逻辑，不再是在函数内进行，而是提交给store对象！这是一个新的对象！
    • count数据也不再是一个data函数返回的对象的属性；而是通过计算字段来返回，并且在计算字段内的代码也不是自己算的，而是转发给store对象。
      就是说，之前在vue实例内做的操作和数据的计算现在都不再自己做了，而是交由对象store来做了。

    store对象是Vuex.Store的实例。在store内有分为state对象和mutations对象，其中的state放置状态,mutations则是一个会引发状态改变的所有方法。正如我们看到的，目前的state对象，其中的状态就只有一个count。而mutations有两个成员，它们参数为state，在函数体内对state内的count成员做加1和减1的操作。

    vuex解决了组件之间共享同一状态的麻烦问题。当我们的应用遇到多个组件共享状态时，会需要：

    • 多个组件依赖于同一状态。传参的方法对于多层嵌套的组件将会非常繁琐，并且对于兄弟组件间的状态传递无能为力。这需要你去学习下，vue编码中多个组件之间的通讯的做法。
    • 来自不同组件的行为需要变更同一状态。我们经常会采用父子组件直接引用或者通过事件来变更和同步状态的多份拷贝。