路飞的全名叫做：蒙奇-D-路飞，他想成为海贼王，但路飞的爷爷卡普（海军英雄）因此感到非常恼怒，于是把“路飞”改成了叫“海军王”，希望他能改变志向
代码如下：
var vm = new Vue({ el: '#app', /* data选项中的数据：firstName，secName,thirdName computed监控的数据：lufei_Name 两者关系： lufei_Name = firstName + secName + thirdName 所以等式右边三个数据任一改变，都会直接修改 lufei_Name */ data: { // 路飞的全名：蒙奇·D·路飞 firstName: '蒙奇', secName: 'D', thirdName: '路飞' }, computed: { luFei_Name: function () { return this.firstName + this.secName + this.thirdName } } }) // 将“路飞”改为“海军王” vm.thirdName = '海军王' // 打印路飞的全名 console.log(vm.luFei_Name)
demo:
但是：
有一天，路飞的逗逼爷爷卡普，一不小心发现可能把族谱搞错了，实际上，他们不是“D”之一族，而是“H”一族，也就是说，“蒙奇-D-路飞”可能要叫做“蒙奇-H-路飞”了
将最后一段代码改为如下：
// 将“D”改为“H” vm.secName = 'H' // 打印路飞的全名 console.log(vm.luFei_Name)
demo：
methods不处理数据逻辑关系，只提供可调用的函数
相比于watch/computed，methods不处理数据逻辑关系，只提供可调用的函数
new Vue({ el: '#app', template: '<div><p>{{ say() }}</p></div>', methods: { say: function () { return '我要成为海贼王' } } })
从功能的互补上看待methods,watch和computed的关系
在很多时候，computed是用来处理你使用watch和methods的时候无法处理，或者是处理起来并不太恰当的情况的
利用computed处理methods存在的重复计算情况
1.methods里面的函数就是一群“耿直Boy”，如果有其他父函数调用它，它会每一次都“乖乖”地执行并返回结果，即使这些结果很可能是相同的，是不需要的
2.而computed是一个“心机Boy”，它会以Vue提供的依赖追踪系统为基础，只要依赖数据没有发生变化,computed就不会再度进行计算
例子：
new Vue({ el: '#app', // 设置两个button，点击分别调用getMethodsDate,getComputedDate方法 template: '<div><button @click="getMethodsDate">methods</button><button @click="getComputedDate">computed</button></div>', methods: { getMethodsDate: function () { alert(new Date()) }, // 返回computed选项中设置的计算属性——computedDate getComputedDate: function () { alert(this.computedDate) } }, computed: { computedDate: function () { return new Date() } }
第一次点击methods按钮：
第二次点击methods按钮：
注意两次点击methods返回的时间是不同的！！
第一次点击computed按钮：
第二次点击computed按钮：
注意两次点击computed返回的时间是相同的！！
1.两次点击methods返回的时间是不同的
2.注意两次点击computed返回的时间是相同的