vue.js中,什么时候用methods?什么时候用computed?什么时候用watch

发布网友 发布时间:2022-04-03 13:29

我来回答

4个回答

懂视网 时间:2022-04-03 17:51

以Vue为例,其watch和computed的区别如下:

  

  1、computed支持缓存,只有依赖数据发生改变,才会重新进行计算;而watch不支持缓存,数据变,直接会触发相应的操作。

  

  2、computed不支持异步,当computed内有异步操作时无效,无法监听数据的变化;而watch支持异步。

  

  3、computed属性值会默认走缓存,计算属性是基于它们的响应式依赖进行缓存的,也就是基于data中声明过或者父组件传递的props中的数据通过计算得到的值;而watch监听的函数接收两个参数,第一个参数是最新的值,第二个参数是输入之前的值。

  

  4、如果一个属性是由其它属性计算而来的,这个属性依赖其它属性,是一个多对一或者一对一,一般用computed;而当一个属性发生变化时,需要执行对应的操作;一对多一般用watch。

  

  5、如果computed属性属性值是函数,那么默认会走get方法;函数的返回值就是属性的属性值;在computed中的,属性都有一个get和一个set方法,当数据变化时,调用set方法。而watch监听数据必须是data中声明过或者父组件传递过来的props中的数据,当数据变化时,触发其它操作,函数有两个参数。

热心网友 时间:2022-04-03 14:59

computed
以前的名字叫做ready
是在dom加载后马上执行的。

而methods中的函数,则必须要有一定的触发条件。
在模板中绑定表达式是非常便利的,但是它们实际上只用于简单的操作。模板是为了描述视图的结构。在模板中放入太多的逻辑会让模板过重且难以维护。这就是为什么 Vue.js 将绑定表达式*为一个表达式。如果需要多于一个表达式的逻辑,应当使用**计算属性**。
Vue实例的computed的属性
<div class="test">
<p>原始的信息{{message}}</p>
<p>计算后的信息{{ComputedMessage}}</p>
</div>

js代码
var myVue = new Vue({
el: ".test",
data: {
message:12
},
computed:{
ComputedMessage:function () {
return this.message+10;
}
}
});

界面会显示 12 和 22
上述的方式是一种缓冲的实现的效果,这种实现的方式依赖于它的缓寸,计算得到的属性只有在相关依赖(message)改变的时候才会重新取值,这就意味着只要message没有发生改变的时候,多次访问ComputedMessage都不会再重新执行计算的这个属性。。

计算后的ComputedMessage属性始终是依赖于message的
通过调用函数实现同样的效果
<div class="test">
<p>原始的信息{{message}}</p>
<p>计算后的信息{{MessageFunction()}}</p>
</div>

js代码
var myVue = new Vue({
el: ".test",
data: {
message:12
},
methods:{
MessageFunction:function () {
return this.message+10;
}
}
});

得到的结果和上面的结果是一样的,但是每次被重新渲染的时候都会被重新调用。
所以使用上述两种方式的时候,首先要确定你是否需要借助缓存
使用vue实例的watch
这个没有看懂呀
但是使用computed这个属性更加的方便和快捷
<div class="test">
<p>原始的信息{{fullName}}</p>
</div>

js代码
var myVue = new Vue({
el: ".test",
data: {
firstName:"fur",
lastName:"bool"
},
computed:{
fullName:function () {
return this.firstName+this.lastName
}
}
});

而且你可以computed属性设置setter getter是默认就有的。

演示set和get的调用过程
<div class="test">
<p>原始的信息{{fullName}}</p>
<button @click="fu">test</button>
</div>

js代码
var myVue = new Vue({
el: ".test",
data: {
firstName:"fur",
lastName:"bool",
fullName:"sasas dsdsd dsds"
},
computed:{
fullName:{
get:function () {
console.log("get")
return this.firstName+this.lastName
},
set:function(value){
var names=value.split(" ");
this.firstName=names[0];
this.lastName=names[names.length-1];
console.log("set");
}
}
},
methods:{
fu:function () {
myVue.fullName="sasas dsdsd dsds";
console.log(myVue.firstName); //sasas
console.log(myVue.lastName); //dsds
}
}
});

首先会输出get;

在点击按钮为fullName赋值的时候首先调用set 再调用get方法。
自定义的Watcher
虽然计算属性在大多数情况下是非常合适的,但是有的时候也需要自定义一个watcher。这是因为你想要在数据变化响应的时候,执行异步操作胡总和其他的操作是非常有用的。

热心网友 时间:2022-04-03 16:17

1、methods是个方法,比如你点击事件要执行一个方法,这时候就用methods,

2、computed是计算属性,实时响应的,比如你要根据data里一个值随时变化做出一些处理,就用computed。

3、举一个例子帮助理解:

1)<div id="root">;

2) </div>;

3) <script>        var vm = new Vue({            el: '#root',            data:data,            methods:{

4)method_now(){                    return Date.now();} },            

5)computed:{                

6)computed_now: function () {                    return Date.now();}} })

7)</script>

4、控制台访问:

1)$vm0.computed_now;

2)1491741921719$vm0.computed_now;

3)1491741921719$vm0.computed_now;

4)1491741921719$vm0.computed_now;

5)1491741921719$vm0.method_now;

6)()1491741949941$vm0.method_now;

7)()1491741950734$vm0.method_now;

8)()1491741951445$vm0.method_now;

9)()1491741952117。

5、methods是方法和原生js没区别,大多是需要我们主动调用(比如事件)。

6、computed是get 这个get有点特殊,只要触发所依赖数据的set会自动触发get。我们只关心get的return set由系统触发或者依赖的数据触发,官方说依赖缓存只是为了理解。其实Date.now()这种只是系统不能触发set,不能触发set get当然不会通知观察者。

7、watch 是set 由data触发,我们可以在set里进行自己的条件封装。

热心网友 时间:2022-04-03 17:51

mounted以前的名字叫做ready,不是computed。computed是计算属性。

声明声明:本网页内容为用户发布,旨在传播知识,不代表本网认同其观点,若有侵权等问题请及时与本网联系,我们将在第一时间删除处理。E-MAIL:11247931@qq.com