Ts 监听模式

interface Iserver {
    nameChange (value:string):void;
}
// 观察者
class GUser implements Iserver {
    nameChange (value:string) {
        document.write("监听到当前修改了数据"+ value+"\n\r");
    }
}

// 监听
class people {
    private _name:string = "";
    jianting :Array<Iserver> = new Array<Iserver>;

    set name(value:string) {
        this._name = value;
        for (let obj of this.jianting) {
            obj.nameChange(this._name);
        }
    } 

    get name ():string {
        return this._name;
    }
}
let Pos = new people();
let test = new GUser();
let test2 = new GUser();
Pos.jianting.push(test);
Pos.jianting.push(test2);
Pos.name = "张三"

Pos.name = "李四"

Pos.name = "王麻子"

### Vue TypeScript 使用 `@Watch` 装饰器监听 Store 数据变化 在 Vue 项目中,尤其是在使用 TypeScript 的情况下,可以通过 `@Watch` 装饰器来监听 Store 中的状态变化。这种方式通常适用于 Options API 风格的组件编写模式。 为了实现这一功能,需要先安装必要的依赖库,并确保项目的配置支持装饰器语法。以下是具体实现步骤及相关代码示例。 --- #### 安装依赖 确保项目已经安装了 `vue-class-component` 和 `vue-property-decorator`,这两个包提供了对类风格组件的支持以及装饰器的功能。 ```bash npm install vue-class-component vue-property-decorator --save ``` --- #### 配置 TypeScript 支持装饰器 修改 `tsconfig.json` 文件,启用实验性的装饰器支持: ```json { "compilerOptions": { "experimentalDecorators": true, "emitDecoratorMetadata": true } } ``` --- #### 实现代码 下面是一个完整的例子,展示如何使用 `@Watch` 装饰器监听 Store 的状态变化。 ```typescript <template> <div>{{ storeState }}</div> </template> <script lang="ts"> import { Component, Watch, Vue } from 'vue-property-decorator'; import { useStore } from '@/stores/store'; // 假设已定义好 store 文件路径 @Component({}) export default class ExampleComponent extends Vue { private store = useStore(); private storeState!: string; constructor() { super(); this.storeState = this.store.someStateProperty; } @Watch('store.someStateProperty') onSomeStatePropertyChanged(newValue: any, oldValue: any): void { console.log('someStateProperty changed:', newValue, oldValue); this.storeState = newValue; // 更新本地状态 } } </script> ``` --- #### 关键点解析 1. **引入装饰器**:通过 `@Watch` 装饰器指定要监听的目标属性名称。 2. **目标属性路径**:可以在装饰器中传入具体的 Store 属性路径(如 `'store.someStateProperty'`),以便精确控制监听范围[^1]。 3. **回调函数签名**:`onSomeStatePropertyChanged` 方法接收两个参数——新值 (`newValue`) 和旧值 (`oldValue`),用于对比或进一步处理逻辑[^1]。 4. **局部缓存同步**:如果组件内部维护了一个与 Store 状态一致的副本,则需要手动更新该副本以保持一致性。 --- #### 性能优化注意事项 尽管 `@Watch` 装饰器简化了监听逻辑,但在某些高性能要求场景下仍需注意潜在问题: - 如果被监听的对象是复杂嵌套结构,默认行为不会深入检测子属性的变化。此时可考虑开启深拷贝监听或将关注的重点拆分为独立字段分别监听[^3]。 - 对于高频触发的事件源,应评估是否可通过防抖或节流技术降低调用频率,避免不必要的开销。 --- #### 替代方案 虽然 `@Watch` 装饰器适合 Options API 场景下的开发习惯,但如果团队倾向于 Composition API,则推荐直接使用 `watch` 函数替代。后者更加灵活且易于组合其他逻辑单元。 --- ###
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值