关于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 false23 } else {24 return true25 }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 false23 } else {24 return true25 }26 }27 },28 watch: {29 //监听data中的name,如果发生了变化，就把变化的值给data中的todoName（我影响了别人）30 name (newVal) {31 this.todoName = newVal32 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: 018 }19 }20 },21 computed: {22 // 计算结果并返回，只有当被计算的值发生改变时才会触发23 // (即：计算属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算)24 fullName () {25 return this.firstName '' this.lastName26 }27 },28 watch: {29 // 监听某一个值，当被监听的值发生变化时，执行对应的操作30 31 //监听firstName,当firstName发生变化时就会执行该函数32 firstName (newVal) {33 //执行需要的操作...34 //注：初始化不会执行。只有当被监听的值（firstName）发生变化时才会执行35 // this.lastName = newVal36 },37 //监听lastName,当lastName发生变化时就会执行该函数38 lastName: {39 handler (newVal, oldVal) {40 //执行需要的操作41 this.firstName = newVal42 },43 immediate: true //true: 初始化时就会先执行一遍该监听对应的操作 44 },45 //监听对象obj1，当obj1发生变化时就执行相应的操作46 obj1: {47 handler () {48 //执行需要的操作49 },50 deep: true//该属性值默认为fasle51 // 当被监听的值是对象,只有deep为true时,对应属性的值(obj1.a)发生变化时才能触发监听事件，但是这样非常消耗性能52 },53 //监听对象具体的属性，deep就不需要设置为true了54 'obj1.a': {55 handler () {56 //执行需要的操作...57 }58 }59 },然后截图下我在公司项目中用到的实际案例，以下是我在监控echart所用到的watch
这里我监控的是一个对象，用到了watch里的hander。
持续更新...
来源：https://www.icode9.com/content-4-571551.html
联系客服
