面试题

JS篇

CSS篇

Vue篇

1. 谈一谈对MVVM的理解
   MVVM 是一种软件架构模式，它主要用于构建用户界面，它是 Model-View-ViewModel 的缩写。

   1. Model（模型）：
      • Model代表应用程序中的数据和业务逻辑。在Vue中，Model通常是应用的数据状态，可以是一个对象、数组或其他数据结构。这些数据被存储在Vue实例的data属性中。
   2. View（视图）：
      • View是用户界面的表示，即用户所看到和与之交互的部分。在Vue中，视图通常由Vue实例中的模板（template）定义。模板包含HTML和Vue的模板语法，用于描述应用的结构和外观。
   3. ViewModel（视图模型）：
      • ViewModel是连接View和Model的桥梁，负责处理用户输入、更新Model，并且通知View更新。在Vue中，Vue实例就充当了ViewModel的角色。Vue的响应式系统会追踪数据的变化，并自动更新相关的视图，使开发者无需手动操作DOM。

   MVVM的关键概念在于数据绑定和双向绑定：

   • 数据绑定： 将Model和View连接起来，使得当Model中的数据发生变化时，View能够自动更新，反之亦然。
   • 双向绑定： 不仅View中的变化会反映在Model中，Model中的变化也会自动更新到View中。这使得用户输入能够直接影响数据，同时数据的改变也能立即体现在用户界面上。

   在Vue中，通过指令（例如v-bind和v-model）以及Vue实例中的数据绑定，开发者可以轻松地实现MVVM模式，实现数据和视图的高度关联，同时保持代码的可维护性和可读性

React篇

1. 什么是渲染劫持
   什么是渲染劫持，渲染劫持的概念是控制组件从另一个组件输出的能力，当然这个概念一般和react中的高阶组件（HOC）放在一起解释比较有明了。

   高阶组件可以在render函数中做非常多的操作，从而控制原组件的渲染输出，只要改变了原组件的渲染，我们都将它称之为一种渲染劫持。

   实际上，在高阶组件中，组合渲染和条件渲染都是渲染劫持的一种，通过反向继承，不仅可以实现以上两点，还可以增强由原组件 render 函数产生的 React元素。

   实际的操作中通过操作 state、props 都可以实现渲染劫持

   const withCustomLogic = (WrappedComponent) => {
     return class extends React.Component {
       // 在这里可以添加额外的逻辑
       render() {
         return <WrappedComponent {...this.props} customProp="custom value" />;
       }
     };
   };
   
   const EnhancedComponent = withCustomLogic(MyComponent);