computed、watch、methods的区别

一、computed、watch、methods的区别

computed	计算属性，实际是一个函数，调用时不需要加小括号，显示的是函数的返回结果，改结果会被缓存下来，调用多次，不会重新执行函数，只有当结果所依赖的变量发生变化时，才会重新执行。
methods	方法，通过js调用，或者事件触发 表示一个具体的操作，主要是书写业务逻辑。
watch	监听器，当watch监听的变量值发生变化时才会执行  一个对象，键是需要观察的表达式，值是对应回调函数。 主要用来监听某些特定数据的变化，从而进行某些具体的业务逻辑操作。 可以看作是computed和methods的结合体。

二、watch的作用       

1.watch深度监听：

可以监听对象内部的变化，默认值为 deep：false

watch：{
    user：{
        handler（newVal）{
            console.log(newVal.uname)
        },
        //开启深度监听
        deep：true,
    }
}

2.监听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>

3.监听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>

三、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>