computed计算属性

一、说明

在computed中，可以定义一些属性，即计算属性。
计算属性本质是方法，只是在使用这些计算属性的时候，把他们的名称直接当作属性来使用，并不会把计算属性当作方法去调用，不需要加小括号()调用。
此计算属性的方法内部所用到的任何data中的数据，依赖响应属性只要发生改变，就会立即重新计算，即触发这个计算属性的重新求值；否则不会重新计算求值。
计算属性的求值结果会被缓存起来，方便下次直接使用（多次调用只要内部数据不改变就不会重新求值，改变了也只会计算一次，虽然有多个地方引用此属性）。
方法内部无论如何都要return出去一个值。

二、实例

<html>  <head>     <meta charset=utf-8>     <title></title>     <script src=https://cdn.jsdelivr.net/npm/vue/dist/vue.js></script> </head>  <body>     <div id='app'>         <input type=text v-model=firstName>         <input type=text v-model=lastName>         <input type=text v-model=fullName>>         <p>{{fullName}}</p>     </div>     <script>         var vm = new Vue({             el: #app,             data: {                 firstName: '',                 lastName: '',              },             methods: {              },             computed: {                 fullName() {                     console.log('求值');                     return `${this.firstName}-${this.lastName}`;                 }             }         });     </script> </body>  </html>

3人点赞 vue学习

作者：小丘啦啦啦
链接：https://www.jianshu.com/p/bb74c5fba3ad
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。