Vue中computed，watch，Methods的比较

我们都知道在Vue构造函数的参数对象中有一个【data】属性，该属性值是一个对象，该对象是对数据的代理，是一个键值对并且时刻与页面表现是一致的，但是这里面只能是简单的键值对，不能拥有业务逻辑，并且由于【data】中的属性属于同一个生命周期，所以如果我们需要某一个属性是依赖于另外一个属性时，在【data】中是做不到的，于是Vue为我们提供了【计算属性】

一 computed计算属性：

在构造函数的参数对象中有一个【computed】属性，该属性就是用于定义计算属性的，该对象中的【键】也就是我们的计算属性，与【data】不同的是，计算属性的键值是一个【拥有返回值的函数】，该函数中可以访问到【data】中的所有属性。

<div id="app">firstName:<input v-model="firstName"/>lastName:<input v-model="lastName"><br/>fullName:<input :value="fullName"/><br/><br/>{{xxx}}</div>var vm = new Vue({el:"#app",data:{firstName:'Jim',lastName:'Green',xxx:'666'},computed:{fullName(){console.log("------------fullName------------")return this.firstName + " " + this.lastName}}})

【注意！！】计算属性虽然是一个方法，但是在Vue内部会被翻译成一个属性，我们可以使用实例【vm.fullName】访问到数据的。

1.1 计算属性的特点

计算属性也是用来存储数据，但具有以下几个特点：

① 数据可以进行业务逻辑处理操作
② 对计算属性中的数据进行监视
③ 计算属性是基于依赖进行缓存的

上面代码就是对与这两个最好的展现，第一：我们存储的数据是fullname它的值是通过firstName与lastName字符串拼接后得到的（这里就进行了逻辑业务处理），第二：一旦firstName与lastName发生改变，那么fullname也会跟着改变。

1.2 计算属性使用时的注意事项

注意：1、不管是计算属性还是watch都是和data、methods、el同级的2、Vue实例中，处理el之外，基本上都是对象3、计算属性，必须要有返回值4、计算属性中的函数，调用的地方1、初次渲染的时候，会执行2、函数内部依赖的Model值发生变化，就会执行

1.3 计算属性的get与set

计算属性由两部分组成：get和set，分别用来获取计算属性和设置计算属性。默认只有get，如果需要set，要自己添加。

<div id="app">{{num}}----{{addZero}}<br><button type="button" @click="change(5)">点击改变num</button>
</div>new Vue({el: '#app',data: {num: 8},methods: {change(newNumber) {this.addZero = newNumber;}},computed: {addZero: {get() {return this.num > 10 ? this.num : '0' + this.num;},set(newNum) {this.num = newNum}}}})

上面的代码含义是：
1）当我们没有点击按钮的时候，此时num值是8，程序进入get函数里面，那么addzero的值是‘08’
2）当我们点击了按钮，此时 addzero的值变为5，那么程序进入set函数里面，set函数的形参newNum的值就是5，在函数里num的值变为5

二 methods方法

对于上面的代码，其实方法也是可以实现的。

<div id="app">firstName:<input v-model="firstName"/>lastName:<input v-model="lastName"><br/>// 这里将单向绑定一个方法fullName()fullName:<input :value="fullName()"/><br/><br/>{{xxx}}</div>var vm = new Vue({el:"#app",data:{firstName:'Jim',lastName:'Green',xxx:'666'},//在这里声明这个方法methods:{fullName(){console.log("------------fullName------------")return this.firstName + " " + this.lastName}}})

这里将计算属性变成方法也可以实现功能，但是方法与计算属性之间的区别是什么呢？

将计算属性的get函数定义为一个方法也可以实现和计算属性类似的功能。那么二者之间有什么区别？

区别一：计算属性是基于它的依赖进行实时更新的，方法则是调用才更新
区别二：计算属性是有缓存的，只要相关依赖没有改变，多次访问计算属性得到的值是之前缓存的计算结果，不会多次执行。操作一个没有依赖项的值也是如此。

计算属性computed	方法methods
有缓存，被迫执行	没有缓存，主动触发

总结：从区别里面我们发现，计算属性是基于它的依赖进行实时更新的，那么性能开销小。而方法只要其他数据发生变化，触发重新渲染时，调用方法将总会再次执行函数，性能开销比较大。

三 watch 侦听属性

为什么要用侦听属性呢，官方的原文是：

“虽然计算属性在大多数情况下更合适，但有时也需要一个自定义的侦听器。这就是为什么 Vue 通过 watch 选项提供了一个更通用的方法，来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。”

<div id="app">firstName:<input v-model="firstName"/>lastName:<input v-model="lastName"><br/>fullName:<input :value="fullName"/></div>//js
var vm = new Vue({el:"#app",data:{firstName:'Jim',lastName:'Green',fullName:'Jim Green'},watch:{//newValue 新值 oldValue 老值firstName:function(newValue,oldValue){ // console.log(newValue,oldValue)this.fullName = newValue + " " + this.lastName},lastName(newValue,oldValue){this.fullName = this.firstName + " " + newValue}}})

这里应该注意的是，由于监听属性是不能储存数据的而是监听，所以数据必须在Vue实例对象的【data】属性中声明，不声明会报错；而计算属性是不用声明的，因为计算属性就是用来存储数据的，如果在【data】中声明会报错的。

3.1 侦听属性与计算属性的区别

相同点：都可以它的依赖进行实时更新的

不同点：
1. 当一个属性需要依赖多个【data】中的属性时，建议使用计算属性
2. 执行异步操作或开销较大的操作用Watch

computed(计算属性)	watch(侦听属性)
计算属性可以同时监控多个data	watch只能一个一个监控data

如果我们不是对属性进行操作，只是单纯的依据【data】中的某个值变化后做一些【非属性操作】时或者是在数据变化响应时，【执行异步操作或开销较大的操作】（比如：将变化后的值存入数据库，而不是改变其他属性）就使用Watch。

3.2 watch的实用

一个vue组件在监听到路由变化的时候,需要隐藏掉这个vue组件,这种应用场景是很普遍的

<template><div id="app" v-show="display">firstName:<input v-model="firstName"/>lastName:<input v-model="lastName"><br/>fullName:<input :value="fullName"/></div></template>//js
<script>export default {data(){return {display: true}},watch: {//一旦监听到路由的变化就关闭这个组件'$route': function(newVal,oldVal){this.display = false}}}
</script>>

参考文献：
【1】简阳幕宾《vue学习笔记2》
https://segmentfault.com/a/1190000011632375#articleHeader2

Vue中computed，watch，Methods的比较相关推荐

vue方法调用失败后多次调用_浅析Vue中 computed / watch / methods的区别
思考:请说下Vue中computed 和 watch 的区别( 面试题 ) 构造选项 computed / watch / methods computed ● computed 起初构想在Vue的 ...
Vue 中computed 与 methods 区别
1.示例 <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF- ...
Vue 中 computed vs methods的区别
computed:计算属性 methods:方法 watch:侦听器 computed与methodes区别 1.computed是响应式的,methods并非响应式. 2.调用方式不一样,compu ...
vue中Computed、Methods、Watch区别
一.methods.watch.computed的区别 computed 属性的结果会被缓存,除非依赖的响应式属性变化才会重新计算,主要当作属性来使用: methods 方法表示一个具体的操作,主要书 ...
vue中computed和methods区别
1.computed是响应式的,methods并非响应式. 2.调用方式不一样,computed定义的成员像属性一样访问,methods定义的成员必须以函数形式调用. 3.computed是带缓存的, ...
vue中computed、methods、watched比较
一.computed和methods对比 computed是状态(data)改变时,重新进行计算:methods是计算函数,每次重新渲染都会重新计算.比如return Date.now(),compu ...
Vue 中 computed ,watch,methods 的异同
methods,watch和computed都是以函数为基础的. computed 和 watch 都可以观察页面的相应式数据的变化.当处理页面的数据变化时,我们有时候很容易滥用watch, 而通常更 ...
Vue中computed、methods和watch之间的区别
对于那些开始学习Vue的人来说,对于方法.计算属性和观察者之间的区别有点混淆. 尽管通常可以使用它们中的每一个来完成或多或少相同的事情,但了解每个人在哪里胜过其他人还是很重要的. 在这个快速提示中,我 ...
Vue中computed和methods的区别
为了说明method与computed的区别,在此我想先来看看computed属性在vue官网中的说法: 模板内的表达式是非常便利的,但是它们实际上只用于简单的运算.在模板中放入太多的逻辑会让模板过重 ...
vue中computed（计算属性）和watch在实现父子组件props同步时的实际区分
vue中computed和watch的对比是一个很有意思的话题. 看过官网教程以后,我们往往更倾向多使用computed.computed优点很多,却在某些时候不太适用. 今天我们就稍微讨论一下,当我 ...

Vue中computed，watch，Methods的比较

Vue中computed，watch，Methods的比较相关推荐

最新文章

热门文章