常用面试题（对应的知识点）
一、什么时候适合用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
