VUE参考---watch、computed和methods之间的对比
一、总结
一句话总结：
computed：【缓存】 【属性】：属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算。主要当作属性来使用；
methods：【业务逻辑】：方法表示一个具体的操作，主要书写业务逻辑；
watch：【键变化就调回调函数】：一个对象，键是需要观察的表达式，值是对应回调函数。主要用来监听某些特定数据的变化，从而进行某些具体的业务逻辑操作；可以看作是computed和methods的结合体
二、watch、computed和methods之间的对比
博客对应课程的视频位置：
1、watch
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 8 <title>Document</title> 9 <script src="./lib/vue-2.4.0.js"></script> 10 </head> 11 12 <body> 13 <div id="app"> 14 15 <input type="text" v-model="firstname"> + 16 <input type="text" v-model="lastname"> = 17 <input type="text" v-model="fullname"> 18 19 </div> 20 21 <script> 22 // 创建 Vue 实例，得到 ViewModel 23 var vm = new Vue({ 24 el: '#app', 25 data: { 26 firstname: '', 27 lastname: '', 28 fullname: '' 29 }, 30 methods: {}, 31 watch: { // 使用这个 属性，可以监视 data 中指定数据的变化，然后触发这个 watch 中对应的 function 处理函数 32 'firstname': function (newVal, oldVal) { 33 // console.log('监视到了 firstname 的变化') 34 // this.fullname = this.firstname + '-' + this.lastname 35 36 // console.log(newVal + ' --- ' + oldVal) 37 38 this.fullname = newVal + '-' + this.lastname 39 }, 40 'lastname': function (newVal) { 41 this.fullname = this.firstname + '-' + newVal 42 } 43 } 44 }); 45 </script> 46 </body> 47 48 </html>
2、computed
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 8 <title>Document</title> 9 <script src="./lib/vue-2.4.0.js"></script> 10 </head> 11 12 <body> 13 <div id="app"> 14 15 <input type="text" v-model="firstname"> + 16 <input type="text" v-model="middlename"> + 17 <input type="text" v-model="lastname"> = 18 <input type="text" v-model="fullname"> 19 20 <p>{{ fullname }}</p> 21 <p>{{ fullname }}</p> 22 <p>{{ fullname }}</p> 23 24 </div> 25 26 <script> 27 // 创建 Vue 实例，得到 ViewModel 28 var vm = new Vue({ 29 el: '#app', 30 data: { 31 firstname: '', 32 lastname: '', 33 middlename: '' 34 }, 35 methods: {}, 36 computed: { // 在 computed 中，可以定义一些 属性，这些属性，叫做 【计算属性】， 计算属性的，本质，就是 一个方法，只不过，我们在使用 这些计算属性的时候，是把 它们的 名称，直接当作 属性来使用的；并不会把 计算属性，当作方法去调用； 37 38 // 注意1： 计算属性，在引用的时候，一定不要加 () 去调用，直接把它 当作 普通 属性去使用就好了； 39 // 注意2： 只要 计算属性，这个 function 内部，所用到的 任何 data 中的数据发送了变化，就会 立即重新计算 这个 计算属性的值 40 // 注意3： 计算属性的求值结果，会被缓存起来，方便下次直接使用； 如果 计算属性方法中，所以来的任何数据，都没有发生过变化，则，不会重新对 计算属性求值； 41 'fullname': function () { 42 console.log('ok') 43 return this.firstname + '-' + this.middlename + '-' + this.lastname 44 } 45 } 46 }); 47 </script> 48 </body> 49 50 </html>
3、methods
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 8 <title>Document</title> 9 <script src="./lib/vue-2.4.0.js"></script> 10 </head> 11 12 <body> 13 <div id="app"> 14 15 <!-- 分析： --> 16 <!-- 1. 我们要监听到 文本框数据的改变，这样才能知道 什么时候去拼接 出一个 fullname --> 17 <!-- 2. 如何监听到 文本框的数据改变呢？？？ --> 18 19 <input type="text" v-model="firstname" @keyup="getFullname"> + 20 <input type="text" v-model="lastname" @keyup="getFullname"> = 21 <input type="text" v-model="fullname"> 22 23 </div> 24 25 <script> 26 // 创建 Vue 实例，得到 ViewModel 27 var vm = new Vue({ 28 el: '#app', 29 data: { 30 firstname: '', 31 lastname: '', 32 fullname: '' 33 }, 34 methods: { 35 getFullname() { 36 this.fullname = this.firstname + '-' + this.lastname 37 } 38 } 39 }); 40 </script> 41 </body> 42 43 </html>