vue3.0和vue2.0对比

在一次新的项目中，尝试去开启3.0的写法。总结些方法出来。

• 2.0的监听性能没那么好，以前通过wachter监听，性能方面比react差太多。
• 2.0不支持typescript的语法，未来的趋势肯定是往typescript去走。
• 3.0中取消了this的指向，在vue2.0中，this指向的是vue的对象。

mian.js的一些事情

import App from './App.vue';

const app = createApp(App); // 创建实例


import 'vant/lib/index.css';
// import 'vant/lib/icon/local.css'; //本地icon的字体 注意 * 的字体不要设置
import { Toast, Dialog } from 'vant';
app.use(Toast).use(Dialog)


// 引入全局弹窗
import alertBox from './utils/alert';
app.use(alertBox);


// vuex组件
import store from '@/store';
app.use(store);

// 页面
import views from '@/views/index.js';
app.use(views);

// 将components文件下的所有组件都注册到全局
import components from '@/components/index.js';
app.use(components);

// 引用通用的样式
import "@/common/css/common.scss";



// // 全局过滤器
// app.config.globalProperties.$filters = {
//   prefix(url) {
//     if (url && url.startsWith('http')) {
//       return url
//     } else {
//       url = `http://backend-api-01.newbee.ltd${url}`
//       return url
//     }
//   }
// }



app.mount('#app')

上面是项目中的一些配置，可以发现都是通过createApp后返回的对象，通过这个对象来挂载需要的组件。

vue文件中的变化

<template>
  <div id="app">
    <div v-if="pageName">
      <transition
        name="fade"
      >
        <component class="child_view" :is="pageName" />
      </transition>
      <div class="open_debug" @click="showDebug"></div>
      <div class="clear" @click="clearUserData"></div>
    </div>
  </div>
</template>

<script>
import { onMounted, reactive, toRefs, computed } from "vue";
import { useStore } from "vuex";

export default {
  name: "App",
  setup() {
    const store = useStore();
    const state = reactive({
      pageName: computed(() => {
        return store.state.pageName;
      }),
    });
    onMounted(() => {
      initInfo();
    });
    const clearUserData = () => {
      if (store.state.isDebug) {
        store.dispatch('user/clearInfo');
      }
    }
    const initInfo = async () => {
      store.dispatch("resetSource");
      store.dispatch("getEnv");
      await store.dispatch("setConfig");
      await store.dispatch("api/initAPI");
      await store.dispatch("resetPageName", "loading");
    }
    const showDebug = () => {
      if (store.state.isDebug) {
         new vconsole();
      }
    }
    return {
      ...toRefs(state),
      clearUserData,
      showDebug
    };
  },
};
</script>

在主入口，使用setup的函数。有需要暴露给到dom标签使用的，或者是给到其他其他组件使用的。需要把方法return出去。