Vue Typescript data/method/computed的转变

最新推荐文章于 2024-10-08 20:06:37 发布

kangkang_style

最新推荐文章于 2024-10-08 20:06:37 发布

阅读量535

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.youkuaiyun.com/kangkang_style/article/details/110669026

版权

vue 专栏收录该内容

32 篇文章

订阅专栏

本文探讨了如何在Vue.js应用中使用TypeScript来处理data、method和computed属性。data转换为成员变量，method转换为类的函数，而computed属性则通过get标识进行定义，增强了代码的类型安全性和可维护性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

data 以成员变量的形式存在
method 以类的函数形式存在
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>