相信看了本文后，对你的面试是有一定帮助的！关注专栏后就能收到持续更新！
?点赞?收藏?不迷路！?
Vue提供了$watch方法，可以用来监听对象或数组中特定属性的变化。对于对象，可以使用vm.$watch('obj.property', callback)，对于数组，可以使用vm.$watch('array', callback, { deep: true })。此外，Vue 2.6.0+版本还引入了$watchEffect函数，可以直接监听一个响应式对象，并在其依赖发生变化时执行回调。
// 示例：监听对象属性变化
vm.$watch('obj.property', (newValue, oldValue) => {
// 处理变化
});
// 示例：监听数组变化
vm.$watch('array', (newValue, oldValue) => {
// 处理变化
}, { deep: true });
// 示例：定义一个Mixin
const myMixin = {
data() {
return {
mixinData: 'Hello from Mixin!'
};
},
methods: {
greet() {
console.log(this.mixinData);
}
}
};
// 在组件中使用Mixin
export default {
mixins: [myMixin],
created() {
this.greet(); // 调用Mixin中的方法
}
};
Vue模版编译的主要步骤包括：
服务器端渲染（SSR）是一种在服务器端将Vue组件渲染成HTML字符串，然后将其发送到客户端的技术。与传统的客户端渲染（CSR）相比，SSR具有以下优势：
v-for时，为每项元素添加唯一的key，避免不必要的DOM更新。v-if和v-show： v-if适用于频繁切换条件的场景，而v-show适用于条件不经常改变的场景。Template：
语法： 使用HTML-like的模版语法。
优势： 相对于JSX更容易理解，更接近HTML。
示例：
<template>
<div>{{ message }}</div>
</template>
render() {
return <div>{this.state.message}</div>;
}
问题描述： 当Vue应用初始化时，有时会出现页面闪动的情况，即在页面加载完成之前，用户可能会看到未经Vue处理的模版内容。
解决方案： 使用v-cloak指令可以解决这个问题。在样式中定义[v-cloak]属性，然后在包含Vue模版的元素上使用v-cloak指令，确保Vue初始化完成后再显示该元素。
<style>
[v-cloak] {
display: none;
}
</style>
<div v-cloak>
<!-- Vue 模版内容 -->
</div>
- 在Vue中，`extend`是用来创建一个派生的Vue构造器的方法。通过`Vue.extend(options)`，可以基于现有的Vue构造器创建一个新的子类。
- **作用：**
- 用于创建可复用的组件构造器。
- 可以扩展已有的组件，添加新的功能或修改现有功能。
- **示例：**
// 创建一个新的Vue构造器
const MyComponent = Vue.extend({
template: '<div>{{ message }}</div>',
data() {
return {
message: 'Hello from extended component!'
};
}
});
// 创建MyComponent的实例
new MyComponent().$mount('#app');
在Vue中，路由导航钩子是一组函数，用于在导航过程中对路由进行控制或处理。以下是Vue中常用的路由导航钩子及其调用时机：
全局前置守卫 (beforeEach)：
调用时机： 在路由切换开始时触发，可以用于进行全局的前置处理。
使用示例：
router.beforeEach((to, from, next) => {
// 在路由切换前执行的逻辑
next(); // 执行下一步
});
2. **全局解析守卫 (`beforeResolve`)：**
- **调用时机：** 在全局前置守卫执行完毕后，被激活的组件内的守卫和异步路由组件被解析之后触发。
- **使用示例：**
router.beforeResolve((to, from, next) => {
// 在全局解析守卫中执行的逻辑
next(); // 执行下一步
});
全局后置钩子 (afterEach)：
调用时机： 在路由切换完成后（即导航成功或失败）触发。
使用示例：
router.afterEach((to, from) => {
// 在路由切换完成后执行的逻辑
});
4. **路由独享守卫 (`beforeEnter`)：**
- **调用时机：** 在单个路由配置中定义，在路由进入前触发。
- **使用示例：**
const route = {
path: '/example',
component: Example,
beforeEnter: (to, from, next) => {
// 在路由进入前执行的逻辑
next(); // 执行下一步
}
};
组件内的守卫：
包括 beforeRouteEnter、beforeRouteUpdate 和 beforeRouteLeave。
调用时机：
beforeRouteEnter：在路由进入前，组件还未创建，因此无法访问组件实例。beforeRouteUpdate：在当前路由被复用时调用，可以访问组件实例。beforeRouteLeave：在路由离开前触发，可以访问组件实例。使用示例：
const component = {
beforeRouteEnter(to, from, next) {
// 在路由进入前执行的逻辑，无法访问组件实例
next(); // 执行下一步
},
beforeRouteUpdate(to, from, next) {
// 在路由更新时执行的逻辑，可以访问组件实例
next(); // 执行下一步
},
beforeRouteLeave(to, from, next) {
// 在路由离开前执行的逻辑，可以访问组件实例
next(); // 执行下一步
}
};
这些路由导航钩子允许开发者在不同的阶段对路由进行控制和处理，使得在路由切换过程中能够执行特定的逻辑。
开源项目地址：https://gitee.com/falle22222n-leaves/vue_-book-manage-system
已 300 + Star！
?点赞?收藏?不迷路！?