前端 vue 面试题(二)_代码007(未授权)

本文介绍: 各个组件的实例一旦被注入mixin之后，这些mixin就实例化一个个对象，这些对象之间的数据都是独立的，不像vuex那样，共享数据，一个组件改变状态，另外的组件也会自动更新。按照js 事件循环，nextTic k属于微任务，但微任务却是在更新 dom这个宏任务执行后的回调去触发nextTic k的执行，每一次一个宏任务执行完，都会立即清空微任务队列。tree s h a k in g的本质是找到代码之间的依赖关系，这样才能判断哪些代码虽然被创建，却没有使用，哪些代码虽然被引入，也未被使用。在Vue中，可以通过调用组件实例的。

在这里插入图片描述

在Vue中，可以使用以下几种方式让页面重新渲染：

改变数据状态：Vue中的响应式系统会自动监听数据的变化，并更新相应的视图。因此，可以通过修改数据状态来触发页面重新渲染。

强制重新渲染：可以通过调用组件实例的 $forceUpdate() 方法来强制重新渲染组件。这个方法会跳过依赖跟踪，直接重新渲染组件。但是，这种方法并不推荐使用，因为它会影响性能。

通过重新挂载组件实现：可以通过销毁组件实例，然后再创建一个新的组件实例来实现页面的重新渲染。在Vue中，可以通过调用组件实例的 $destroy() 方法来销毁组件实例。然后再通过调用$mount()方法来创建一个新的组件实例。这种方法可以完全重新渲染组件，但是也会带来一些性能开销。

3、$refs获取子组件实例
4、vuex存放公共数据
5、$parent 和 $children

默认插槽：父组件向子组件传递内容模板的机制，作为占位符，用于标识父组件提供的内容应该在哪里被渲染
具名插槽：子组件需要在不同的位置接收不同的内容，使用具名插槽以便在子组件中将内容分法到正确的位置，父组件 <template v-slot:name>，子组件<slot name="name">
作用域插槽：将子组件数据传递给父组件，<slot :data="data">
父组件
<child-component v-slot:default="slotProps">{{ slotProps.data }} </child-component>
更多类容请查看 https://blog.csdn.net/glorydx/article/details/102918914

vue2的脚手架vue-cli使用的是webpack作为打包工具，webpack在2.0版本以后就已经支持treeshak ing。
treeshaking只支持es module 规范的代码

// Bad: CommonJS
const myModule = require('./myModule');

// Good: ES2015 Modules
import myModule from './myModule';

{
  "presets": [
    ["@babel/preset-env", { "modules": false }]
  ]
}

// webpack.config.js
module.exports = {
  mode: 'production',
  // other configurations...
};

// webpack.config.js
module.exports = {
  // other configurations...
  optimization: {
    minimizer: [
      new TerserPlugin({
        terserOptions: {
          compress: { pure_getters: true }
        }
      })
    ]
  }
};

编译时静态分析： ESM 是在编译时进行静态分析的，这意味着模块的依赖关系在代码执行之前就已经确定。

运行时动态加载： CommonJS 是在运行时动态加载的，模块的依赖关系在代码执行时才解析(打包完成后才执行代码，treeshaking还在打包之前)。

const LoggerMixin = (target) => ({
  ...target,
  log(message) {
    console.log(message);
  }
});

class Dog {
  bark() {
    console.log('Woof!');
  }
}

const myDog = LoggerMixin(new Dog());

myDog.bark(); // 输出: Woof!
myDog.log('Hello'); // 输出: Hello