Vue.js 知识总结与面试题

const vm = new Vue({    data() {        return { count: 0 };    },    beforeCreate() {        // 实例创建前，data 和 methods 未初始化    },    created() {        // 实例创建完成，可访问 data 和 methods    },    beforeMount() {        // 挂载前，模板已编译但未挂载到 DOM    },    mounted() {        // 挂载完成，可访问 DOM 元素    },    beforeUpdate() {        // 更新前，数据已更新但视图未更新    },    updated() {        // 更新完成，视图已更新    },    beforeUnmount() {        // 卸载前，清理定时器等    },    unmounted() {        // 卸载完成    }});

<!-- MyComponent.vue --><template>  <div class="my-component">    <h3>{{ title }}</h3>    <p>{{ content }}</p>    <button @click="handleClick">点击</button>  </div></template><script>export default {  name: 'MyComponent',  props: {    title: {      type: String,      required: true    },    content: {      type: String,      default: ''    }  },  methods: {    handleClick() {      this.$emit('click', 'Hello from component');    }  }};</script><style scoped>.my-component {  padding: 20px;  border: 1px solid #ccc;}</style>

<!-- Parent.vue --><template>  <div>    <MyComponent       title="标题"       content="内容"       @click="handleChildClick"     />  </div></template><script>import MyComponent from './MyComponent.vue';export default {  components: {    MyComponent  },  methods: {    handleChildClick(message) {      console.log(message);    }  }};</script>

import Vue from 'vue';import VueRouter from 'vue-router';import Home from './views/Home.vue';import About from './views/About.vue';Vue.use(VueRouter);const routes = [  {    path: '/',    name: 'Home',    component: Home  },  {    path: '/about',    name: 'About',    component: About  },  {    path: '/user/:id',    name: 'User',    component: () => import('./views/User.vue') // 懒加载  }];const router = new VueRouter({  mode: 'history',  routes});export default router;

// 全局守卫router.beforeEach((to, from, next) => {  if (to.meta.requiresAuth && !isLoggedIn) {    next('/login');  } else {    next();  }});// 路由独享守卫const routes = [  {    path: '/admin',    component: Admin,    beforeEnter: (to, from, next) => {      // 检查权限    }  }];// 组件内守卫export default {  beforeRouteEnter(to, from, next) {    // 在渲染组件前调用  },  beforeRouteUpdate(to, from, next) {    // 当前路由改变但组件复用  },  beforeRouteLeave(to, from, next) {    // 离开当前路由  }};

import Vue from 'vue';import Vuex from 'vuex';Vue.use(Vuex);const store = new Vuex.Store({  state: {    count: 0,    user: null  },  mutations: {    increment(state) {      state.count++;    },    setUser(state, user) {      state.user = user;    }  },  actions: {    async fetchUser({ commit }) {      const user = await fetch('/api/user');      commit('setUser', user);    }  },  getters: {    doubleCount(state) {      return state.count * 2;    }  },  modules: {    // 模块化  }});export default store;

import { ref, reactive, computed, watch, onMounted } from 'vue';export default {  setup() {    // 响应式数据    const count = ref(0);    const user = reactive({ name: 'Alice', age: 25 });        // 计算属性    const doubleCount = computed(() => count.value * 2);        // 方法    const increment = () => {      count.value++;    };        // 侦听器    watch(count, (newVal, oldVal) => {      console.log(`count changed from ${oldVal} to ${newVal}`);    });        // 生命周期钩子    onMounted(() => {      console.log('Component mounted');    });        return {      count,      user,      doubleCount,      increment    };  }};