Vue 关于计算属性computed简单运用及与methods的区别

计算属性

1.一个computed的demo

 <div id=“app”>
    <h2 >{{allName}}</h2>
    //属性
 </div>

<script src="../js/vue.js"></script>
<script>
let app=new Vue({
  el:'app',
  data:{
    name：'hello',
    word:'vue'
  }，
  computed:{
    allName:function(){
        return  this.name+""+this.word
    }
  }
)}
</script>

2.getter setter
set写 get读

 <div id=“app”>
    <h2 >{{allName}}</h2>
    //属性
 </div>

<script src="../js/vue.js"></script>
<script>
let app=new Vue({
  el:'app',
  data:{
    name：'hello',
    word:'vue'
  }，
  computed:{
    allName:{
       set:function(val){
        //可传参进入
        // 一般不用set  给属性赋值时调用
       },
       get:function(){
          return this.name+""+this.word
          //若没有set  可以直接写成demo那样
       }
  }
)}
</script>

3.计算属性computed和methods的对比
主要就是计算属性有缓存

 <div id=“app”>
    <h2>{{getAllName()}}</h2>
    <h2>{{getAllName()}}</h2>
    <h2>{{getAllName()}}</h2>
    //通过methods  多次执行调用几次执行几次  性能低
    <h2>{{allName}}</h2>
    <h2>{{allName}}</h2>  
    <h2>{{allName}}</h2>
    //通过computed  监听结果缓存 属性不变时不会频繁调用 
 </div>

<script src="../js/vue.js"></script>
<script>
let app=new Vue({
  el:'app',
  data:{
    name：'hello',
    word:'vue'
  }，
  computed:{
    allName:function(){
        return  this.name+""+this.word
    }
  },
  methods:{
    getAllName:function(){
        return  this.name+""+this.word
    }
  }
)}
</script>