Vue中的watch和computed和methods有什么区别？

一、watch、computed、methods的区别：

watch: 一个对象，键是需要观察的表达式，值是对应回调函数。
       主要用来监听某些特定数据的变化，从而进行某些具体的业务逻辑操作。
       可以看作是computed和methods的结合体。

computed: 属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算。
          主要当属性来使用。

methods: 方法表示一个具体的操作，主要是书写业务逻辑。

二、watch的作用：

(1)watch属性可以来 监听data属性中的数据变化。

<div id="app1"></div>
<script>
 var vu = new Vue({
            el:"#app1",
            data:{
                firstName:"",
                lastName:"",
                age:"",
                sex:""
            },
            watch:{
                firstName:function(){
                    console.log(this.firstName);
                }
            }
        })
   </script>

(2)watch属性还可以来监听function中使用参数来获取新值(newValue)和旧值(oldValue)。

<div id="app1"></div>
 <script>
var vu = new Vue({
            el:"#app1",
            data:{
                firstName:"",
                lasttName:"",
                age:"",
                sex:""
            },
            watch:{
                firstName:function(newValue,oldValue){
                    console.log(newValue);
                    console.log(oldValue);
                }
            }
        })
    </script>

(3)watch属性还可以用来监听路由router的变化，只是这里的监听元素是固定的。

<div id="app1"></div>
    <script>
       var login = {
           template:'<h3>登录组件</h3>'
       }
       var routerObj = new VueRouter({
            routers:[
                // 此处的component只是组件对象
                {path:"/login",component:login} 
            ]
       })
        var vu = new Vue({
            el:"#app1",
            data:{},
            router:routerObj, // 将路由规则对象注册到MV实例上
            watch:{
                '$router.path':function(newValue,oldValue){
                    console.log(newValue);
                    console.log(oldValue);
                }
            }
        })
    </script>

三、computed属性的作用：

(1)computed也可以监听属性的变化，只是它会根据他的依赖属性生成一个属性，让MV对象可以使用这个属性。

<div id="app1"></div>
<script>
 var vu = new Vue({
            el:"#app1",
            data:{
                firstName:"",
                lastName:"",
                age:"",
                sex:""
            },
            computed:{
                allName:function(){
                  return this.firstName +"-"+this.lastName
                }
            }
        })
   </script>

希望对大家有帮助~加油！