小米 二面 面试记录和总结

1. watch computed区别使用场景 computed源码怎么实现

watch

  • 观察作用
  • 没有缓存性
  • 当需要在数据变化时执行异步或开销较大的操作时,这个方式是最有用的
  • 深度监听 deep:true
  • watch 适合一个值影响多个值的情形。
watch: {
    // 如果 `question` 发生改变,这个函数就会运行
    question: function (newQuestion, oldQuestion) {
      this.answer = 'Waiting for you to stop typing...'
      this.debouncedGetAnswer() // 这个是个异步的函数
    }
  },

computed

  • 计算场景
  • 具有缓存性
  • computed 适合多个值影响一个值
  • computed 适用于计算比较消耗性能的计算场景
  • computed中的函数必须用return返回。
<div id="example">
  <p>Original message: "{{ message }}"</p>
  <p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>

var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello'
  },
  computed: {
    // 计算属性的 getter
    reversedMessage: function () {
      // `this` 指向 vm 实例
      return this.message.split('').reverse().join('')
    }
  }
})

2. webpack脚手架

3. 一些loader 应用

使用样式loader

  • css-loader 处理css文件的依赖关系
  • style-loader 将央视挂载到head里面
  • postcss-loader 浏览器兼容样式
  • babel-loader es6 js
 module: {
        rules: [{
            test: /\.(jpg|png|gif)$/,
            use: {
                loader: 'url-loader',
                options: {
                    // placeholder 占位符
                    name: '[name]_[hash].[ext]',
                    outputPath: 'image/',
                    limit: 2048
                }
            },
        },{
            test: /\.vue$/,
            use: {
                loader: 'vue-loader'
            }
        },{
            test: /\.scss$/,
            use: [
                'style-loader',
                {
                    loader: 'css-loader',
                    options: {
                        importLoaders: 2
                    }
               },
                'sass-loader',
                'postcss-loader'
            ]
        },{
            test: /\.css$/,
            use: [
                'style-loader',
                'css-loader',
            ]
        }, {
            test: /\.m?js$/,
            exclude: /node_modules/,
            use: {
              loader: "babel-loader",
                options: {
                    presets: [['@babel/preset-env', {
                        useBuiltIns: 'usage'
                    }]]
              }
            }
          }]
    },

4. react和vue最大的区别

  • 语法的区别 模板和jsx
    呃,这个问题,还得看看,两者都是组件化思想。应该是在设计思想上有些不同。

5. prop 传递引用类型 如果需要改变引用类型 vue内部怎么防止之前的值更改

直接拷贝一份

A = JSON.parse(JSON.stringfy(this.B));

6. vue3 和react 18 的新特性

vue3:

  • Composition API
  • TS
  • 数据驱动能力更强,基于 proxy 的数据驱动能够弥补原来 definePorperty 的不足
  • 可以把相关的data和函数写成一个单独的“类”,然后在setup里面引用这个“类”就可以
    react18:

7. 数组里面出现次数最多的那个元素

function maxNum(arr) {
    let map = new Map();
    let res,num;
    for (let i = 0; i < arr.length - 1; i++) {
        if (!map.has(arr[i])) {
            map.set(arr[i], 1)
        } else {
            map.set(arr[i], map.get(arr[i]) + 1);
        }
    }
    // console.log(map)
    let max = Math.max(...[...map.values()]);
    console.log([...map.values()])
    console.log(max)
    map.forEach((value,index) => {
        console.log(value,index)
        if (value == max) {
            res = index
            num = value
        }
    })
    return [res,num]
}

let arr = [1, 2,3,3,3,2,2,3,3,3,2,2, 1, '1', 6];
console.log(maxNum(arr))
// [ 3, 6 ]
  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值