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>