常用面试题（对应的知识点）一、什么时候适合用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 来源：https://www./content-4-560751.html |
|
|
