vue中 computed的使用场景

1、如果显示和方法中使用的时候类型切换
<input v-model="type" />这里的type初始化的时候是数组['语文', '数学', '英语']，但是input中双向绑定只支持数字和字符串基本数据类型，所以这里就需要在数组和字符串直接切换

...
<template>
    <div>
        <input type="text" v-model="computedType" />
    </div>
</template>
...

data () {
    return {
        type: ['语文', '数学', '英语']
    }
},
computed: {
    // 他可以缓存数据，当依赖的数据发生变化时才重新计算。
    computedType: {
      get () {
        return this.type.join(',') // 字符串
      },
      set (val) {
        this.type = val.split(',') // 数组
      }
    }
    ...

2、computed是可以缓存数据的，当相关的变量发生变化的时候才重新计算
在搜索栏中可以使用，输入就搜索，不需要单机搜索按钮的情况，返回搜索结果

<template>
  <div id="video">
    <form>
      <div :class="{'item': true}">
        <span :class="{'name': true}">用户名</span>
        <el-input v-model="username" placeholder="用户名" />
      </div>
      <br>
      <div :class="{'item': true}">
        <span :class="{'name': true}">邮箱</span>
        <el-input v-model="formInfo.email" placeholder="邮箱"/>
      </div>
      <br>
      <div :class="{'item': true}">
        <span :class="{'name': true}">密码</span>
        <el-input
          v-model="formInfo.password"
          placeholder="密码"
          minlength="8"
          maxlength="32"
          show-word-limit
          show-password
        />
      </div>
      <br>
      <div :class="{'item': true}">
        <span :class="{'name': true}">确认密码</span>
        <el-input
          v-model="formInfo.passwordSure"
          placeholder="确认密码"
          minlength="8"
          maxlength="32"
          show-word-limit
          show-password
        />
      </div>
      <br>
      <div :class="{'item': true}">
        <span :class="{'name': true}">地址</span>
        <el-input type="textarea" v-model="formInfo.address" placeholder="地址"/>
      </div>
      <br>
      <div :class="{'item': true}">
        <span :class="{'name': true}">计算测试</span>
        <el-input v-model="formInfo.number" placeholder="数字"/>
      </div>
      <br>
      {{formInfo.number}}
      {{formInfo.total}}
      {{totalInfo}}
      <br>
      <div :class="{'item': true}">
        <span :class="{'name': true}">搜索</span>
        <el-input v-model="formInfo.search" placeholder="搜索" />
      </div>
      <br/>
      <div v-if="searchList.length > 0">
        <div v-for="(item, index) of searchList" :key="index">
            {{item.name}}
        </div>
      </div>
      <br/>
      <div :class="{'item': true}">
        <el-button type="primary" class="button" @click="searchListFun()">修改searchList值触发set()方法</el-button>
      </div>
      <br/>
      <div :class="{'item': true}">
        <el-button type="primary" class="button" @click="saveInfo()">保存</el-button>
      </div>
    </form>
  </div>
</template>
<script>
// import _ from 'lodash'
export default {
  name: 'Video',
  data () {
    return {
      formInfo: {
        username: ['zxc', 'hp'],
        email: '',
        password: '',
        passwordSure: '',
        address: '',
        number: 0,
        total: 0,
        search: '',
        searchResult: []
      }
    }
  },
  watch: {
    'formInfo.number' (newVal, oldVal) {
      console.log(newVal, oldVal)
      if (newVal !== oldVal) {
        this.formInfo.total = newVal * 10
        // this.formInfo.total = _.uniq([2, 3, 4, 3, 3, 4, 5])
      }
    }
  },
  methods: {
    saveInfo () {
      console.log(this.formInfo)
    },
    searchListFun () {
      this.searchList = [
        {name: 'zhangxuchao'},
        {name: 'changbirong'}
      ]
    }
    // methods 可以定义一个方法触发，来改变某个值
    // computed 依赖的数据发生变化就触发
    // watch 监听数据是否发送变化 写逻辑处理
  },
  computed: {
    // 他可以缓存数据，当依赖的数据发生变化时才重新计算。
    totalInfo: {
      get () {
        return this.formInfo.number * 10
      },
      set (val) {
        // 如果this.totalInfo发生变化那么就会触发set()方法。
        this.formInfo.number = val / 10
      }
    },
    // 定义这个计算属性来替换formInfo.username绑定v-model 因为他是一个数组我们现实的时候需要字符串，m层使用的时候需要数组，所以需要转换一下。
    username: {
      get () {
        return this.formInfo.username.join(',') // 字符串
      },
      set (val) {
        // 如果this.username 发生变化那么就会触发set()方法
        console.log(val)
        this.formInfo.username = val.split(',') // 数组
      }
    },
    searchList: {
      // 默认实现get()方法，写法是可以胜率的。
      get () {
        if (this.formInfo.search) {
          // 掉接口获取查询数据，查询条件是 this.formInfo.search
          return [{name: 'zxc'}]
        } else {
          return []
        }
      },
      set (val) {
        // 外面seachListFun()函数修改了 this.searchList的值的时候就会触发set
        // 然后这里又修改了this.formInfo.search = '' 所以就会触发get()
        console.log(val, '触发set()方法')
        this.formInfo.search = val[0].name
      }
    }
  }
}
</script>
<style scoped>
#video {
  width: 100%;
}
.item {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.name {
  width: 80pt;
}
.button {
  width: 100%;
}
</style>