Vue 의 computed(속성 계산)를 자세히 설명 하려 면 인 스 턴 스 의 TodoList 를 사용 하 십시오.

5701 단어 VuecomputedTodoList
최근 에 vue 를 뒤 집어 서 약간 현혹 되 었 습 니 다methodscomputed두 속성의 차이 점 을 가지 고 TodoList 라 는 demo 를 써 보 았 습 니 다.(좋 은 흙 마스크 도망~)
1. methods
methods 는 react 의 구성 요소 와 유사 한 방법 으로 vue 가 사용 하 는 html 바 인 딩 이벤트 와 다 릅 니 다.
예 를 들다

 /*html*/
 <input type="button" value="  " v-on:click='handlClick' id="app">


 /*js*/
 var app = new Vue({
    el:'#app',
    methods:{
      handlClick:function(){
        alert('succeed!');
      },
    }
  })
input 탭 에 있 는 vue 명령 v-on 명령 을 통 해 handlClick 이 벤트 를 연결 합 니 다.handlClick 이 벤트 는 methods 속성 에 적 혀 있 습 니 다.
2. computed

/*html*/
<div id="app2">{{even}}</div>

/*js*/
var app2 = new Vue({
  el:'#app2',
  data:{
    message:[1,2,3,4,5,6]
  },
  computed:{
    even:function(){ //    
      return this.message.filter(function(item){
        return item%2 === 0;
      });
    },
  },
});
message 의 짝 수 를 선택 한 것 을 볼 수 있 습 니 다.현재 콘 솔 에서 message 를 인쇄 해 보 세 요.

message 가 변 하지 않 았 는 지,원래 message 인지,콘 솔 에서 message 를 수정 해 보 세 요.

수정 후 나 는 인위적인 트리거 함수 가 없 었 고 왼쪽 에 있 는 디 스 플레이 는 새로운 배열 의 짝수 선택 집합 이 되 었 다.
3.구별
methods 는 일종 의 상호작용 방법 으로 사용자 의 상호작용 동작 을 methods 에 쓴다.컴퓨터 d 는 데이터 가 변 할 때 mvc 의 module 에서 view 로 의 데이터 변환 매 핑 이다.
쉽게 말 하면 methods 는 인위적인 트리거 가 필요 하 며,coptute d 는 data 데이터 변 화 를 감지 할 때 자동 으로 트리거 되 며,또 하 나 는 성능 소모 의 차이 점 입 니 다.이 는 설명 하기 쉽 습 니 다.
우선,methods 는 방식 입 니 다.방법 을 계산 한 후에 쓰레기 회수 체 제 는 변 수 를 회수 하기 때문에 다음 에 짝수 선별 을 요구 할 때 다시 값 을 구 할 것 입 니 다.한편,coptute d 는 데이터 에 의존 할 것 입 니 다.패 킷 을 닫 는 것 처럼 데이터 점용 메모리 가 쓰레기 에 의 해 회수 되 지 않 기 때문에 선별 짝수 집합 에 다시 방문 하여 다시 계산 하지 않 고 지난번 에 계 산 된 값 을 되 돌려 줍 니 다.data 의 데이터 가 바 뀌 었 을 때 다시 계산 합 니 다.쉽게 말 하면 methods 는 캐 시 없 이 한꺼번에 계산 하고 coptute d 는 캐 시 있 는 계산 입 니 다.
4.TodoList 예
Vue 홈 페이지 의 todo 예 를 살 펴 보 니 필터 기능 이 없 는 것 같 아서 필터 기능 이 있 는 예 를 적 었 습 니 다.다음 코드 에 서 는@click 의 뜻 은 v-on='click'의 약자 입 니 다.class=의 뜻 은 v-bin:'class'=의 약자 입 니 다.

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>todos</title>
  <script src="https://cdn.bootcss.com/vue/2.4.2/vue.js"></script>
  <style>
    .wrap{
      width: 400px;
      background-color: #ccc;
      margin: 0 auto;
    }
    i{
      color: #f00;
      font-size: 12px;
      margin-left: 20px;
      cursor: pointer;
    }
    i:hover{
      font-weight: 700;
    }
    ol{
      /*white-space: nowrap;*/
      word-wrap:break-word;
    }
    .done{
      text-decoration: line-through;
    }
    .not{

    }
  </style>
</head>
<body>
  <div class="wrap" id="todos">
    <input type="text" v-model='nextItem' @keyup.enter='append'>
    <button id="append" @click='append'>  </button>
    <ol>
      <li v-for='(item,index) of comp' 
      :key=item.id
      :class='item.state ? "not" : "done"'>
        {{item.text}}
        <i @click='remove(index)'>  </i>
      </li>
    </ol>
    <button @click='all'>  </button>
    <button @click='done'>   </button>
    <button @click='todos'>   </button>
  </div>
</body>
<script>
  var todos = new Vue({
    el:'#todos',
    data:{
      nextItem: '',
      nextID: 1,
      list: [],
      type: null,
    },
    computed:{
      comp:function(){
        if( this.type === 0 ){
          return this.list;
        }
        else if(this.type === 1){ //show all
          return this.list.filter(function(item){
            return true;
          })
        }
        else if(this.type === 2){ //done
          return this.list.filter(function(item){
            return item.state ? false : true;
          })
        }
        else if(this.type === 3){ //todos
          return this.list.filter(function(item){
            return item.state ? true : false;
          })
        }
      }
    },
    methods:{
      append:function(){//   todo
        this.list.push({
          id:this.nextID++,
          text:this.nextItem,
          state: true,
        });
        this.nextItem = '';
        this.type = 0;
      },
      remove:function(index){ //   donelist
        this.list[index].state = !this.list[index].state;
      },
      all:function(){
        this.type = 1;
      },
      done:function(){
        this.type = 2;
      },
      todos:function(){
        this.type = 3;
      }
    }
  });
</script>
</html>

이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.

좋은 웹페이지 즐겨찾기