vue中watch和data和computed计算属性的区别？

简单记录一下.

vuex中使用store和data和computed计算属性的先后对比

例子：计算结果的案例：

data：

初始组件的时候data拿到的是store的值是还没有输入过的原始值,

点击按钮的时候，取data中的值是原始值，不能自己更新。

computed：

换成计算属性时，是当值发生变化的时候，从新计算，不变化的时候拿到的是之前缓存的值。

两个数相加求和:

代码:(可以翻看上一个vuex详细了解的完整例子)

data:

//这里只记录小部分
data(){//只能获取到原始值
return{
ha:this.$store.state.s_a;
hb:this.$store.state.s_b;
 }
}
           

computed:

computed:{//计算属性，获取监听变化后的值
m(){//自定义一个方法，获取到输入后变化后的值
  return （this.$store.state.s_a-0）+(this.$store.s_b-0)
  //这里用减号(-0)是相加在一起，当不用减号时(两个数字会拼接在一起)
}

}
           

watch：也可以实现实时监听.

computed和watch区别?

Computed特点：

需要主动调用，具有缓存能力只有数据再次改变才会重新渲染，

否则就会直接拿取缓存中的数据。

Watch特点：

无论在哪只要被绑定数据发生变化Watch就会响应，

这个特点很适合在异步操作时用上。