【前端开发】】2019年前端面试常用知识点总结

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

一、什么时候适合用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(function(){
        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

七、vue怎么重置data

Object.assign(this.$data, this.$options.data())

八、vue递归组件

参考链接：https://blog.csdn.net/badmoonc/article/details/80380557

九、vue slot插槽

参考链接：https://blog.csdn.net/weixin_41646716/article/details/80450873