Vue中的计算属性、方法和侦听属性的区别入门版

对于刚开始学习Vue的开发者来说，十分容易混淆Vue中计算属性、方法和侦听属性，希望通过本文的介绍，我们可以浅层次了解三者区别。

1，首先上代码展示：


 
<body>
    <div id="app">
        <h1>计算属性：computedh1>
        {{fullName}}
        <h1>方法：methodsh1>
        {{fullName2()}}
        <h1>侦听器：watchh1>
        {{watchFullName}}
        <h1>年龄：ageh1>
        {{age}}
    div>
 
    <script>
        var other = 'This is other';
        const vm = new Vue({
            el: '#app',
            data() {
                return {
                    firstName: "zhang",
                    lastName: "san",
                    watchFullName: "zhangsan",
                    age: 18,
 
                }
            },
            methods: {
                fullName2() {
                    console.log('调用fullName2，使用了一次方法');
                    return this.firstName + this.lastName + ',' + other;
                }
            },
            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>
body>

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   
                }, 2000);
 
            }
 
         }

1.8 拓展：

所有被Vue管理的函数，要写成普通函数，this指向vm，不被vue管理的函数比如（定时器，ajax，promise等回调函数）写成箭头函数，目的是让this指向vm。

相关阅读:
【保姆级爬虫】微博关键词搜索并获取博文和评论内容（python+selenium+chorme）
简记：使用 Django Shell 清空数据库表
 Vue2 Element表格将单列数据渲染为千分制
 【MySQL】如何配置复制拓扑？
Vue+ElementUi实现菜单循环
 kafka+ubuntu20.04+docker配置
 集合深度学习07—Set、HashSet、LinkedHashSet、TreeSet、底层原理 & 源码解析
 GitHub-使用 Git工具创建密钥id_rsa.pub
项目流程管理效率提升的3个核心点
 AOP实现方式-P20，21，22
原文地址：https://blog.csdn.net/m0_71345904/article/details/126039628