vue3

vue 3.0目前还在beta版本，他的仓库地址为vue-next (opens new window)。

要创建vue 3.0定制版本，之前需要vue-cli先创建vue 2.0然后再升级到vue 3.0。目前vue3.0 不支持typescript。

1. 创建vue 2.0版本：

   vue create datav-screen

2. 升级到vue 3.0版本：

   vue add vue-next

现在vue-cli可以直接创建vue 3.0定制版本了。

vue 3.0 相对于 vue 2.0的区别是：

1. 更好地支持Tree-Shaking，引入的是vue中的某些东西，而不是整个vue实例。
2. 使用插件不再是Vue.use，而是createApp。

CompositionAPI

vue社区可以提RFC，在该仓库vuejs-rfcs (opens new window)。这里面很重要的一个特性是composition-api，官方专门提供了相应的文档Composition API (opens new window)

Composition API是一组低侵入式，函数式的API，使我们能够更灵活地组合组件的逻辑。低侵入式可以把一段代码抽离到一个单独模块中，不用与现在的代码耦合。

结合Composition API，vue的router和vuex同之前都不太一样：

store文件夹下的index.js文件内容为：

import { createStore } from 'vuex'

export default createStore({
  state: {
    number: 100,
  },
  mutations: {
    SET_NUMBER(state, value) {
      state.number = value
    }
  },
  actions: {
    setNumber({ commit }, value) {
      commit('SET_NUMBER', value);
    }
  },
  modules: {
    a: {
      state: {
        aa: 11,
      },
      mutations: {
        SET_AA(state, value) {
          state.aa = value;
        }
      }
    },
    b: {
      state: {
        bb: 22,
      },
      mutations: {
        SET_BB(state, value) {
          state.bb = value;
        }
      }
    },
  },
  getters: {
    aaValue: (state) => state.a.aa,
    bbValue: (state) => state.b.bb
  }
})

useTest.js文件：

import { reactive, computed, watch, onMounted, ref, getCurrentInstance } from "vue";

export default function useTest() {
    //类似react hooks中的 useState
    const { ctx } = getCurrentInstance();
    const state = reactive({ count: 1 });
    const count2 = ref(3);

    const increment = () => {
        state.count++;
        count2.value++
    };

    const gotoAbout = () => {
        ctx.$router.push("/about")
    }

    const doubleCount = computed(() => state.count * 2);
    const doubleCount2 = computed(() => count2.value * 3);

    const number = computed(() => ctx.$store.state.number)

    const updateNumber = () => {
        //ctx.$store.commit('SET_NUMBER', count2.value * 100)
        ctx.$store.dispatch('setNumber', count2.value * 100)
    }

    const aa = computed(() => ctx.$store.getters.aaValue);
    const bb = computed(() => ctx.$store.getters.bbValue);

    const updateAA = () => {
        ctx.$store.commit('SET_AA', ctx.$store.state.a.aa + 1)
    }

    watch(() => state.count, () => {
        console.log('state.count changed:' + state.count)
    });

    onMounted(() => {
        console.log('onMounted...');
    })

    return {
        state,
        increment,
        doubleCount,
        doubleCount2,
        gotoAbout,
        number,
        updateNumber,
        aa,
        bb,
        updateAA,
    };
};

Test.vue文件内容为：

<template>
  <button @click="increment">{{ state.count }}</button><br />
  doubleCount: {{ doubleCount }} <br />
  count2:{{ doubleCount2 }}<br />
  <button @click="gotoAbout">跳转到about页面</button> <br />
  vuex nubmer:{{ number }} <br />
  <button @click="updateNumber">Update Number</button><br />
  vuex a.aa:{{ aa }}<br />
  <button @click="updateAA">Update AA</button><br />
  vuex b.bb:{{ bb }}<br />
</template>

<script>
import useTest from "./useTest";
export default {
  setup() {
    return useTest();
  },
};
</script>