2024年前端最全vue中methods、watch、computed之间的差别对比以及适用场景，阿里技术专家

前端面试题汇总

JavaScript

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

性能

linux

前端资料汇总

总结：methods里面定义的函数，需要主动调用的。watch和computed相关的函数，会自动调用,来完成我们希望完成的作用。

4.2、从性质上看

---

• 1、methods里面定义的是函数，你显然需要像"fuc()"这样去调用它（假设函数为fuc）

• 2、computed是计算属性，事实上和和data对象里的数据属性是同一类的（使用上）,

computed:{

  fullName: function () { return this.firstName + lastName }

}

你在取用的时候，用this.fullName去取用，就和取data一样（不要当成函数调用！！）

• 3、watch:类似于监听机制+事件机制：

  例如：

watch: {

  firstName: function (val) { 

  	this.fullName = val + this.lastName 

  }

}

firstName的改变是这个特殊“事件”被触发的条件，而firstName对应的函数就相当于监听到事件发生后执行的方法。

二、应用分析

=========================================================================

2.1、computer

---

当页面中有某一数据依赖其他数据进行变动的时候，可以使用计算属性。依赖的数据可以是单个，也可以是多个。

<p id="app">  {{fullName}}  </p>



<script>

    var vm = new Vue({  

        el: '#app',  

        data: {  

            firstName: 'Foo',  

            lastName: 'Bar',  

        },  

        computed: {  

            fullName: function () {  

                return this.firstName + ' ' + this.lastName  

            }  

        }  

    })

</script>

注意：就算data中没有直接声明要计算的变量，也可以直接在computed中写入。

计算属性默认只有getter，可以在需要的时候自己设定setter：

// ...

    computed: {

        fullName: {

            // getter

            get: function () {

                return this.firstName + ' ' + this.lastName

            },

            // setter

            set: function (newValue) {

                var names = newValue.split(' ')

                this.firstName = names[0]

                this.lastName = names[names.length - 1]

            }

        }

    }

    

这个时候在控制台直接运行【vm.fullName = ‘bibi wang’】，相应的firstName和lastName也会改变。

适用场景：

擅长处理的场景：一个数据受多个数据影响。

2.2、watch

---

watch和computed很相似，watch用于观察和监听页面上的vue实例，当然在大部分情况下我们都会使用computed。但如果要在数据变化的同时进行异步操作或者是比较大的开销，那么watch为最佳选择。watch为一个对象，键是需要观察的表达式，值是对应回调函数（也可以是方法名，或者包含选项的对象）。直接引用文档例子：

var vm = new Vue({

        el: '#app',

        data: {

            firstName: 'Foo',

            lastName: 'Bar',

            fullName: 'Foo Bar'

        },

        watch: {

            firstName: function (val) {

                this.fullName = val + ' ' + this.lastName



### 文末

技术是没有终点的，也是学不完的，最重要的是活着、不秃。

零基础入门的时候看书还是看视频，我觉得成年人，何必做选择题呢，两个都要。喜欢看书就看书，喜欢看视频就看视频。

最重要的是在自学的过程中，一定不要眼高手低，要实战，把学到的技术投入到项目当中，解决问题，之后进一步锤炼自己的技术。

自学最怕的就是缺乏自驱力，一定要自律，杜绝“三天打鱼两天晒网”，到最后白忙活一场。

高度自律的同时，要保持耐心，不抛弃不放弃，切勿自怨自艾，每天给自己一点点鼓励，学习的劲头就会很足，不容易犯困。

技术学到手后，找工作的时候一定要好好准备一份简历，不要无头苍蝇一样去海投简历，容易“竹篮打水一场空”。好好的准备一下简历，毕竟是找工作的敲门砖。

拿到面试邀请后，在面试的过程中一定要大大方方，尽力把自己学到的知识舒适地表达出来，不要因为是自学就不够自信，给面试官一个好的印象，面试成功的几率就会大很多，加油吧，骚年！

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