methods

  • General business processing

Suitable for business logic processing, data cannot be cached and will be re-invoked each time it is used

watch

  • Single data and routes

It is suitable for monitoring changes of single data and routes

computed

  • Attribute computations Functions defined in computed can be used directly as attributes

Suitable for calculating properties and caching data

  • Example:
<body> <div id="app"> <input type="text" v-model="firstname"> - <input type="text" v-model="lastname"> = <! -- <input type="text" :value="fullname()"> --> <! -- {{fullname()}} {{fullname()}} --> <input type="text" :value="fullname"> {{fullname}} {{fullname}} </div> <script> new  Vue({ el: "#app", data: { firstname: '', lastname: '', // fullname: '' }, created() { }, methods: {// fullname() {// console.log(1) // return this.firstName + '-' + this.lastname //}}, // Listen for existing data watch: { // firstname(newVal, oldVal) { // // console.log(newVal, oldVal) // // this.fullname = this.firstname + '-' + this.lastname // this.fullname = newVal + '-' + this.lastname // },  // lastname(newVal, oldVal) { // // console.log(newVal, oldVal) // this.fullname = this.firstname + '-' + newVal // } }, computed: {// computed functions can be used as attributes directly using fullname() {console.log(1) return this.firstName + '-' + this.lastname}}}) </script> </body>Copy the code

Watch Listens for routes

<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, "> <meta http-equiv=" x-UA-compatible "content=" IE =edge"> <title>Document</title> <script src="./lib/vue.js"></script> <script src="./lib/vue-router.js"></script> </head> <body> <div id="app"> {{msg}} <router-link to="/login">login</router-link> <router-view></router-view> </div> <script> const Login = { template: '<div> Login component </div>'} const router = new VueRouter({routes: [{path: '/', component: Home }, { path: '/login', component: Login } ] }) new Vue({ el: "#app", data: { msg: '' }, created() { }, methods: { }, router, watch: { '$route.path'(newVal, oldVal) { // console.log(newVal, OldVal) if (newVal === '/login') {console.log(' welcome to login page ') this. MSG = 'welcome to login page'} else if (newVal === = '/') {this. MSG = 'Here comes brother'}}}}) </script> </body>Copy the code