vue in the watch and computed

watch ：

Watch attribute data can monitor changes in the specified data, once the data value being monitored has changed, it will immediately trigger handler function corresponding to watch:

<template>
     <div> 
        <input type="text" v-model="firstname" /> +
         <input type="text" v-model="lastname" /> = 
        <input type="text" v-model="fullname" />
     </div> 
</template>

export default { 
    data(){ 
        return{ 
            firstname:"",
             lastname:"",
             fullname:"" 
      } 
},
 watch:{ 
        //newVal:最新数据；
        //oldVal:上一次数据 
        "firstname":function(newVal,oldVal){
                 this.fullname = newVal+"-"+this.lastname;
         }, 
        "lastname":function(newVal){ 
                this.fullname = this.firstname+"-"+newVal; 
        } 
    } 
};

Property monitor routing address using the watch:

Examples of the entrance vue js file to add the attribute monitor watch $ route.path, as long as the url in the address bar has changed, it will be monitored

var vm = new Vue({ 
        el: "#app", 
        render: c => c(App4), 
        router:routerObj,
         watch: {
                 "$route.path": function(newVal, oldVal) { 
                        console.log(newVal + ' --- ' + oldVal);
                 } 
        } 
})

Defined in the computed attributes, known as computational properties, the nature of the property is a calculation method, but when we use these calculations attributes, their names are put directly as a property to be used; not when will calculate property as a method to call.

Calculating attributes computed attributes need not be defined in data declarations

Internal function to calculate attribute points to, any data used in the data has changed, it will immediately trigger function, recalculate the value of the property

export default { 
    data() { 
        return { 
            firstname: "",
             lastname: "“
         }; 
    }, 
    computed: { 
        fullname: function() { 
                return this.firstname + "-" + this.lastname; 
        }
     } 
};

1: property evaluation result of the calculation, are cached, directly next time, improve the operation efficiency of
2: fullname data can not be defined in the
3: firstname long lastnama or changed, the funciton immediately trigger the execution.