Vue初识五（computed）

一、computed

例子一：看以下代码

new Vue({
    data:{
        user:{
            email:"myName.com",
            sname:"小明",
            phone:"12344555",
            }
         },
    template:`
        <div>
            {{user.sname||user.email || user.phone}}
        </div>`
   }).$mount("#app");
复制代码

在页面中展示用户名字，若用户没有填写名字，则展示邮箱，接着电话，但是，如果要展示多个，每个都这么写岂不是很麻烦。

用computed实现，看下面代码

new Vue({
  data:{
    user:{
      email:"mname.com",
      nickName:"小明",
      phone:"1111111111",
    }
  },
  computed:{
    displayName(){
      const user=this.user
      return user.nickName||user.email||user.phone
    }
  },

  template:`
  <div>
    {{displayName}}
   </div>`
}).$mount("#app");
复制代码

这样，要展示内容的时候，只需要写{{displayName}}即可。如果要更改内容，可以通过get和set实现，看以下代码

new Vue({
  data:{
    user:{
      email:"mname.com",
      nickName:"小明",
      phone:"1111111111",
    }
  },
  computed:{
    displayName:{
        get(){
             const user=this.user
          return user.nickName||user.email||user.phone
        },
        set(value){
            this.user.nickname=value;
        }
    }
  },

  template:`
  <div>
    {{displayName}}
    <button @click="add">set</button>
   </div>`,
   methods:{
       add(){
           this.display="圆圆"
       }
    }
}).$mount("#app");
复制代码

例子二：看以下代码

let id=0;
const createUser=(name,gender)=>{
 id += 1;
  return {id,name,gender};
}
new Vue({
  data(){
    return {
      users:[
         createUser("芳芳","女"),
         createUser("小明","男"),
         createUser("小方","男"),
         createUser("小花","女"),
      ],
      displayUsers:[]
    }
  },
  created(){
    this.displayUsers=this.users;
  },
  methods:{
    showMan(){
     this.displayUsers=this.users.filter(u=>u.gender==="男");
    },
    showWoman(){
      this.displayUsers=this.users.filter(u=>u.gender==="女")
    },
    showAll(){
      this.displayUsers=this.users;
    }
  },
  template: `
    <div>
      <div>
        <button @click="showAll">全部</button>
        <button @click="showMan">男</button>
        <button @click="showWoman">女</button>
      </div>
      <ul>
        <li v-for="u in displayUsers" :key="index">{{u.name}}--{{u.gender}}</li>
      </ul>
    </div>
  `
}).$mount("#app");
复制代码

通过点击不同按钮，显示不同内容，如下图所示，分别点击全部，男，女

接下来用computed实现

new Vue({
  data() {
    return {
      users: [
        createUser("方方", "男"),
        createUser("圆圆", "女"),
        createUser("小新", "男"),
        createUser("小葵", "女")
      ]，
      gender: ""
    };
  },
  computed: {
      displayUsers() {
    	const {users,gender} = this
        if(gender === ''){
           return users
         }else if(gender === 'male'){
      	    return users.filter( u => u.gender === '男')
         }else if(gender === 'female'){
     	    return users.filter( u => u.gender === '女')
      }
    }
  }
 methods:{
      setGender(string){
           this.gender = string
       }
  }
  template: `
    <div>
      <div>
	<button @onclick="setGender()">全部</button>
	<button @onclick="setGender(male)">男</button>
	<button @onclick="setGender(female)">女</button></div>
      <ul>
        <li v-for="u in displayUsers" :key="u.id">
          {{u.name}} - {{u.gender}}
        </li>
      </ul>
    </div>
  `
}).$mount("#app");
复制代码

简化上面的代码

new Vue({
  data() {
    return {
      users: [
        createUser("方方", "男"),
        createUser("圆圆", "女"),
        createUser("小新", "男"),
        createUser("小葵", "女")
      ]，
      gender: ""
    };
  },
  computed: {
      displayUsers() {
          const hash={
              male:'男',
              female:'女'}
    	const {users,gender} = this
        if(gender === ''){
           return users
         }else if(typeof gender==="string){
      	    return users.filter( u => u.gender === hash[gender]);
         }
    }
  }
 methods:{
      setGender(string){
           this.gender = string
       }
  }
  template: `
    <div>
      <div>
	<button @onclick="setGender()">全部</button>
	<button @onclick="setGender(male)">男</button>
	<button @onclick="setGender(female)">女</button></div>
      <ul>
        <li v-for="u in displayUsers" :key="u.id">
          {{u.name}} - {{u.gender}}
        </li>
      </ul>
    </div>
  `
}).$mount("#app");
复制代码

computed缓存

根据依赖会自动保存，依赖不变，computed就不会重新计算