watch与computed

computed

computed是一个计算属性(多个值变化，影响到一个结果) 属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算。他是函数主要当作 属性来使用，逻辑简单。只执行一次就拿出来调用下一次获取computed的值时才会重新计算。

<div id="app">
        <div>
            <button :class="{active: gender === ""}" @click="getUsers('')">全部</button>
            <button :class="{active: gender === "男"}" @click="getUsers('男')">男</button>
            <button :class="{active: gender === "女"}" @click="getUsers('女')">女</button>
        </div>
        
        <hr>
        <ul>
            <li v-for="user of showUsers">
                {{user.username}}
            </li>
        </ul>
    </div>

let users = [
            { id: 1, username: "lisa", gender: "男" },
            { id: 2, username: "aaa", gender: "女" },
            { id: 3, username: "ssss", gender: "男" },
            { id: 4, username: "dddd", gender: "男" },
            { id: 5, username: "fff", gender: "女" },
            { id: 6, username: "ppp", gender: "女" }
        ]
        let app = new Vue({
            el:"#app",
            data:{
                users,//原数据
                //showUsers:users,//计算得到的数据（计算属性）
                gender:""
            },
            
            computed:{
                showUsers:{
                    //showUsersh这个数据被获取时，触发
                    get(){
                        if(this.gender === ""){
                            return this.users
                        }else{
                            return this.users.filter(user => user.gender === this.gender)
                        }
                    }
                }
            }
        })

• data 存储没有经过计算的数据
• computed 依赖于data中的数据 存储被计算过的数据，以及计算的过程。如果数据需要被二次及多次处理，就属于计算属性

watch

watch(一个值变化，影响到多个结果改变)一个对象，键是需要观察的表达式，值是对应回调函数。主要用来监听某些特定数据的变化（watch监控路由对象‘ $route’），从而进行某些具体的业务逻辑操作可以看 作是computed和`methos的结合体

<div id="app">
  <input type="text" v-model="keyWord">
  <hr>
  <ul>
    <li v-for="user of showUsers">
      {{user.username}}
    </li>
  </ul>
</div>

let app = new Vue({
  el: '#app',
  data: {
    keyWord: '',
    users: [
      { id: 1, username: "lisa", gender: "true" },
            { id: 2, username: "aaa", gender: "false" },
            { id: 3, username: "ssss", gender: "true" },
            { id: 4, username: "dddd", gender: "true" },
            { id: 5, username: "fff", gender: "false" },
            { id: 6, username: "ppp", gender: "false" }
    ],
    showUsers: []
  },
  watch: {
    keyWord(newVal, oldVal) {
      // 模拟网络请求
      setTimeout(_=>{
        this.showUsers = this.users.filter(user=>user.username.includes(newVal));
      }, 1000);
    }
  }
});