vue中computed、metfods、watch的区别

一、computed和methods

我们可以将同一函数定义为一个 method 或者一个计算属性。对于最终的结果，两种方式确实是相同的。

不同的是computed计算属性是基于它们的依赖进行缓存的。计算属性computed只有在它的相关依赖发生改变时才会重新求值。这就意味着只要计算依赖的值还没有发生改变，多次访问计算属性会立即返回之前的计算结果，而不必再次执行函数。而对于method ，只要发生重新渲染，method 调用总会执行该函数。

当有一个性能开销比较大的的计算属性 A ，它需要遍历一个极大的数组和做大量的计算。然后我们可能有其他的计算属性依赖于 A ，这时候，我们就需要缓存！

但是，缓存也有自己的缺点：

也同样意味着下面的计算属性将不再更新，因为 Date.now() 不是响应式依赖：

computed: {now: function () {return Date.now()}
}

　　so：数据量大，需要缓存的时候用computed；每次确实需要重新加载，不需要缓存时用methods

二、computed和watch

computed 和 watch 都可以观察页面的数据变化。当处理页面的数据变化时，我们有时候很容易滥用watch。而通常更好的办法是使用computed属性，而不是命令是的watch回调。 computed 计算属性只有在相关的数据发生变化时才会改变要计算的属性，当相关数据没有变化是，它会读取缓存。而不必想 motheds方法和 watch 方法是的每次都去执行函数。

这里我直接引用vue官网的例子来说明：

html:

我们要实现第三个表单的值是第一个和第二个的拼接，并且在前俩表单数值变化时，第三个表单数值也在变化

<div id="myDiv"><input type="text" v-model="firstName"><input type="text" v-model="lastName"><input type="text" v-model="fullName">
</div>

js: 用watch方法来实现

new Vue({el: '#myDiv',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}}
})

js: 利用computed 来写

new Vue({el:"#myDiv",data:{firstName:"Den",lastName:"wang",},computed:{fullName:function(){return  this.firstName  + " " +this.lastName;}}})

　　so：尽量用computed计算属性来监视数据的变化，因为它本身就这个特性，用watch没有computed“自动”，手动设置使代码变复杂。

转载于:https://www.cnblogs.com/cassiel/p/9104765.html

vue中computed、metfods、watch的区别相关推荐

vue方法调用失败后多次调用_浅析Vue中 computed / watch / methods的区别
思考:请说下Vue中computed 和 watch 的区别( 面试题 ) 构造选项 computed / watch / methods computed ● computed 起初构想在Vue的 ...
Vue 中 computed vs methods的区别
computed:计算属性 methods:方法 watch:侦听器 computed与methodes区别 1.computed是响应式的,methods并非响应式. 2.调用方式不一样,compu ...
vue中computed和watched的区别
computed computed在vue中起到计算属性作用. <p>firstName: <input type="text" v-model="fi ...
Vue中computed和watch的区别（面试题）
computed:通过属性计算而得来的属性 1.computed内部的函数在调用时不加(). 2.computed是依赖vm中data的属性变化而变化的,也就是说,当data中的属性发生改变的时候,当 ...
Vue中computed和methods的区别
为了说明method与computed的区别,在此我想先来看看computed属性在vue官网中的说法: 模板内的表达式是非常便利的,但是它们实际上只用于简单的运算.在模板中放入太多的逻辑会让模板过重 ...
Vue中computed和watch的区别
computed 计算属性 1.computed 它是一个计算属性,会计入缓存中,优先从缓存中加载 2.只有依赖数据发生改变,才重新计算 3.如果一个属性是有多个属性计算而来,这个属性依赖多个属性(也 ...
vue中computed与watch的区别
computed与watch computed能做的,watch都能做能用computes的地方,尽量使用computed computed是计算一个新的属性,并将该属性挂载到vm(Vue实例)上, ...
vue中computed（计算属性）和watch在实现父子组件props同步时的实际区分
vue中computed和watch的对比是一个很有意思的话题. 看过官网教程以后,我们往往更倾向多使用computed.computed优点很多,却在某些时候不太适用. 今天我们就稍微讨论一下,当我 ...
Vue中computed分析
Vue中computed分析在Vue中computed是计算属性,其会根据所依赖的数据动态显示新的计算结果,虽然使用{{}}模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的,在模板中放入太 ...
VUE中computed 、created 、mounted 的先后顺序
VUE中computed .created .mounted 的先后顺序 1.computed .created .mounted 的先后顺序 created => computed => ...

vue中computed、metfods、watch的区别

vue中computed、metfods、watch的区别相关推荐

最新文章

热门文章