yutent edited this page
Component
这是框架最核心的模块。内置了一套简洁的组件生成机制, 并提供了一系列的实用API。
静态属性/方法
1. watches<String>[]
v1.10.7新增。用于声明一些需要监听的属性。正常来说, 会很少需要设置这个, 大多数情况下因为静态属性props中的key默认会监听, 已经足够了。某些属性, 不想定义到props里, 但是又想被监听到变化, 这时候就可以在这个属性中声明一下。
2. props<Object>
用于声明节点的属性, 用于和外部进行数据通信。
- type 属性的类型(
String, Number, Boolean, Array, Object, null)六种之一。(其中null为空类型, 也称任意类型, 这时候传值不受限制, 属性也不会显示在标签上)- default 属性默认值。 前3种基础类型, 还可以设置默认值为
null, 为null时, 节点上不会显示属性出来。- attribute 是否显式表现。该设置只对
String/Number/Boolean3种类型有效, 其中Boolean类型, 遵循W3C规范,值为true时显示,false时不显示; 而复杂类型, 始终不会显示。- observer 监听的回调。该回调有2个参数, 分别为当前值和旧值, 有需要时, 在在回调中做一些额外的操作。
一旦声明了类型, 框架内部即会对传入的值进行修正, 如果传入值的类型与声明的不一致, 会强制转换, 要转换失败则会替换为默认值。
5种类型, 对应的默认值分别为 '', 0, false, [], {}。
static props = {
foo: {
type: String,
default: '123',
attribute: false, // 默认为 true
observer(val, old) {
// todo...
}
}
bar: {type: Boolean}, // 只写类型也可以, 等价于 {type: Boolean, default: false}
goo: true, // 简写, 只写值也可以, 框架内部会将这个值作为默认值, 并用这个值得到类型, 最终等价于 {type: Boolean, default: true}
}
从上面的例子可以看出, 属性的声明, 非常灵活。
2.1 快速定义非显式属性
v1.10.0之后, 对于String、Number、Boolean这3种简单类型, 可以快速的定义非显式属性。
对应3种特殊的prefix字符, 即str!、num!、bool!, 叹号后面可以带上默认值, 框架会自动按类型转换, 其中布尔类型的默认值, 除'false'和''之外, 全部为true。
class Foo extends Component {
static props = {
foo: 'str!', // 等价于 foo: { type: String, default: '', attribute: false }
bar: 'num!666', // 等价于 foo: { type: Number, default: 666, attribute: false }
goo: 'bool!false' // 等价于 foo: { type: Boolean, default: false, attribute: false }
}
}
3. styles<css>[]
用于编写组件的内部样式的属性。可是一个包含
css实例的数组, 也可以是单个css实例。
static styles = css`
.foo { color: red }
`
static styles = [
css`
.foo { color: red }
`,
css`
.bar { color: blue }
`
]
// 注意, 这里如果用 scss 语法, 需要使用wkit配套的构建工具来编译
static styles = css`
.foo {
color: red
.bar {
color: blue
}
}
`
4. animation<Object>
用于配置动画的属性。这里不重复说明了, 详情请看 动画配置
5. reg(name<String>)
用于注册组件的静态方法。用此方法注册的组件, 均以
wc-开头。如果需要注册为其他名字的组件, 请自行使用customElements.define()方法。
class Foo extends Component {
...
}
Foo.reg('foo') // 最终组件名为 <wc-foo />
// 或自行注册组件
if (!customElements.get('foo-blabla')) {
customElements.define('foo-blabla', Foo) // 最终组件名为 <foo-blabla />
}
实例属性/方法
1. keepAlive
这是框架的保留关键字属性, 默认为
false. 可以组件被移除之前修改它的值。这个值会影响组件被移出文档或移入文档时的逻辑处理。也可以在组件使用时, 添加
keep-alive属性, 无需赋值, 只要有此属性, 它的值永远为true。
<div>
<wc-foo keep-alive></wc-foo>
</div>
2. render()
这是用来返回模板的方法, 这里就不多说了, 详细请看 【Template文档】。
3. $requestUpdate()
这是用来手动更新视图渲染的方法。一般情况下, 定义在
props中的属性, 值变化时会自动更新视图, 但如何你模板中使用到了不在props中的属性, 这些属性的值发生变化时, 视图不会更新的, 需要时可以调用此方法手动更新。
4. $on(name<String>, callback<Function>, options<Any>)
事件监听的方法, 用此方法, 可以对当前组件自身定义任意事件监听。
5. $off(name<String>, callback<Function>, options<Any>)
注销事件绑定的方法。与
$on()对应。
6. $emit(name<String>, data<Object>, cancelBubble<Boolean>)
这是用于主动触发任意事件的方法, 其中,
data的内容, 全合并进形参event中。cancelBubble为是否取消事件冒泡。为true时, 事件不会往上冒泡。
生命周期
1. created()
这是在组件刚实例化时触发。 此时视图还未初始化完成, 不可进行任何
DOM操作, 但可以对组件属性进行赋值或其他的逻辑处理。
2. mounted()
这是在组件初始化完成时触发, 此时可以进行任意的DOM操作和任意的逻辑处理。
3. updated()
这是视图发生变化时触发。
mounted之前, 不会触发updated。
4. unmounted()
组件被移除出文档树时触发。同时组件中一切事件绑定也会被销毁(当组件被设置为
keep-alive时除外)。
5. activated()
v1.10.1新增。 当且仅当组件被设置为keep-alive, 且组件初始化完成时触发, 时机同mounted, 但比mounted先触发。另外, 在
wkitd框架下, 组件作为路由页面时, 这个回调也会在切换路由时触发。
6. deactivated()
v1.10.1新增。 当且仅当组件被设置为keep-alive, 且组件被移出文档树时触发, 时机同unmounted。另外, 在
wkitd框架下, 组件作为路由页面时, 这个回调也会在切换路由时触发。