vue-cli: 计算属性与侦听属性

一. 计算属性与侦听属性

<template>
  <div>
    <h1>计算属性和侦听属性</h1>
    <!-- 表达式太复杂的话会导致模板难以维护, 而且如果多个地方使用该表达式的话会导致重复, -->
    <div>
      {{ type + ':' + msg }}
    </div>
    <!-- 使用computed计算属性 -->
    <div>{{ type_msg }}</div>
    <div>{{ firstName }}</div>
    <div>{{ lastName }}</div>
    <div>{{ fullName }}</div>
    <div>{{ fullName }}</div>
    <button @click="modifyFirstName">修改firstName</button>
    <button @click="modifyLastName">修改lastName</button>
    <button @click="modifyFullName">修改fullName</button>
    <!-- 通过函数方式达到计算属性的效果, 不推荐使用: 因为DOM更新的时候computed属性可以缓存, 而函数会反复调用, 导致性能低  -->
    <div>{{ getFullName() }}</div>
    <!-- computed使用场景: 某个数据受多个数据影响, 或者需要对其他数据进行js处理再显示;
     watch使用场景: 一个数据的变化会影响多个数据, 或者一个数据变化的时候需要执行异步操作 -->
    <div>语言: {{ language }}</div>
    <button @click="switch1('ch')">中文</button>
    <button @click="switch1('en')">English</button>
    <div>{{ ZhangSan }}</div>
    <div>{{ LiSi }}</div>
  </div>
</template>

<script>
export default {
  name: 'Demo7',
  data () {
    return {
      a: '11',
      msg: 'demo1',
      type: 'news',
      firstName: '孙',
      lastName: '悟空',
      // fullName: '' // 此处是用watch的时候需要的变量
      language: 'ch',
      // ZhangSan: '张三',
      // LiSi: '李四'
      ZhangSan: '',
      LiSi: ''
    }
  },
  computed: {
    type_msg () {
      return this.type + ':' + this.msg
    },
    // fullName () {
    //   return this.firstName + '' + this.lastName
    // },
    fullName: {
      get () {
        return this.firstName + '' + this.lastName
      },
      set (newVal) {
        const arr = newVal.split(' ')
        this.firstName = arr[0]
        this.lastName = arr[1]
      }
    }
  },
  methods: {
    getFullName () {
      return this.firstName + '' + this.lastName
    },
    modifyFirstName () {
      this.firstName = '上官'
    },
    modifyLastName () {
      this.lastName = '翠花'
    },
    modifyFullName () {
      this.fullName = 'Michel Jordan'
    },
    switch1 (val) {
      this.language = val
    }
  },
  watch: {
    // language (newVal) {
    //   if (newVal === 'ch') {
    //     this.ZhangSan = '张三'
    //     this.LiSi = '李四'
    //   } else if (newVal === 'en') {
    //     this.ZhangSan = 'ZhangSan'
    //     this.LiSi = 'LiSi'
    //   }
    // }
    language: {
      handler (newVal) {
        if (newVal === 'ch') {
          this.ZhangSan = '张三'
          this.LiSi = '李四'
        } else if (newVal === 'en') {
          this.ZhangSan = 'ZhangSan'
          this.LiSi = 'LiSi'
        }
      },
      // 立即执行
      immediate: true
    }
  }
  // 此处场景不适用, 没有computed简单好用
  // watch: {
  //   firstName (newVal) {
  //     this.fullName = newVal + '' + this.lastName
  //   },
  //   lastName (newVal) {
  //     this.fullName = this.lastName + '' + newVal
  //   }
  // }
}
</script>