关于methods、computed、watch的使用

2019-11-21 15:51:16 阅读：217 来源： 互联网

标签：computed 数据 watch methods data 监听 name

关于methods、computed、watch的使用，前前后后我有转载过好几篇别人的文章。但始终没有自己成型的博文来记录，现自己尝试性的总结一下三者之间的区别：

computed：计算属性 computed用来监控自己定义的变量，该变量不在data里面声明，直接在computed里面定义，然后就可以在页面上进行双向数据绑定展示出结果或者用作其他处理。先看例子：

 1 <template>
 2     <div>
 3         <input type="text" v-model="name" />
 4         <span v-show="isShow">请输入3-6个字符</span>
 5         <br>
 6         <input type="text" v-model="todoName" />
 7     </div>
 8 </template>
 9 
10 <script>
11 export default {
12     data () {
13         return {
14             name: 'zs',
15             todoName: 'is'
16         }
17     },
18     computed: {
19         isShow () {
20             //当this.name的长度小于3或者大于6的时候，显示提示内容（我根据name的变化而变化，别人影响了我）
　　　　　　　　　//一个数据受多个数据影响，这里就是isShow（）受到了name长度的影响，也就是别人影响了我

21             if (this.name.length >= 3 && this.name.length <= 6) {
22                 return false
23             } else {
24                 return true
25             }
26         }
27     }
28 }
29 </script>

总结：

1.计算属性是由data中的已知值，得到的一个新值 2.这个新值只会根据已知值的变化而变化，其它不相关的数据的变化不会影响该值 3.计算属性不在data中 4.别人变化影响我自己 watch：监听数据的变化 watch主要用于监控vue实例的变化，它监控的变量当然必须在data里面声明才可以，它可以监控一个变量，也可以是一个对象。watch一般用于监控路由、input输入框的值)特殊处理等等，它比较适合的场景是一个数据影响多个数据。（去哪儿网里处理过根据input框里输入的数据选择城市）

 1 <template>
 2     <div>
 3         <input type="text" v-model="name" />
 4         <span v-show="isShow">请输入3-6个字符</span>
 5         <br>
 6         <input type="text" v-model="todoName" />
 7     </div>
 8 </template>
 9 
10 <script>
11 export default {
12     data () {
13         return {
14             name: 'zs',
15             todoName: 'is'
16         }
17     },
18     computed: {
19         isShow () {
20             //当this.name的长度小于3或者大于6的时候，显示提示内容（我根据name的变化而变化，别人影响了我）
21             if (this.name.length >= 3 && this.name.length <= 6) {
22                 return false
23             } else {
24                 return true
25             }
26         }
27     },
28     watch: {
29         //监听data中的name,如果发生了变化，就把变化的值给data中的todoName（我影响了别人）
30         name (newVal) {
31             this.todoName = newVal
32             console.log(this.todoName)//输入框中输入name的值，todoname跟着变化
33         }
34     },
35     methods: {
36 
37     }
38 }
39 </script>

总结：

1.监听data中的数据的变化

2.监听的数据就是data中的已知值

3.我的变化影响了别人

--------------------------------------------------------------

computed，watch和methods的关系 1. computed和watch都是以Vue的依赖追踪机制为基础的，它们都试图处理这样一件事情：当某一个数据（称它为依赖数据）发生变化的时候，所有依赖这个数据的“相关”数据“自动”发生变化，也就是自动调用相关的函数去实现数据的变动 2. 对methods:methods里面是用来定义函数的，它需要手动调用才能执行。而不像watch和computed那样， “自动执行”预先定义的函数 3.computed和watch各自处理的数据关系场景不同 3-1 computed擅长处理的场景：一个数据受多个数据影响 3-2 wacth擅长处理的场景：一个数据影响多个数据 -------------------------------------------------------------- 再举个例子，深入研究一下，这个搞懂了，那computed和wacth的使用之后就不会再陌生了。

 1 <template>
 2     <div>
 3         <input type="text" v-model="firstName" />
 4         <!-- <span v-show="isShow">请输入3-6个字符</span> -->
 5         <br />
 6         <input type="text" v-model="lastName" />
 7     </div>
 8 </template>
 9 
10 <script>
11 export default {
12     data () {
13         return {
14             firstName: 'zhang',
15             lastName: 'fan',
16             obj1: {
17                 a: 0
18             }
19         }
20     },
21     computed: {
22         // 计算结果并返回，只有当被计算的值发生改变时才会触发
23         // (即：计算属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算)
24         fullName () {
25             return this.firstName + '' + this.lastName
26         }
27     },
28     watch: {
29         // 监听某一个值，当被监听的值发生变化时，执行对应的操作
30 
31         //监听firstName,当firstName发生变化时就会执行该函数
32         firstName (newVal) {
33             //执行需要的操作...
34             //注：初始化不会执行。只有当被监听的值（firstName）发生变化时才会执行
35             // this.lastName = newVal
36         },
37         //监听lastName,当lastName发生变化时就会执行该函数
38         lastName: {
39             handler (newVal, oldVal) {
40                 //执行需要的操作
41                 this.firstName = newVal
42             },
43             immediate: true //true: 初始化时就会先执行一遍该监听对应的操作    
44         },
45         //监听对象obj1，当obj1发生变化时就执行相应的操作
46         obj1: {
47             handler () {
48                 //执行需要的操作
49             },
50             deep: true//该属性值默认为fasle
51             // 当被监听的值是对象,只有deep为true时,对应属性的值(obj1.a)发生变化时才能触发监听事件，但是这样非常消耗性能
52         },
53         //监听对象具体的属性，deep就不需要设置为true了
54         'obj1.a': {
55             handler () {
56                 //执行需要的操作...
57             }
58         }
59     },

然后截图下我在公司项目中用到的实际案例，以下是我在监控echart所用到的watch

这里我监控的是一个对象，用到了watch里的hander。

持续更新...

标签：computed,数据,watch,methods,data,监听,name
来源： https://www.cnblogs.com/andyZhang0511/p/11906115.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

关于methods、computed、watch的使用