简介

keepeact 是一个由 typescript 和 vue.js 3.x 数据检测机制结合而成的小型框架，写法结合现代 jsx，class-style 写法，内置 diff 算法和批量更新策略优化了渲染效率，打包工具为 vite，能提供较好的开发环境简单，易上手，如果想为 jq 栈提供一套简单组件 ui，或者其他框架也可使用它

demo 一览

import { ValueComponent, Component } from 'keepeact';
@Component()
export default class Button extends ValueComponent {
  render() {
    return <button>button</button>;
  }
}

开始

yarn keept-cli -g

或

npm install keept-cli -g

创建安装

kp create [filename]
&
yarn

生命周期

生命周期包含了 constructor writeValue created beforeMount mounted updated destroy;

constructor 是指该组件实例化时调用
writeValue 是提供给外部传入 value 时，可接受 value 的回调函数，实例化后调用
created 当声明的属性完成数据监测时调用
beforeMount 当真实 dom 挂载之前
mountd 调用 render，真实 dom 挂载之后调用
updated 当响应数据更新之后调用
destroy 当组件被卸载销毁时调用

响应式与非响应

绑定属性

...
export default class Button extends ValueComponent {
  text = 'button'; // 此处完成绑定，该值变动会引起render的执行
  render() {
    return <button>{this.text}</button>;
  }
}

响应式数据类型

除了 Set Map weakSet weakMap 数据结构外，可对普通对象，数组和其他简单类型进行响应式追踪;

此外，针对非响应式数据，还提供了 update 方法，手动更新界面;

import { ValueComponent, Component, ChangeDetectionStrategy } from 'keepeact';

@Component()
export default class Button extends ValueComponent {
  text = 'button';
  set = new Set();
  mounted() {
    this.set.add(1);
    this.update();
  }
  render() {
    console.log(this.set); // Set([1])
    return <button>{this.text}</button>;
  }
}

非响应式

组件提供了两种更新策略, 自动更新(Default) 和 手动更新(Onpush),可供用户自由选择，更自由掌控数据响应，默认时 Default 模式

...
@Component({
  changeDetection: ChangeDetectionStrategy.Onpush // 开启Onpush时，全部数据将手动
})
export default class Button extends ValueComponent {
  text = 'button';
  mounted() {
    this.text = 'button1';
    this.update();
  }
  render() {
    return <button>{this.text}</button>;
  }
}

对象方法

已经对push/pop/shift/unshift 数组方法进行劫持。并且可在 render 函数中使用 includes/indexOf 查询方法，对应的数据发生改变也可响应;

...
export default class Button extends ValueComponent {
  text = 'button';
  mounted() {
    this.text = 'button1';
  }
  render() {
    console.log(this.text.includes('1')); // 第二次运行 true
    return <button>{this.text}</button>;
  }
}

class 和 style 绑定

<div 
class={['foo', { bar: true }]} 
style={{ fontSize: '16px', 'font-weight': 'bold' }}>
</div>

对应的html

<div 
class="foo bar"
style="font-size: 16px; font-weight: bold">
</div>

计算属性和侦听器

计算属性

...
export default class Button extends ValueComponent {
  count = 0;
  count1 = 1;
  get computeCount() {
    return this.count + this.count1;
  }
  render() {
    return <button>{this.computeCount}</button>;
  }
}

但上面方式对于性能并不是最优的，因为它没有缓存，也就是读取 computeCount 函数都会执行一遍,推荐用 computed 函数计算，暂时的唯一缺点就是访问时需要访问成员 value ，不过后续会考虑自动脱 value

import { ValueComponent, Component } from 'keepeact';
@Component()
export default class Button extends ValueComponent {
  count = 0;
  count1 = 1;
  computeCount = computed(() => this.count + this.count1);
  render() {
    return <button>{this.computeCount.value}</button>;
  }
}

侦听器

推荐使用 @Watch 装饰器

import { ValueComponent, Component, Watch } from 'keepeact';
@Component()
export default class Button extends ValueComponent {
  count = 0;
  @Watch('count')
  countChange(oldValue, newValue) {
    console.log('oldValue:', oldValue);
    console.log('newValue:', newValue);
  }
  mounted() {
    this.count++;
  }
  render() {
    return <button>{this.count}</button>;
  }
}

访问Dom元素

访问元素可使用 @Ref 或者 $refs

import { ValueComponent, Component, Ref } from 'keepeact';
@Component()
export default class Button extends ValueComponent {
  count = 0;
  @Ref('button') buttonEl: HTMLElement;

  mounted() {
    this.$nextTick(() => {
      console.log(this.buttonEl);
      console.log(this.$refs['button'])
    });
  }

  render() {
    return <button ref="button">{this.count}</button>;
  }
}

组件通讯

props

访问外部传进的数据可以使用 @Prop 接收，或者 $props

// child
import { ValueComponent, Component, Prop } from 'keepeact';
@Component()
export default class Child extends ValueComponent {
  @Prop() count;
  render() {
    console.log(this.$props); // { count: 1}
    return <button>{this.count}</button>;
  }
}

// parent
import { ValueComponent, Component, Prop } from 'keepeact';
@Component()
export default class Parent extends ValueComponent {
  count = 1;
  render() {
    return <Child count={this.count}></Child>;
  }
}

事件

DOM元素上绑定事件

import { ValueComponent, Component, Prop } from 'keepeact';
@Component()
export default class Button extends ValueComponent {
  count = 0;
  render() {
    return <button onClick={() => {
      this.count++
    }}>点我{this.count}</button>;
  }
}

同样的事件还有 onChange/onInput

valueChange

// Child
import { ValueComponent, Component, Prop } from 'keepeact';
@Component()
export default class Child extends ValueComponent {
  count = 0;
  render() {
    return <button onClick={() => {
      this.count++;
      this.onChange(`count:${count}`);
    }}>点我{this.count}</button>;
  }
}

// Parent
import { ValueComponent, Component, Prop } from 'keepeact';
@Component()
export default class Parent extends ValueComponent {
  render() {
    return <Child valueChange={(e) => {
      console.log(e); // count:1 count:2 count:3
    }}></Child>;
  }
}

导出使用

切记要声明 @Component 装饰器，因为他封装了一个 create 方法，便于用户将组件挂载到真实 Dom 上

import { ValueComponent, Component } from 'keepeact';
@Component() // 注意要加上
export default class Button extends ValueComponent {
  text = 'button';
  render() {
    return <button>{this.text}</button>;
  }
}

import Button from './src/components/button';
Button.create(el, {} /*props*/);

ahon / keepeact

简介

demo 一览

开始

创建安装

生命周期

响应式与非响应

绑定属性

响应式数据类型

非响应式

对象方法

class 和 style 绑定

计算属性和侦听器

计算属性

侦听器

访问Dom元素

组件通讯

props

事件

valueChange

导出使用

简介

发行版

贡献者

近期动态

ahon / keepeact .gitee-modal { width: 500px !important; }

简介

demo 一览

开始

创建安装

生命周期

响应式与非响应

绑定属性

响应式数据类型

非响应式

对象方法

class 和 style 绑定

计算属性和侦听器

计算属性

侦听器

访问Dom元素

组件通讯

props

事件

valueChange

导出使用

简介

发行版

贡献者

近期动态

搜索帮助

ahon / keepeact