Vue面试 - 知蛛网

Vue面试 - 知蛛网

<div id="app">
  <a v-bind:href="url">Link</a>
  <!-- 简写 -->
  <a :href="url">Link</a>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    url: 'https://vuejs.org'
  }
});
</script>

<div id="app">
  <button v-on:click="sayHello">Say Hello</button>
  <!-- 简写 -->
  <button @click="sayHello">Say Hello</button>
</div>

<script>
new Vue({
  el: '#app',
  methods: {
    sayHello: function () {
      alert('Hello Vue!');
    }
  }
});
</script>

<div id="app">
  <p v-pre>{{ this will not be compiled }}</p>
</div>

<script>
new Vue({
  el: '#app'
});
</script>

<div id="app" v-cloak>
  <p>{{ message }}</p>
</div>

<style>
[v-cloak] {
  display: none;
}
</style>

<script>
new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
});
</script>

<!-- 事件总线 -->
<div id="app">
  <component-a></component-a>
  <component-b></component-b>
</div>

<script>
var eventBus = new Vue();

Vue.component('component-a', {
  template: `
    <div>
      <p>Component A</p>
      <button @click="sendMessage">Send Message</button>
    </div>
  `,
  methods: {
    sendMessage: function () {
      eventBus.$emit('message-from-a', 'Hello from Component A');
    }
  }
});

Vue.component('component-b', {
  template: `
    <div>
      <p>Component B</p>
      <p>{{ message }}</p>
    </div>
  `,
  data: function () {
    return {
      message: ''
    };
  },
  created: function () {
    eventBus.$on('message-from-a', (message) => {
      this.message = message;
    });
  }
});

new Vue({
  el: '#app'
});
</script>

<!-- 跨级组件通信 -->
<div id="app">
  <ancestor-component></ancestor-component>
</div>

<script>
Vue.component('ancestor-component', {
  template: `
    <div>
      <p>Ancestor Component</p>
      <parent-component></parent-component>
    </div>
  `,
  provide: function () {
    return {
      message: 'Hello from Ancestor'
    };
  }
});

Vue.component('parent-component', {
  template: `
    <div>
      <p>Parent Component</p>
      <child-component></child-component>
    </div>
  `
});

Vue.component('child-component', {
  template: `
    <div>
      <p>Child Component</p>
      <p>{{ message }}</p>
    </div>
  `,
  inject: ['message']
});

new Vue({
  el: '#app'
});
</script>

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++;
    }
  },
  actions: {
    incrementAsync({ commit }) {
      setTimeout(() => {
        commit('increment');
      }, 1000);
    }
  },
  getters: {
    doubleCount(state) {
      return state.count * 2;
    }
  }
});

export default store;

import Vue from 'vue';
import store from './store';

new Vue({
  store,
  el: '#app',
  computed: {
    count() {
      return this.$store.state.count;
    },
    doubleCount() {
      return this.$store.getters.doubleCount;
    }
  },
  methods: {
    increment() {
      this.$store.commit('increment');
    },
    incrementAsync() {
      this.$store.dispatch('incrementAsync');
    }
  }
});

<template>
  <div>
    <p>Count: {{ count }}</p>
    <p>Double Count: {{ doubleCount }}</p>
    <button @click="increment">Increment</button>
    <button @click="incrementAsync">Increment Async</button>
  </div>
</template>

<script>
export default {
  computed: {
    count() {
      return this.$store.state.count;
    },
    doubleCount() {
      return this.$store.getters.doubleCount;
    }
  },
  methods: {
    increment() {
      this.$store.commit('increment');
    },
    incrementAsync() {
      this.$store.dispatch('incrementAsync');
    }
  }
};
</script>

import { defineStore } from 'pinia';

export const useCounterStore = defineStore('counter', {
  state: () => ({
    count: 0
  }),
  actions: {
    increment() {
      this.count++;
    },
    incrementAsync() {
      setTimeout(() => {
        this.increment();
      }, 1000);
    }
  },
  getters: {
    doubleCount(state) {
      return state.count * 2;
    }
  }
});

<template>
  <div>
    <p>Count: {{ count }}</p>
    <p>Double Count: {{ doubleCount }}</p>
    <button @click="increment">Increment</button>
    <button @click="incrementAsync">Increment Async</button>
  </div>
</template>

<script>
import { useCounterStore } from './stores/counter';

export default {
  setup() {
    const counterStore = useCounterStore();

    return {
      count: counterStore.count,
      doubleCount: counterStore.doubleCount,
      increment: counterStore.increment,
      incrementAsync: counterStore.incrementAsync
    };
  }
};
</script>

import Vue from 'vue';
import VueRouter from 'vue-router';

Vue.use(VueRouter);

const routes = [
  {
    path: '/',
    component: () => import('@/views/Home.vue') // 首页组件
  },
  {
    path: '/about',
    component: () => import('@/views/About.vue') // 关于页面组件
  }
];

const router = new VueRouter({
  mode: 'history', // 使用 history 模式（去掉 URL 中的 #）
  routes
});

export default router;

<template>
  <div>
    <router-link to="/">Home</router-link>
    <router-link to="/about">About</router-link>
    <router-view></router-view> <!-- 路由匹配的组件会渲染在这里 -->
  </div>
</template>

const routes = [
  {
    path: '/user/:id', // 动态路由参数
    component: () => import('@/views/User.vue')
  }
];

<template>
  <div>
    <p>User ID: {{ userId }}</p>
  </div>
</template>

<script>
export default {
  computed: {
    userId() {
      return this.$route.params.id; // 获取动态路由参数
    }
  }
};
</script>

const routes = [
  {
    path: '/user/:id',
    component: () => import('@/views/User.vue'),
    children: [
      {
        path: 'profile', // 子路由路径
        component: () => import('@/views/UserProfile.vue')
      },
      {
        path: 'posts', // 子路由路径
        component: () => import('@/views/UserPosts.vue')
      }
    ]
  }
];

<template>
  <div>
    <h2>User Page</h2>
    <router-link to="/user/1/profile">Profile</router-link>
    <router-link to="/user/1/posts">Posts</router-link>
    <router-view></router-view> <!-- 子路由组件会渲染在这里 -->
  </div>
</template>

router.beforeEach((to, from, next) => {
  console.log('Navigating from', from.path, 'to', to.path);
  if (to.path === '/restricted') {
    next('/login'); // 重定向到登录页
  } else {
    next(); // 继续导航
  }
});

router.afterEach((to, from) => {
  console.log('Navigation complete:', to.path);
});

const routes = [
  {
    path: '/admin',
    component: () => import('@/views/Admin.vue'),
    beforeEnter: (to, from, next) => {
      if (isAdmin()) {
        next();
      } else {
        next('/login');
      }
    }
  }
];

export default {
  beforeRouteEnter(to, from, next) {
    console.log('Entering route:', to.path);
    next();
  },
  beforeRouteUpdate(to, from, next) {
    console.log('Updating route:', to.path);
    next();
  },
  beforeRouteLeave(to, from, next) {
    console.log('Leaving route:', from.path);
    next();
  }
};

const routes = [
  {
    path: '/dashboard',
    component: () => import('@/views/Dashboard.vue'),
    meta: { requiresAuth: true } // 需要登录
  }
];

router.beforeEach((to, from, next) => {
  if (to.meta.requiresAuth && !isAuthenticated()) {
    next('/login');
  } else {
    next();
  }
});

const routes = [
  {
    path: '/about',
    component: () => import('@/views/About.vue') // 懒加载
  }
];

this.$router.push('/about');
this.$router.replace('/about');
this.$router.go(-1); // 后退一步
this.$router.go(1);  // 前进一步

npm install -g @vue/cli

# 检查 Vue CLI 的版本
vue --version

vue create my-project

cd my-project
npm run serve

my-project/
├── node_modules/      # 依赖模块
├── public/            # 静态资源（不会被 webpack 处理）
│   └── index.html     # 入口 HTML 文件
├── src/               # 项目源代码
│   ├── assets/        # 静态资源（会被 webpack 处理）
│   ├── components/    # 组件
│   ├── views/         # 路由视图组件
│   ├── router/        # 路由配置
│   ├── store/         # Vuex 状态管理
│   ├── App.vue        # 根组件
│   └── main.ts        # 入口文件
├── .eslintrc.js       # ESLint 配置
├── .gitignore         # Git 忽略文件
├── babel.config.js    # Babel 配置
├── package.json       # 项目依赖和脚本
├── tsconfig.json      # TypeScript 配置
└── vue.config.js      # Vue 项目配置

module.exports = {
  publicPath: '/my-app/', // 部署路径
  devServer: {
    port: 8081, // 开发服务器端口
    proxy: 'http://localhost:4000' // 代理 API 请求
  },
  css: {
    loaderOptions: {
      sass: {
        additionalData: `@import "@/styles/variables.scss";` // 全局引入 SCSS 变量
      }
    }
  }
};

vue add plugin-name

npm run build

// 全局自定义指令
import Vue from 'vue';

// 注册一个全局自定义指令 `v-focus`
Vue.directive('focus', {
  // 当绑定元素插入到 DOM 中时调用
  inserted(el) {
    el.focus(); // 聚焦元素
  }
});

// 局部自定义指令
export default {
  directives: {
    focus: {
      inserted(el) {
        el.focus();
      }
    }
  }
};

Vue.directive('demo', {
  bind(el, binding, vnode) {
    console.log('bind');
  },
  inserted(el, binding, vnode) {
    console.log('inserted');
  },
  update(el, binding, vnode, oldVnode) {
    console.log('update');
  },
  componentUpdated(el, binding, vnode, oldVnode) {
    console.log('componentUpdated');
  },
  unbind(el, binding, vnode) {
    console.log('unbind');
  }
});

const MyPlugin = {
  install(Vue, options) {
    // 添加全局方法或属性
    Vue.myGlobalMethod = function () {
      console.log('MyPlugin: Global method called');
    };

    // 添加全局指令
    Vue.directive('my-directive', {
      bind(el, binding, vnode) {
        el.style.color = binding.value;
      }
    });

    // 添加全局混入
    Vue.mixin({
      created() {
        console.log('MyPlugin: Mixin created hook');
      }
    });

    // 添加实例方法
    Vue.prototype.$myMethod = function (methodOptions) {
      console.log('MyPlugin: Instance method called');
    };
  }
};

import Vue from 'vue';
import MyPlugin from './MyPlugin';

Vue.use(MyPlugin, { someOption: true });

const ToastPlugin = {
  install(Vue, options) {
    Vue.prototype.$toast = function (message) {
      const toast = document.createElement('div');
      toast.className = 'toast';
      toast.textContent = message;
      document.body.appendChild(toast);

      setTimeout(() => {
        document.body.removeChild(toast);
      }, 3000);
    };
  }
};

export default ToastPlugin;

import Vue from 'vue';
import ToastPlugin from './ToastPlugin';

Vue.use(ToastPlugin);

new Vue({
  el: '#app',
  mounted() {
    this.$toast('Hello, this is a toast message!');
  }
});

import { defineAsyncComponent } from 'vue';

const AsyncComponent = defineAsyncComponent(() =>
  import('./components/MyComponent.vue')
);

export default {
  components: {
    AsyncComponent
  }
};

import { defineAsyncComponent } from 'vue';

const AsyncComponent = defineAsyncComponent({
  loader: () => import('./components/MyComponent.vue'),
  loadingComponent: LoadingComponent, // 加载时显示的组件
  errorComponent: ErrorComponent, // 加载失败时显示的组件
  delay: 200, // 延迟显示加载组件的时间（毫秒）
  timeout: 3000 // 加载超时时间（毫秒）
});

export default {
  components: {
    AsyncComponent
  }
};

import { createRouter, createWebHistory } from 'vue-router';

const router = createRouter({
  history: createWebHistory(),
  routes: [
    {
      path: '/',
      component: () => import('@/views/Home.vue') // 懒加载
    },
    {
      path: '/about',
      component: () => import('@/views/About.vue') // 懒加载
    }
  ]
});

export default router;

import { createRouter, createWebHistory } from 'vue-router';

const router = createRouter({
  history: createWebHistory(),
  routes: [
    {
      path: '/',
      component: () => ({
        component: import('@/views/Home.vue'),
        loading: LoadingComponent, // 加载时显示的组件
        error: ErrorComponent, // 加载失败时显示的组件
        delay: 200, // 延迟显示加载组件的时间（毫秒）
        timeout: 3000 // 加载超时时间（毫秒）
      })
    }
  ]
});

export default router;

const router = createRouter({
  history: createWebHistory(),
  routes: [
    {
      path: '/',
      component: () => import(/* webpackChunkName: "home" */ '@/views/Home.vue')
    },
    {
      path: '/about',
      component: () => import(/* webpackChunkName: "about" */ '@/views/About.vue')
    }
  ]
});

const router = createRouter({
  history: createWebHistory(),
  routes: [
    {
      path: '/',
      component: () => import(/* webpackPrefetch: true */ '@/views/Home.vue')
    },
    {
      path: '/about',
      component: () => import(/* webpackPreload: true */ '@/views/About.vue')
    }
  ]
});

function defineReactive(obj, key, val) {
  Object.defineProperty(obj, key, {
    get() {
      console.log(`get ${key}: ${val}`);
      return val;
    },
    set(newVal) {
      if (newVal !== val) {
        console.log(`set ${key}: ${newVal}`);
        val = newVal;
        // 触发更新
      }
    }
  });
}

const data = {};
defineReactive(data, 'message', 'Hello Vue');
console.log(data.message); // get message: Hello Vue
data.message = 'Hi Vue';   // set message: Hi Vue

function reactive(obj) {
  return new Proxy(obj, {
    get(target, key, receiver) {
      console.log(`get ${key}: ${target[key]}`);
      return Reflect.get(target, key, receiver);
    },
    set(target, key, value, receiver) {
      if (target[key] !== value) {
        console.log(`set ${key}: ${value}`);
        Reflect.set(target, key, value, receiver);
        // 触发更新
      }
      return true;
    }
  });
}

const data = reactive({ message: 'Hello Vue' });
console.log(data.message); // get message: Hello Vue
data.message = 'Hi Vue';   // set message: Hi Vue

const Vue = require('vue');
const renderer = require('vue-server-renderer').createRenderer();

const app = new Vue({
  template: '<div>Hello, SSR!</div>'
});

renderer.renderToString(app, (err, html) => {
  if (err) throw err;
  console.log(html); // 输出渲染好的 HTML 字符串
});

<keep-alive>
  <component :is="currentComponent"></component>
</keep-alive>

<keep-alive>
  <router-view></router-view>
</keep-alive>

Vue.set(a, 'b', newValue);

// Vue3
import { set } from 'vue';
set(a, 'b', newValue);

a = { ...a, b: newValue };

Vue.set(this, 'a', { b: newValue });