精华内容
下载资源
问答
  • 主要给大家介绍了关于Vue中computedmethods与watch区别的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用Vue具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
  • vue中computed和methods区别

    千次阅读 2019-12-01 16:24:24
    1.computed是响应式的,methods并非响应式。 2.调用方式不一样,computed定义的成员像属性一样访问,methods定义的成员必须以函数形式调用。 3.computed是带缓存的,只有其引用的响应式属性发生改变时才会重新计算,...

    1.computed是响应式的,methods并非响应式。
    2.调用方式不一样,computed定义的成员像属性一样访问,methods定义的成员必须以函数形式调用。
    3.computed是带缓存的,只有其引用的响应式属性发生改变时才会重新计算,而methods里的函数在每次调用时都要执行。
    4.computed中的成员可以只定义一个函数作为只读属性,也可以定义get/set变成可读写属性,这点是methods中的成员做不到的

    在我们的实际开发中,有时很难去确定具体用computed还是methods,因为这两种方法最后的到的结果是一样的,但是他们的原理和用法却完全不同,比如:我们想去时刻监控数据的变化,在视图上显示不同的结果,当然这两中方法都可以实现这种效果,这个时候用computed就比较合理了,因为computed是可缓存的,只要数据层值不改变,computed就不会去改变,而且可缓存,如果数据层的值变了,computed就会实时更新到视图层上,所以说computed是响应式的。

    还有一个不同点就是在于computed是以对象的属性方式存在的,在视图层直接调用就可以得到值,例如:

    {{msg}}
    ,而methods必须以函数形式调用,例如:
    {{msg()}}
    , 可见,computed直接以对象属性方式调用,而methods必须要函数执行才可以得到结果。

    展开全文
  • Vue中watch computed methods 区别是什么? coumputed 是计算属性,methods是方法,watch是侦听属性 computed methods 相比,最大区别computed 有缓存:如果 computed 属性依赖的属性没有变化,计算...

    Vue中watch 和 computed 和 methods 区别是什么?

    coumputed 是计算属性,methods是方法,watch是侦听属性

    • computed 和 methods 相比,最大区别是 computed 有缓存:如果 computed 属性依赖的属性没有变化,计算属性会立即返回之前的计算结果,而不必再次执行函数。而methods里的函数在每次调用时都要执行
    • watch 和 computed 相比,computed 是计算出一个属性(废话),而 watch 则可能是做别的事情(如上报数据)
      1 、watch无缓存;2、watch适用于:需要在数据变化时执行异步开销较大的操作
    展开全文
  • Vue中computed和methods区别

    万次阅读 多人点赞 2019-03-19 16:46:39
    Vue中computed和methods区别computed详解computed和methods区别 computed详解 computed可以完成各种复杂的逻辑,包括运算、函数调用等,只要最终返回一个结果就可以。下面是一个简易的计算器,来实现乘法的操作 ...

    Vue中computed和methods的区别

    computed详解

    computed可以完成各种复杂的逻辑,包括运算、函数调用等,只要最终返回一个结果就可以。下面是一个简易的计算器,来实现乘法的操作

    <body>
    		<div id="app">
    			长度:<input v-model="length" type="text" /><br /> 宽度:
    			<input v-model="width" type="text" /><br /> 面积:
    			<input v-model="areas" type="text" />
    		</div>
    	
    		<script type="text/javascript" src="lib/vue-2.4.0.js"></script>
    		<script>
    			var vm = new Vue({
    				el: '#app',
    				data: {
    					length: '',
    					width: '',
    				},
    				computed: {
    					areas: function() {
    						console.log('调用computed')
    						return this.length * this.width
    					}
    				}
    			})
    		</script>
    	</body>
    

    在这里插入图片描述
    当在长度文本框和宽度的文本框里输入值的时候,面积会自动给出。这里的 computed 的操作比较简单,返回值也比较好写。但当遇到比较麻烦的操作时,我们就需要返回自定义的返回值。

    <body>
    		<div id="app">
    			总价:<input v-model="prices" type="text"/>
    		</div>
    	
    		<script type="text/javascript" src="lib/vue-2.4.0.js"></script>
    		<script>
    			var vm = new Vue({
    				el: '#app',
    				data: {
    					package1: [
    						{
    							name: 'iPhone 7',
    							price: 7199,
    							count: 2
    						},
    						{
    							name: 'iPad',
    							price: 2888,
    							count: 1
    						}
    					],
    				  package2: [
    				  {
    				  	name: 'apple',
    				  	price: 3,
    				  	count: 5
    				  },
    				  {
    				  	name: 'banana',
    				  	price: 2,
    				  	count: 10
    				  }
    				  ]
    				},
    				computed: {
    					prices: function() {
    						var prices = 0
    						for (var i = 0; i < this.package1.length; i++) {
    							prices += this.package1[i].price * this.package2[i].count;
    						}
    						for (var i = 0; i < this.package2.length; i++) {
    							prices += this.package2[i].price * this.package2[i].count;
    						}
    						return prices
    					}
    				}
    	
    			})
    		</script>
    	</body>
    

    在这里插入图片描述
    自定的 prices 的几个值要保持一致,而且不能与 data 重复,也不需要在 data 里声明。

    computed和methods的区别

    我们用 computed 属性和 methods 方法编写一个计算器的乘法与加法计算。

    <body>
    		<div id="app">
    			长度:<input v-model="length" type="text" /><br /> 宽度:
    			<input v-model="width" type="text" /><br /> 面积:
    			<input v-model="areas" type="text" />
    			<button @click="add()">+</button><br /> 和的值为:
    			<input v-model="num" />
    		</div>
    	
    		<script type="text/javascript" src="lib/vue-2.4.0.js"></script>
    		<script>
    			var vm = new Vue({
    				el: '#app',
    				data: {
    					length: '',
    					width: '',
    					num: ''
    				},
    				computed: {
    					areas: function() {
    						console.log('调用computed')
    						let areas = 0
    						areas = this.length * this.width
    						return areas
    						/*console.log("computed被调用了")*/
    					}
    				},
    				methods: {
    					add: function() {
    						console.log('调用methods')
    						this.num = parseInt(this.length) + parseInt(this.width)
    					},
    	
    				}
    	
    			})
    		</script>
    	</body>
    

    在这里插入图片描述 在这里插入图片描述

    • 用 computed 属性方法编写的逻辑运算,在调用时直接将返回时 areas 视为一个变量值就可使用,无需进行函数调用。computed 具有缓存功能,在系统刚运行的时候调用一次。只有只有当计算结果发生变化才会被调用。比如,我们在长度框与宽度框更改值的时候每次更改 computed 都会被调用一次,很浪费资源。
    • 用 methods 方法编写的逻辑运算,在调用时 add() 一定要加“()”,methods 里面写的多位方法,调用方法一定要有()。methods方法页面刚加载时调用一次,以后只有被调用的时候才会被调用。我们在长度框和宽度框的值输入完以后,点击“+” methods 方法调用一次。这里很明显我们采用 methods 会更节省资源。

    目前来看 computed 属性的优势还是没有体现出来,我们再举一个例子。

    <body>
    		<div id="app">
    			{{ reversedText }}
    		</div>
    	
    		<script type="text/javascript" src="lib/vue-2.4.0.js"></script>
    		<script>
    			var vm = new Vue({
    				el: '#app',
    				data: {
    					text: '123,456'
    				},
    				computed: {
    					reversedText: function() {
    						return this.text.split(',').reverse().join(',');
    					}
    				}
    	
    			})
    		</script>
    	</body>
    

    这个输出的结果就是 456,123

    <body>
    		<div id="app">
    			{{ reversedText() }}
    		</div>
    	
    		<script type="text/javascript" src="lib/vue-2.4.0.js"></script>
    		<script>
    			var vm = new Vue({
    				el: '#app',
    				data: {
    					text: '123,456'
    				},
    				methods: {
    					reversedText: function() {
    						return this.text.split(',').reverse().join(',');
    					}
    				}
    			})
    		</script>
    	</body>
    

    输出的结果也是 456,123 但两者之间的差别就是在计算结果不发生改变的情况下,computed 的方法只被调用了一次,即便是多处多次调用,computed 也只被调用一次,这就是 computed 缓存的优势。那么在哪些情况下更适合使用 computed ?一般使用简单的表达式对内容进行简单的转换使用过滤器对内容进行简单的转换用的比较多。

    展开全文
  • 在new Vue的配置参数中的computed和methods都可以处理大量的逻辑代码,但是什么时候用哪个属性,要好好区分一下才能做到正确的运用vue。 computed称为计算属性,顾名思义,计算就要返回一个计算的结果,所以,当我们...

    在new Vue的配置参数中的computed和methods都可以处理大量的逻辑代码,但是什么时候用哪个属性,要好好区分一下才能做到正确的运用vue。
    computed称为计算属性,顾名思义,计算就要返回一个计算的结果,所以,当我们要处理大量的逻辑,但是最后要取得最后的结果的时候可以用computed;
    简单示例:
    要求:

    		<input type="text v-model="num1"><input type="text v-model="num2">
    

    现在要返回num1和num2的和;

    		<script>
    	    new Vue({
    	        el:"#box",
    	        data:{
    	                num1:0,
    	                num2:0
    	                }
    	        computed:{    
    	                result:function(){
    	                        return this.num1 + this.num2    
    	                        // 计算属性必须有一个返回值
    	                }
    	        }
    	     })
    		</script>
    

    methods:是方法的意思,在js中,我们把一些函数叫做方法,一般情况下,要触发这个方法就要执行,要执行就要有一个源来触发,所以就需要一个事件源。这是和computed的一点不同之处;
    methods的示例:
    要求:

    <\button @click="do()">点击弹出<\/button>
    <script>
    new Vue({
        el:"#box",
        data:{
                num1:0,
                num2:0
                }
        methods:{    
                do:function(){
                      alert('ok')
                      //这里根据情况,可以返回有返回值也可以没有返回值。
                }
        }
     })
    </script>
    

    对比computed 和 methods
    computed计算的结果如果不发生改变就不会触发result这个函数。而methods中一般都是定义的需要事件触发的一些函数。每次只要触发事件,就会执行对应的方法。如果把computed中的方法写到method中会浪费性能。
    computed必须返回一个值页面绑定的才能取得值,而methods中可以只执行逻辑代码,可以有返回值,也可以没有。

    计算属性computed只有在它的相关依赖发生改变时才会重新求值。

    每当触发重新渲染时,调用方法methods将总会再次执行函数。

    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <title>computed 与 methods 区别 </title>
    </head>
    
    <body>
        <div id="root">
            <input type="text" v-model="message">
            <p>{{ message }}</p>
            <p>{{ now1 }}</p>
            <p>{{ now2() }}</p>
        </div>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    
        <script type="text/javascript">
            var vm = new Vue({
                el: '#root',
                data: {
                    message: ''
                },
                computed: {
                    now1: function() {
                        return Date.now();
                    }
                },
                methods: {
                    now2: function() {
                        return Date.now();
                    }
                }
            });
        </script>
    </body>
    
    </html>
    

    methods方法会随着渲染的结果而变化,computed则不会,除非是相关依赖发生改变才变化。
    在这里插入图片描述

    展开全文
  • 拼接展示数据的任务, 也可以用methods完成, 但当页面的数据变化时, methods中的方法会被重新调用(产生不必要的性能消耗), 而methods内的方法只有自身有关的数据变化时才会被调用 一个简单的实例 computed只在初始...
  • Vue中watch、computed和methods区别

    千次阅读 2019-10-22 18:04:38
    watch和computed是对数据的监听 new Vue({ el:'#app', template:` <div> 1.{{msg}}|{{data1}}|{{data2}} <br/> ...
  • computed methods 区别

    2017-09-08 10:54:22
    vue 中computed 和methods 在使用效果来看可以说是一样的,但是深入看还是不一样的。区别就在于: computed 依赖缓存, methods 却不是。怎么理解呢?当Dom每次需要渲染computed的值,这个值已经处于缓存之中,不...
  • 给大家介绍了Vue.js中 computed和methods不同机制,在vue.js中,methods和computed两种方式来动态当作方法使用,文中还给大家提到了computed和methods区别,感兴趣的朋友一起看看吧
  • vue中computedmethods区别 methods: (函数调用) 每一次的调用都会对方法进行触发 computed:(属性调用)(当不依赖data) 初始化时被调用,第一次使用时,会把结果进行缓存,后续再使用计算属性,都会在第一次...
  • computedmethods和watch的区别

    千次阅读 2020-10-29 21:28:51
    一、computed methods computed是计算属性,methods是方法,都可以实现对 data 中的数据加工后再输出。 不同的是 computed 计算属性是基于它们的依赖进行缓存的。计算属性 computed 只有在它的相关依赖发生改变时...
  • <body> <...-- computed调用 --> <div>{{ reversedMessage }}</div> <!-- methods调用 --> <div>{{ reversedMsg() }}</div> </div> <s
  • computed methods computed是计算属性,methods是方法,都可以实现对 data 中的数据加工后再输出。 不同的是 computed 计算属性是基于它们的依赖进行缓存的。计算属性 computed 只有在它的相关依赖发生改变时才会...
  • watch为对象形式,键是需要观察的表达式,值是对应的回调函数,主要用来监听某些特定数据的变化,从而进行某些具体的业务逻辑操作,可以看成是computed和methods的结合体 下面是官方例子: &lt;div id="...
  • 所以区别来源于用法,只是需要动态值,那就用 computed ;需要知道值的改变后执行业务逻辑,才用 watch。 watch也可以影响数据的变化,当绑定的数据方法变化时触发响应的函数,需要在数据变化时执行异步或开销较大的...
  • 面试题:computed和methods有什么区别 标准而浅显的回答 在使用时,computed当做属性使用,而methods则当做方法调用 computed可以具有gettersetter,因此可以赋值,而methods不行 computed无法接收多个参数,而...
  • 先来看一下methods调用的使用场景: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>vue.js 学习</title> <link rel="stylesheet" href="style.css...
  • 一、watch、computedmethods区别: watch: 一个对象,键是需要观察的表达式,值是对应回调函数。 主要用来监听某些特定数据的变化,从而进行某些具体的业务逻辑操作。 可以看作是computed和methods的结合体。 ...
  • 先来一段代码,我们分别声明一个methods方法newName(),computed新增一个计算属性newNames,然后分别在页面中调了各四次,我们来看一下打印结果:如下图 可以看到计算属性newNames只被执行了一次,这就是computed的...
  • 目录一:computed和watch二:computed和methods三:如何正确使用computedmethods,watch 一:computed和watch computed计算属性顾名思义就是通过其他变量计算得来的另一个属性,计算属性是基于他们的响应式依赖...
  • computed和methods区别 一些浅显的回答 在使用时, computed可以当做属性使用,而methods则可以当做方法调用。 computed可以具有gettersetter方法,因此可以赋值,而methods是不行的。 computed无法接收多个...
  • Vue中computedmethods和watch之间的区别

    千次阅读 2019-04-09 11:21:01
    对于那些开始学习Vue的人来说,对于方法、计算属性观察者之间的区别有点混淆。 尽管通常可以使用它们中的每一个来完成或多或少相同的事情,但了解每个人在哪里胜过其他人还是很重要的。 在这个快速提示中,我们将...
  • computedmethods区别

    2021-01-23 18:53:04
    但是,methods里面的方法,在每次调用的时候都会执行一次方法 而computed属性里面的方法,不会每次都调用,它会事先检查方法里面的元素是否发生改变,若没有改变它会调用之前调用过方法的结果,所以性能会更好 ...
  • computedmethods的异同

    万次阅读 2017-05-12 11:35:31
    在vue.js中,有methods和computed两种方式来动态当作方法来用的 如下: 两种方式在这种情况下的结果是一样的 写法上的区别computed计算属性的方式在用属性时不用加(),而methods方式在使用时要像方法一样去用...
  • computed和methods区别

    2021-06-03 09:55:00
    computed和methods区别: 关于computed和methods,代码如下: <h1>{{getmessage}}</h1> <h2>{{getmessage}}</h2> <h3>{{getmessage}}</h3> <h4>{{getmessage}}<...
  • vue的watch,computed和methods区别 watch: 这个是用来监听data里面定义的一些变量,每监听到变量发生改变时,就会执行这里。 computed: 这个是计算属性,他的值不会在data里面声明。使自己定义的。可以处理data...
  • 例一 const app = Vue.createApp({ data(){ return{ message:'hello world', count:3, price:6, } }, computed:{

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 51,956
精华内容 20,782
关键字:

computed和methods的区别