记录第一次面试

My first interview

vue2和vue3响应式原理的区别

其本质区别就是Object.defineProperty和Proxy的区别

Object.defineProperty()不仅可以为对象添加属性也可以监听属性

但是监听不到push、shift等数组方法所以,导致通过数组添加元素不能实时响应

vue2解决方法是把数组原型上的方法直接copy了一份，挂载到原型链上，只要遍历到有数组方法就会调用重写的数组方法，简单来说就是劫持对象的属性对每个对象，每个属性进行遍历，如果属性值是对象还需要深度遍历。

而vue3中就使用Proxy去劫持整个对象，并返回一个新对象。它不仅可以代理对象，还可以代理数组和动态增加的属性。

(38条消息) js Proxy 的使用_js proxy用法_飞马攻城师的博客-CSDN博客

ps：使用Reflect.get而不是target[key]我是理解为this的指向问题，receiver指向的是get的调用者

[(38条消息) 在es6 Proxy中，推荐使用Reflect.get而不是targetkey]的原因_baoleilei6的博客-CSDN博客

computed里面可以写异步吗

computed不支持异步，只支持同步，因为本来就是用来返回计算后的值需立马得到，watch支持异步请求，可以写在watch中

顺便提到了watch的深度监听：

• deep 为true开启，默认为false
• 开启深度监听：只要obj中的任何一个属性发生改变，都会触发相应的代码
• 数组也是同样如此

watch的immediate

• 在选项中指定immediate: true,将立即以表达式的当前值触发回调

原型和原型链

原型：每个函数上都有prototype属性，这个属性的值是个对象，也称为原型对象，原型可以用来存放一些属性和方法，共享给实例对象用，也可以实现继承

原型链：对象中都有__proto__属性，这个属性会指向它的原型对象，原型对象也是对象也有proto属性所以就指向原型对象的原型对象，这样一层一层形成的链式结构称为原型链，最顶层找不到则返回null

Set和Map的区别

1.Set 和 Map 主要的应用场景在于 数据重组 和 数据储存。
2.Set 是一种叫做 集合 的数据结构，Map 是一种叫做 字典 的数据结构。Map是键值对，Set是值的集合，当然键和值可以是任何的值；

3.Map可以通过get方法获取值，而set不能因为它只有值；

ps：set可以用来去重，注意引用类型存入的是指针是达不到去重的效果例如 {}

“Set可以去重NaN类型, Set内部认为尽管 NaN === NaN 为 false,但是这两个元素是重复的。

webpack中的plugin和babel

什么是loader？

webpack只能打包js模块，其他模块的打包需要借助loader。loader可以处理各种各样文件类型。

  {
        // 用来匹配 .css 结尾的文件
        test: /\.css$/,
        // use 数组里面 Loader 执行顺序是从右到左
        use: ['style-loader', 'css-loader']
      },

style-loader，css-loader，postcss-loader：打包css文件

• style-loader：将样式挂在在head里
• css-loader：生成css内容
• postcss-loader：css3新特性加厂商前缀

什么是plugins

plugins插件是 webpack 的支柱功能，可以解决 loader 无法实现的其他事。

 // 插件
  plugins: [
    new HtmlWebpackPlugin({
      // 以 public/index.html 为模板创建文件
      // 新的html文件有两个特点：1. 内容和源文件一致 2. 自动引入打包生成的js等资源
      template: path.resolve(__dirname, '../public/index.html')
    })
  ],

babel用来处理es6的语法，处理兼容，语法转换、源代码转换等。

1.安装

npm install --save-dev babel-loader @babel/core

• 在webpack.config.js中使用
  babel-loader是webpack与babel通信的桥梁，并不会翻译es6语法，还需要借助其他模块，@babel/preset-env包含了所有es6转换成es5的翻译规则语法转换

{
    test: /\.js$/,
    exclude: /node_modules/,
    loader: "babel-loader", 
}

2.安装preset-env

npm install @babel/preset-env --save-dev

3.使用

{
    test: /\.js$/,
    exclude: /node_modules/,
    loader: "babel-loader",
    options: {
        presets: [
            ['@babel/preset-env', {
                targets: {
                    chrome: '76'
                },
                useBuiltIns: 'usage' // 当做babel-polyfill填充时，根据业务代码决定加哪些翻译代码
            }]
        ]
    }
}

vite和vue-cli的区别

Vite 与 Vue Cli 对比 - 尤雨溪: Vite 会取代 vue-cli 吗？_vite和vuecli_蒋川_卡拉云的博客-CSDN博客

1.vue-cli

Vue-cli的包名称由 vue-cli（vue-cli2.x版本） 改成了 @vue/cli（@vue/cli3.x及以上版本），vue-cli 是 Vue 早期推出的一款脚手架，使用 webpack 创建 Vue 项目，可以选择安装需要的各种插件，比如 Vuex、VueRouter等。

vue-cli 用于创建 vue2 的项目；
@vue/cli 用于创建 vue3 的项目，当然也支持 vue2。

搭配vue create 项目名 来创建项目

2.create-vue

create-vue 是 Vue3 的专用脚手架，使用 vite 创建 Vue3 的项目，也可以选择安装需要的各种插件，使用更简单。

3.vite

Vite是一种新型前端构建工具，能够显著提升前端开发体验。它主要由两部分组成：

• 一个开发服务器，它基于 原生 ES 模块 提供了 丰富的内建功能，如速度快到惊人的 模块热更新（HMR）。
• 一套构建指令，它使用 Rollup 打包你的代码，并且它是预配置的，可输出用于生产环境的高度优化过的静态资源。

使用 vite 不仅可以创建 vue 的项目，而且可以创建 react 等项目，只是需要手动安装第三方插件，有点麻烦。

Vite 和 Vue Cli 区别

Vite 是基于原生 ES6 Modules，在生产环境下打包使用的是 Rollup。vue-cli 基于 webpack 封装，生产环境和开发环境都是基于 Webpack 打包。所以两者在生产环境下都是基于源代码文件打包。但在开发环境中，两者有所不同。Vite 在开发环境下，基于原生 ES6 ，无需对代码进行打包，浏览器可以直接调用。所以 Vite 因为基于浏览器的原生功能，省掉了打包过程，在开发环境中体验及其愉快。

以上就是我没回答出来的问题，说说我的想法，没想到人生第一次面试会因为小红书的一篇笔记，在简历没写八股文没背项目也没写好的情况下，有人愿意给我这次机会去试试还是挺感谢他的，从数据库方面到框架最后只能问一些简单的问题，我也觉得不好意思哈哈，但是js方面没全部回答出来确实是我的锅，毕竟已经复习过一遍了，可以说理解了但没记住。。。还有数据库方面的不太懂，查找的话我觉得他说的那个答案其实也不太对where后面跟sex=男/sex=女怪怪的，另外我发现他考NaN那部分讲错了，是可以去重的！

最后，欢迎大家的补充，尤其是前两个问题~