乐趣区

关于html5:Vue学习笔记vue的计算属性

jiezi

==计算属性在解决一些简单逻辑时是很有用的 ==
♦什么是计算属性？
能够对数据进行一些转换后再显示，或者须要将多个数据联合起来进行显示

计算属性关键词：computed

代码示例 1 

<div id="app">
  {{message.split('').reverse().join('') }}
</div>

代码示例 1 中的模板很简单，且不容易看懂

代码示例 2 

<div id="app">
  <p> 原始字符串: {{message}}</p>
  <!-- 谬误用法（很容易出错的点，reversedMessage 后不能加括号）-->
  <!--<p>{{reversedMessage()}}</p>-->
  <!-- 正确用法 -->
  <p> 计算后反转字符串: {{reversedMessage}}</p>
</div>
 
<script>
var vm = new Vue({
  el: '#app',
  data: {message: 'Runoob!'},
  // 计算属性的 getter
  computed: {reversedMessage: function () {
      // `this` 指向 vm 实例
      return this.message.split('').reverse().join('')
    }
  }
})
</script>

代码示例 2 中申明了一个计算属性 reversedMessage

提供的函数将用作属性 vm.reversedMessage 的 getter。vm.reversedMessage 依赖 vm.message，在 vm.message 扭转时，vm.reversedMessage 也会随之扭转

computed 和 methods 比照（理解）

computed 和 methods 的成果一样，区别在于：

  1. computed 是基于它的依赖缓存，只有相干依赖产生扭转时才会从新取值。（计算属性屡次应用，只会调用一次）
  2. 应用 methods，在从新渲染的时候，函数总会从新调用执行。（methods 执行几次，就调用几次，没有缓存）

代码示例 3 

<div id="app">
  <!--1. 间接拼接: 语法过于繁琐 -->
  <h2>{{firstName}} {{lastName}}</h2>
  <!--2. 通过定义 methods-->
  <h2>{{getFullName()}}</h2>
  <h2>{{getFullName()}}</h2>
  <h2>{{getFullName()}}</h2>
  <!--3. 通过 computed-->
  <h2>{{fullName}}</h2>
  <h2>{{fullName}}</h2>
  <h2>{{fullName}}</h2>

</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      firstName:'Lebron',
      lastName:'James'
    },
    methods: {getFullName() {console.log('getFullName');// 能够在浏览器控制台查看执行 3 次
        return this.firstName + ' ' + this.lastName
      }
    },
    computed:{fullName:function(){console.log('getFullName');// 能够在浏览器控制台查看执行 1 次
        return this.firstName+' '+this.lastName
      }
    }
  })
</script>

应用 computed 性能会更好，然而如果不心愿缓存，也能够应用 methods 属性。

计算属性的 setter 和 getter

■每一个计算属性都蕴含一个 getter 和一个 setter
■computed 属性默认只有 getter，不过在须要时你也能够提供一个 setter

代码示例 4 

<div id="app">
  <h2>{{fullName}}</h2>
</div>
<script src="../js/vue.js"></script>

<script>
  const app = new Vue({
    el: '#app',
    data: {
      firstName:'Kobe',
      lastName:'Bryant'
    },
    computed:{// fullName:function(){
     //   return this.firstname+' '+this.lastName
     // }
     //name:'coderwhy'
      // 计算属性个别没有 set 办法，只读属性
     fullName:{set:function(newValue){//console.log('----',newValue);
         const names=newValue.split(' ');
         this.firstName=name[0];
         this.lastName=name[1];
       },
       get:function(){return this.firstName+' '+this.lastName}
     },

      //fullName:function(){
      //  return this.firstName+' '+this.lastName
      //}
    }
  })
</script>

♦Tips

若单词显示如图波浪线，如果查看无误后并且今后还需持续应用该单词，咱们能够将该单词退出词库中


首先选中单词右击鼠标，抉择“show Context Actions”


下一步抉择“Save’Lebronb’ to dictionary

最初该单词就被退出词库中，波浪线隐没

退出移动版