错题本汇总（更新中...）

Vue

Vue2和Vue3之响应式原理区别

Vue2响应式：基于Object.defineProperty()实现的
Vue3响应式：基于Proxy实现的

defineReactive(data,key,val){
    Object.defineProperty(data,key,{
      enumerable:true,
      configurable:true,
      get:function(){
        console.log(`对象属性:${key}访问defineReactive的get！`)
        return val;
      },
      set:function(newVal){
        if(val===newVal){
          return;
        }
        val = newVal;
        console.log(`对象属性:${key}访问defineReactive的set！`)
      }
    })
}

	let obj = {};
	this.defineReactive(obj,'name','sapper');
	// 修改obj的name属性
	obj.name = '工兵';
	console.log('obj',obj.name);
	// 为obj添加age属性
	obj.age = 12;
	console.log('obj',obj);
	console.log('obj.age',obj.age);
	// 为obj添加数组属性
	obj.hobby = ['游戏', '原神'];
	obj.hobby[0] = '王者';
	console.log('obj.hobby',obj.hobby);
	
	// 为obj添加对象属性
	obj.student = {school:'大学'};
	obj.student.school = '学院';
	console.log('obj.student.school',obj.student.school);

从上图可以看出使用defineProperty定义了包含name属性的对象obj，然后添加age属性、添加hobby属性（数组）、添加student属性并分别访问，都没有触发obj对象中的get、set方法。也就是说defineProperty定义对象不能监听添加额外属性或修改额外添加的属性的变化。

	this.defineReactive(obj,'hobby',['游戏', '原神']);
	// 改变数组下标0的值
	obj.hobby[0] = '王者';
	console.log('obj.hobby',obj.hobby);

假如我们一开始就为obj添加hobby属性，我们发现修改数组下标0的值，并没有触发obj里的set方法，也就是说defineProperty定义对象不能监听根据自身数组下标修改数组元素的变化，注意：如果是直接用defineProperty定义数组元素是可以监听的，但是对于数组比较大的时候就很牺牲性能。

// proxy实现
let targetProxy = {name:'sapper'};
let objProxy = new Proxy(targetProxy,{
    get(target,key){
      console.log(`对象属性:${key}访问Proxy的get！`)
      return target[key];
    },
    set(target,key,newVal){
      if(target[key]===newVal){
        return;
      }
      console.log(`对象属性:${key}访问Proxy的set！`)
      target[key]=newVal;
      return target[key];
    }
})
	// 修改objProxy的name属性
	objProxy.name = '工兵';
	console.log('objProxy.name',objProxy.name);
	// 为objProxy添加age属性
	objProxy.age = 12;
	console.log('objProxy.age',objProxy.age);
	// 为objProxy添加hobby属性
	objProxy.hobby = ['游戏', '原神'];
	objProxy.hobby[0] = '王者';
	console.log('objProxy.hobby',objProxy.hobby);
	// 为objProxy添加对象属性
	objProxy.student = {school:'大学'};
	objProxy.student.school = '学院';
	console.log('objProxy.student.school',objProxy.student.school);

从上图是不是发现了Proxy与defineProperty的明显区别之处了，Proxy能支持对象添加或修改触发get、set方法，不管对象内部有什么属性。

defineProperty定义对象不能监听添加额外属性或修改额外添加的属性的变化；defineProperty定义对象不能监听根据自身数组下标修改数组元素的变化
Proxy 可以直接监听对象而非对象属性，可以监听对象添加额外属性的变化;
Proxy 返回的是一个新对象，而 Object.defineProperty 只能遍历对象属性直接修改。
Vue3 响应式使用 Proxy 解决了Vue2的响应式的诟病，从原理上说，它们所做的事情都是一样的，依赖收集和依赖更新。

webpack

Asset Modules

webpack5 新增 Asset Modules 资源模块，资源模块(asset module)是一种模块类型，它允许使用资源文件（字体，图标等）而无需配置额外 loader。
以后不要再使用这三个 loader 了，1、raw-loader 2、url-loader 3、file-loader 。
例：
webpack4

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpg|gif)$/i,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 1024,
            },
          },
        ],
      },
      {
        test: /\.png$/i,
        use: 'file-loader'
      },
      {
        test: /\.ico$/i,
        use: 'url-loader'
      },
      {
        test: /\.text$/i,
        use: 'raw-loader'
      },

    ],
  },
};

webpack5

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpg|gif)$/i,
        type: 'asset',
        parser: {
          dataurlCondition: {
            maxSize: 1024
          }
        }
      },
      {
        test: /\.png$/i,
        use: 'asset/resource'
      },
      {
        test: /\.ico$/i,
        use: 'asset/inline'
      },
      {
        test: /\.text$/i,
        use: 'asset/source'
      },
  ],
  },
};

webpack详细教程：https://juejin.cn/post/7014466035923288072
webpack 初始化项目： https://juejin.cn/post/7212940154381598775?searchId=202408051728579A4ABB2CCFCEF4BAB888#heading-0