Vue常用知识点汇总

1.  Vue-cli构建项目常用知识点

watch 监听

watch: {
    isScroll(newVal, oldVal) {
        console.log(newVal, oldVal)
    }
}

created 监听

created() {
    console.log('create')
}

beforeUnmount 销毁前

beforeUnmount() {
    console.log('beforeUnmount')
}

 

2. Vite构建项目常用知识点

import { ref, reactive, getCurrentInstance, computed, watch, onMounted, onBeforeUnmount, nextTick } from 'vue';
import { useStore } from 'vuex';
import { useRouter } from 'vue-router';

const store = useStore();
const router = useRouter();
const { proxy } = getCurrentInstance();
const { $http, $dayjs, $t } = proxy;

const mescroll = ref(null);
const state = reactive({
    dataList: [],
    refreshTimer: null
})

router.beforeEach((to, from) => {
    // 登陆后重新存储数据
    if (from.path == '/login') {
        setStore();
    }
});

onMounted(() => {
    initMescroll();
});

onBeforeUnmount(() => {
    window.clearInterval(state.refreshTimer);
});

// 监听语言变化
const langType = computed(() => {
    return store.state.user.lang;
});
watch(
    langType,
    (newVal, oldVal) => {
        setLanguage(newVal);
    },
    { immediate: true, deep: true }
);

function setLanguage() {

}

async function initMescroll() {
    await nextTick();
}

function setStore() {

}

 3. vue3.0使用VUEX的方法

state

import { useStore } from "vuex";
export default {
  setup() {
    const store = useStore();
    console.log(store.state.goods);
  },
};

getters

import { useStore } from "vuex";
export default {
  setup() {
    const store = useStore();
    console.log(store.getters['goodsData']);
  },
};

mutations

import { useStore } from "vuex";
export default {
  setup() {
    const store = useStore();
    store.commit('changeGoods',123)
  },
};

 actions

import { useStore } from "vuex";
export default {
  setup() {
    const store = useStore();
    async function abc() {
      await store.dispatch("setGoods", {
        id: 123,
      });
    }
    return {abc}
  },
};