常用面试题（对应的知识点）

Posted 2022-07-05 adbg

一、什么时候适合用computed，什么时候适合用watch

1、computed

属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算。不可以在data中定义和赋值

2、watch

⑴监听data属性中数据的变化

⑵监听路由router的变化

⑶进行深度监听，监听对象的变化

<script>
  export default 
    data () 
      return 
        group: 
          data1: ‘1‘,
          data2: ‘2‘,
          data3: ‘3‘
        
      
    ,
    watch: 
      group: 
        data1: function () 
          // do something
        ,
        // deep设为了true 如果修改了这个group中的任何一个属性，都会执行handler这个方法
        deep: true
      ,
      // 有时候我们就想关心这个对象中的某个属性
      ‘group.data3‘ (newVal) 
        console.log(newVal)
      
    
  
</script>

共同例子：

<template>
  <div class="home">
    <input type="text" v-model="name" />
    <button type="button" @click="set">set</button>
    <p>Full name: fullName </p>
    <p>first name: firstName </p>
    <p>Last Name： lastName </p>
  </div>
</template>
<script>
  export default 
    data () 
      return 
        name: ‘‘,
        firstName: ‘‘,
        lastName: ‘‘
      
    ,
    watch: 
      firstName (newValue, OldValue) 
        console.log(newValue)
        console.log(OldValue)
      
    ,
    computed: 
      // 计算属性相当于data里的属性
      // 什么时候执行：初始化显示/ 相关的data属性发生变化
      fullName: 
        get () 
          // 回调函数 当需要读取当前属性值是执行，根据相关数据计算并返回当前属性的值
          return this.firstName + ‘ ‘ + this.lastName
        ,
        set (val) 
          // 监视当前属性值的变化，当属性值发生变化时执行，更新相关的属性数据
          // val就是fullName3的最新属性值
          console.log(val)
          const names = val.split(‘ ‘)
          this.firstName = names[0]
          this.lastName = names[names.length - 1]
        
      
    ,
    methods: 
      set () 
        this.fullName = this.name
      
    
  
</script>

 二、钩子函数你怎么理解

参考链接：https://segmentfault.com/a/1190000013956945?utm_source=channel-newest

三、事件修饰符

参考链接：https://www.cnblogs.com/xuqp/p/9406971.html

四、函数防抖和节流

新建utils.js

/**
 * 函数防抖 (只执行最后一次点击)
 * 其原理就第一次调用函数，创建一个定时器，在指定的时间间隔之后运行代码。当第二次调用该函数时，
 * 它会清除前一次的定时器并设置另一个。如果前一个定时器已经执行过了，这个操作就没有任何意义。
 * 然而，如果前一个定时器尚未执行，其实就是将其替换为一个新的定时器，然后延迟一定时间再执行。
 * @param fn
 * @param delay
 * @returns Function
 * @constructor
 */
export const Debounce = (fn, t) => 
  let delay = t || 500
  let timer
  return function ()  // 返回一个闭包
    let args = arguments
    if (timer) 
      clearTimeout(timer)
    
    timer = setTimeout(() => 
      timer = null
      fn.apply(this, args)
    , delay)
  

/**
 * 函数节流
 * 规定在一个单位时间内，只能触发一次函数，如果这个单位时间内触发多次函数，只有一次生效
 * 其原理是用时间戳来判断是否已到回调该执行时间，记录上次执行的时间戳，然后每次触发事件执行回调，
 * 回调中判断当前时间戳距离上次执行时间戳的间隔是否已经到达 规定时间段，如果是，则执行，并更新上次执行的时间戳，如此循环
 * @param fn
 * @param interval
 * @returns Function
 * @constructor
 */
export const Throttle = (fn, t) => 
  let last
  let timer
  let interval = t || 500
  return function ()  // 返回一个函数，形成闭包，持久化变量
    let args = arguments
    /**
     * 记录当前函数触发的时间
     * +new Date()这个操作是将该元素转换成Number类型
     * 等同于Date.prototype.getTime()
     */
    let now = +new Date()
    if (last && now - last < interval) 
      clearTimeout(timer)
      timer = setTimeout(() => 
        // 记录上一次函数触发的时间
        last = now
        // 修正this指向问题
        fn.apply(this, args)
      , interval)
     else 
      last = now
      fn.apply(this, args)
    
    console.log(now)
  

调用

<template>
  <div class="home">
      <input
      class="search-bar-input"
      type="text"
      placeholder="应用搜索"
      @keyup="appSearch"/>
    </div>
  </div>
</template>
<script>
  import  Debounce  from ‘../utils/utils.js‘
  export default 
    data () 
      return 
    ,
    methods: 
      appSearch: Debounce(() => 
        console.log(1)
      , 300)
    
  
</script>

 参考链接：https://www.cnblogs.com/fozero/p/11107606.html

五、promise的all方法

参考链接：https://www.cnblogs.com/whybxy/p/7645578.html

六、常用的es6语法，比如let、promise、class等等

参考链接：https://segmentfault.com/a/1190000004365693