2024年最全vue中methods、watch、computed之间的差别对比以及适用场景(1)，2024年最新科学技术协会面试

最后

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

❤️ 谢谢支持，喜欢的话别忘了 关注、点赞哦。

• 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

            },

            lastName: function (val) {

                this.fullName = this.firstName + ' ' + val

            }

        }

    })


**ES6**

*   列举常用的ES6特性：

*   箭头函数需要注意哪些地方？

*   let、const、var

*   拓展：var方式定义的变量有什么样的bug？

*   Set数据结构

*   拓展：数组去重的方法

*   箭头函数this的指向。

*   手写ES6 class继承。

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

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

**微信小程序**

*   简单描述一下微信小程序的相关文件类型?

*   你是怎么封装微信小程序的数据请求？

*   有哪些参数传值的方法？

*   你使用过哪些方法，来提高微信小程序的应用速度？

*   小程序和原生App哪个好？

*   简述微信小程序原理？

*   分析微信小程序的优劣势

*   怎么解决小程序的异步请求问题？

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

  简单描述一下微信小程序的相关文件类型?

*   你是怎么封装微信小程序的数据请求？

*   有哪些参数传值的方法？

*   你使用过哪些方法，来提高微信小程序的应用速度？

*   小程序和原生App哪个好？

*   简述微信小程序原理？

*   分析微信小程序的优劣势

*   怎么解决小程序的异步请求问题？

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