Vue中的计算属性、方法和侦听属性的区别入门版_vue计算属性和方法 watch侦听器三者有什么区别(1)-优快云博客

最后

今天的文章可谓是积蓄了我这几年来的应聘和面试经历总结出来的经验，干货满满呀！如果你能够一直坚持看到这儿，那么首先我还是十分佩服你的毅力的。不过光是看完而不去付出行动，或者直接进入你的收藏夹里吃灰，那么我写这篇文章就没多大意义了。所以看完之后，还是多多行动起来吧！

可以非常负责地说，如果你能够坚持把我上面列举的内容都一个不拉地看完并且全部消化为自己的知识的话，那么你就至少已经达到了中级开发工程师以上的水平，进入大厂技术这块是基本没有什么问题的了。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

        },
        computed: {
            fullName() {
                console.log('调用fullName，计算一次属性');
                return this.firstName + this.lastName + ',' + other
            }
        },
        watch: {
            firstName(val) {
                console.log('调用watchFullName，使用了一次监听');
                this.watchFullName = this.firstName + this.lastName + "," + other
            },
            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: {//命令式监测，重复


### 文末

逆水行舟不进则退，所以大家要有危机意识。

同样是干到35岁，普通人写业务代码划水，榜样们深度学习拓宽视野晋升管理。



这也是为什么大家都说35岁是程序员的门槛，很多人迈不过去，其实各行各业都是这样都会有个坎，公司永远都缺的高级人才，只用这样才能在大风大浪过后，依然闪耀不被公司淘汰不被社会淘汰。

为了帮助大家更好温习重点知识、更高效的准备面试，特别整理了《前端工程师核心知识笔记》电子稿文件。

内容包括html，css，JavaScript，ES6，计算机网络，浏览器，工程化，模块化，Node.js，框架，数据结构，性能优化，项目等等。



**269页《前端大厂面试宝典》**

包含了腾讯、字节跳动、小米、阿里、滴滴、美团、58、拼多多、360、新浪、搜狐等一线互联网公司面试被问到的题目，涵盖了初中级前端技术点。

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.youkuaiyun.com/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**

![](https://img-blog.csdnimg.cn/img_convert/b98713ee557d94286de8afe404cb51d1.png)

**前端面试题汇总**

![](https://img-blog.csdnimg.cn/img_convert/1d691ca297c9016828aff783a701e065.png)