1. data 以成员变量的形式存在
2. method 以类的函数形式存在
3. computed 使用 get 标识

<!--
 * @Author: your name
 * @Date: 2020-12-02 14:30:50
 * @LastEditTime: 2020-12-02 17:00:58
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \hello-typescript\src\views\ForMixins.vue
-->
<template>
  <div>
    <h1>{{ mixinVal }}</h1>
    <!--证实私有属性可以混入-->
    <span>For Test whether private properties can be mixed: {{mixinPrivate}} </span><br/>
    <button @click="getCount">{{computedCount}}</button><br/>
    <!--证实方法可以混入-->
    <button @click="getMixinsCount">检测混入方法：{{mixinsCount}}</button>
  </div>
</template>
<script lang="ts">
import { Component, Watch } from 'vue-property-decorator'
import { mixins } from 'vue-class-component'
import GreetingWords from '@/mixins/GreetingWords.ts'
@Component
export default class ForMixins extends mixins(GreetingWords) {
  // data
  private count = 0 // 同名属性混入会报错
  public counts = 0
  protected counting = 0

  // methods
  public getCount () {
    return this.count++
  }

  // computed
  // computed检测的属性也是data属性，也属于成员变量
  get computedCount () {
    return this.count + this.mixinsCount
  }

  // watch 实现属性监听
  @Watch('count', { immediate: false, deep: false })
  onCountValueChange (val: number, oldValue: number) {
    if (val !== oldValue) {
      window.console.log('count number => ', val)
    }
  }

  mounted () {
    window.console.log('MixinsVal => ', this.mixinVal)
  }
}
</script>