总结
技术学到手后,就要开始准备面试了,找工作的时候一定要好好准备简历,毕竟简历是找工作的敲门砖,还有就是要多做面试题,复习巩固。
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
},
lastName(val) {
console.log('调用watchFullName,使用了一次监听');
this.watchFullName = this.firstName + this.lastName + "," + other
}
}
})
</script>
```
1,1控制台看效果:第一次,无任何修改
1.2 控制台看效果:第二次,修改firstName
1.3 控制台看效果:第三次,修改age
1.4 控制台看效果:第四次,修改other
1.5 控制台看效果:第五次,修改firstName
1.6测试结论:
- 使用computed计算了fullName属性,值为firstName+lastName。计算属性具有,当firstName和lastName都不改变的时候,fullName不会重新计算,比如我们改变age的值,fullName的值是不需要重新计算的。
缓存功能
- methods并没有缓存特性,比如我们改变age的值,fullName2()方法会被执行一遍。
- 当一个功能可以用上面三个方法来实现的时候,明显使用computed更合适,代码简单也有缓存特性。
- 计算属性范围在vue实例内,修改vue实例外部对象,不会重新计算渲染,但是如果先修改了vue实例外对象,在修改vue计算属性的对象,那么外部对象的值也会重新渲染。
1.7 总结:
1,计算属性computed是基于它们的依赖进行缓存的,只有相关依赖会发生改变时才会重新求值。只要相关依赖未改变,只会返回缓存中的结果,不会执行函数。
而methods,只要调用它,函数就会执行
2, computed和watch的区别
computed可以观察多个数据,watch只能是一个数据
computed生成一个新的数据,直接渲染至视图中,watch是修改本身已经存在的数据
computed不可以执行异步的,因为需要返回值,返回值是由js主线程控制,watch可以执行异步的,因为不需要返回数据,定时器是属于异步的线程
<script>
const vm = new Vue({
el: '.app',
data() {
return {
fristName: '张',
lastName: '三',
fullName:'张三'
}
// return {
// isHot: true,
// }
},
// 总结:计算属性里不能完成异步任务
// computed: {
// fullName(){
// setTimeout (()=>{//定时器,等一些不被vue管理的回调函数为普通函数时,在vue里this指向window
// // 为箭头函数,this指向vm
// console.log(this);
// return this.fristName+'-'+this.lastName
// }, 2000);
// }
// },
watch: {//命令式监测,重复
fristName(val) {
setTimeout(() => {
console.log('2秒后我执行了');
this.fullName = val + '-' + this.lastName
}, 2000);
},
lastName(val){
setTimeout(() => {
console.log('两秒后我执行了');
this.fullName=this.fristName+'-'+val
### 最后
为了帮助大家更好的了解前端,特别整理了《前端工程师面试手册》电子稿文件。
**[开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**
![](https://img-blog.csdnimg.cn/img_convert/ebac2ab824bae173dc22054a17212598.png)
![](https://img-blog.csdnimg.cn/img_convert/5230c48fd0fcb265f3401a21603bda2b.png)
c2ab824bae173dc22054a17212598.png)
![](https://img-blog.csdnimg.cn/img_convert/5230c48fd0fcb265f3401a21603bda2b.png)