Vue中Computed和Methods其实都可以实现同样的功能，但是两者还是有一定区别的，比如Computed可以实现get和set方法，而且Computed只有在值改变的时候才会重新运行
两者实现相同功能代码: <template> <div id="app"> <input v-model='name' type="text"></input> <div>{{test1}}</div> <div>{{test2()}}</div> </div> </template> <script> export default { name: 'app', data(){ return { name:'我是大懒猪' } }, computed:{ test1:function(){ return this.name.split('').reverse().join(''); } }, methods:{ test2:function(){ return this.name.split('').reverse().join(''); } } } </script> Computed get和set代码示例 <template> <div id="app"> <input v-model='name' type="text"></input> <input v-model='result' type="text"></input> <div>{{test1}}</div> <div>{{test2()}}</div> </div> </template> <script> export default { name: 'app', data(){ return { name:'我是大懒猪', result:'' } }, computed:{ test1:{ get:function(){ return this.name.split('').reverse().join(''); }, set:function(value){ this.result=value+' 赋值成功'; } } }, methods:{ test2:function(){ this.test1='test1'; return this.name.split('').reverse().join(''); } } } </script> methods代码中调用computed的set方法致死循环代码 <template> <div id="app"> <input v-model='name' type="text"></input> <input v-model='result' type="text"></input> <div>{{test1}}</div> <div>{{test2()}}</div> </div> </template> <script> export default { name: 'app', data(){ return { name:'我是大懒猪', result:'' } }, computed:{ test1:{ get:function(){ return this.name.split('').reverse().join(''); }, set:function(value){ this.name=this.name+value+' 赋值成功'; } } }, methods:{ test2:function(){ this.test1='test1'; return this.name.split('').reverse().join(''); } } } </script>总结如上
