当前位置: 首页 > 工具软件 > Watch > 使用案例 >

Vue Typescript @Watch

羿季
2023-12-01
语法:
	@Watch(path: string, options: WatchOptions = {})
			
参数说明:
	path: 
		string类型 被侦听的属性名

	options:
		类型WatchOptions={},可以包含两个属性
			immediate 
				boolean 侦听开始之后是否立即调用该回调函数;
			deep
				boolean 被侦听的对象的属性被改变时,是否调用该回调函数;
<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

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

}
</script>
 类似资料: