computed和watch的用法和区别

Posted 2022-11-28 iwishicould

computed可以监听v-model（data）中的值，只要值发生变化 他就会重新去计算
computed必须是要有一个返回值的哦 

  <div id="app">
        <input type="text" v-model="firstname">+
        <input type="text" v-model="lasttname">=
        <input type="text" v-model="fullname">
    </div>

var vm = new Vue(
            el: "#app",
            data: 
                firstname: "",
                lasttname: "",
            ,
            methods: 

            ,
             
             // computed可以监听v-model（data）中的值，只要值发生变化 他就会重新去计算
             // computed必须是要有一个返回值的哦 
            computed: 
                fullname: function () 
                    return this.firstname + "-" + this.lasttname
                
            ,
        )

 

//watch除了可以监听data中值的变化，还可以监听路由的变化，
//watch中有两个参数 分别是新值和旧值

     var vm = new Vue(
            el: "#app",
            data: 

            ,
            methods: 

            ,
            router: router,
            watch: 
                "$route.path":function(newval,oldval)
                if(newval==="/login")
                    console.log("这是denglu页面")
                else if(newval==="/zhuce")
                    console.log("这是注册页面")

                
                
            ,

        )

 

computed和watch的区别
《1》计算属性computed 必须要返回一个值哦 通过return来返回的

《2》 watch的回调函数里面有两个参数，分别是newval和oldval。