本文对比了Vue中Computed属性与Method在数据变化时的行为差异。Computed具备缓存特性，只有依赖的数据变化时才会重新计算；而Method每次获取都会执行。适用于需要逻辑计算并在多处复用的情况。
前台某个数据是经过计算得出后再渲染在页面上，可以通过vue的computed或 定义method 实现
例如：
<p>{{fullName}}</p>new Vue({
el:"p",
data:{
firstName:"foo",
lastName:"bar",
fullName:''
}fullName = firstName + lastName,并且后台数据firstName ，lastName发生变化时，前台要实时渲染computed实现：
computed：{
getFullName:function()
{
return this.firstName+" "+this.lastName
}
}对应前台修改为：
<p>{{getFullName}}</p>
methods:{
getFullName:function(){
return this.firstName+" " this.lastName
}
}对应的前台修改为：
<p>{{getFullName()}}</p>看上去好像没什么区别，我们来看看官网的说法
很清楚，就是用method方法时，不管firstName 和 laseName 有没有发生变化 getFullName 都会执行，如果是用计算属性computed,数据未发生变化时，返回值实际上是上次的缓存，不会重新计算
我们可以试验一下
修改computed代码如下
控制台：
控制台只打印了一次 computed 说明getFullName 只计算了一次
再看看methode方式：
控制台;
可以看到，methode打印了两次，说明计算了两次
总结： 当某个需要通过逻辑计算得到且在前台多处用到，应该使用vue的computed
扫一扫
724
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
