kylinH5框架之项目组件理解

组件介绍

Component 扩充自 Vue 的组件, 提供了 Vue 组件对等的输入参数能力。在代码书写时提供类 class 的装饰器 Decorator 风格。

import { Component, Watch } from '@ali/kylin-framework';

一个组件可以包含数据、JSX 渲染函数、模板、挂载元素、方法、生命周期等 Vue 的 options 选项的对等配置。

组件声明结构

组件声明包括以下几部分, 分别使用 @Component 和 @Watch 两种不同装饰器进行包装：

class 类声明, 使用装饰器 @Component。
类成员声明, 不使用装饰器。
类成员方法声明, 一般不装饰器, 除非该方法需要 watch 另外一个已声明的变量。

举例子

<!-- Hello.vue -->
<template>
  <div>
    hello {{name}}
    <Child></Child>
  </div>
</template>
<style>
  /* put style here */
</style>
<component default="Child" src="./child.vue" />
<script>
  import { Component } from '@ali/kylin-framework';
  @Component
  class Hello {
    data = {
      name: 'world'
    }
  }
  export default Hello;
</script>

组件接口

跟 vue 基本一致，组件定义写在 .vue 文件内，以下是一个简单的例子:

<template>
  <div>
    <AButton @click="onClick">点击</AButton>
  </div>
</template>
<style lang="less" rel="stylesheet/less">
    /* less */
</style>
<dependency component="{ AButton }" src="@alipay/antui-vue" lazy/>
<script type="text/javascript">
  import { Component } from '@ali/kylin-framework';
  @Component
  export default class IndexView {
    props = {}
    data = {c:666}
    get comput() { return this.data.c * 2 }
    onClick() {}
    mounted() {}
  }
</script>

上述例子中，有<template>、<style>、<script>、<dependency> 4 个顶级标签

其中 <template>、 <style> 与 vue 中定义一致。下文将对这 4 个标签的具体作用分别进行阐述。

script

1.class 结构

定义一个 Component ，使用类 class 的装饰器 Decorator 风格。

其中装饰器有 @Component 和 @Watch 2 种，通过以下方式引入。

import { Component, Watch } from '@ali/kylin-framework';
@Component
export default class Hello {
}

2.方法类型

@Component

组件以 class 形式声明，必须对该 class 进行装饰器修饰。

在 class 内部，不需要被手动处理成员变量，babel 插件在构建过程中自动进行处理。

而 成员函数 一般不需要装饰器挂载，除非是使用 @Watch 的场景,其中 @Component 会处理的属性如下表所示。

成员类型	名称	功能
get/set property	*	用以转换成 `Vue` 的 `computed` 计算属性，可以直接通过 `this[varName]` 调用。
method	生命周期	生命周期方法，与 `Vue` 对等。
method	*	普通成员方法, 用以转换成 `Vue` 的 `methods` 方法列表。

分别举例：

getter/setter属性

@Component 
export default class Hello {
  get computName() {
    // to sth
  }
}

上述 getter 声明，等价于如下 vue 配置

HelloOption = {
  computed: {
    computName: {
      get: computName() {
        // to sth
      }
    }
  }
}

同理，setter 也会被提取，如果同时存在 getter 和 setter 则会被一起提取。

生命周期函数

@Component 
export default class Hello {
  created() {}
  mounted() {}
}

上述 created 和 mounted 生命周期函数，会被提取为数组。

TestOption = {
  created: [function created(){}],
  mounted: [function mounted(){}],
}

支持的生命周期方法名如下，beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、 beforeDestroy、destroyed。

Watch

该装饰器的出现，只是因为 watch 需要有以下几个要素：

被监听的变量名
监听选项
触发函数

用法

完整的 @Watch 接口如下表所示。

function Watch( key: string [, option: Object = {} ] ): PropertyDecorator

参数名		类型	用途
key		string	监听的参数名，来自 `computed`、`data`、`props`三者之一。
option	deep	boolean	若监听的是复杂对象，其内层数据变更是否触发，默认为 `false`。
option	immediate	boolean	立即以表达式的当前值触发回调，默认为 `false`

示例

对于 @Watch 装饰的成员函数，支持对成员函数配置多个变量的监听，如下同时对 a 和 c 的变化进行了监听，如果任何一个发生变化，会触发 OnChangeA 成员方法。
如下，OnChangeA 本质是成员方法，所以他也会和其他成员方法一起被提取到methods块中，那么必须保证没有与其他方法重名。
如果对Watch有额外配置项，请按 @Watch('a', {deep: false})的方法传入。配置项请参考 watch配置项。

@Component
class WTest {
  data = {
    a: {
      b: 2
    },
    c: 3
  }
  @Watch('c')
  @Watch('a', {deep: true}) 
  OnChangeA(newVal, oldVal) {
  }
}

注意: 以上对 data.a 的监听，会转换成如下形式，需要注意的是，如果没开启 deep: true 选项，当 data.a.b 发生变动的时候，不会触发该 OnChangeA 监听。

3.属性类型

构建工具会自动对成员变量应用了 @Component.Property 装饰器，不需要用户手动填写，

最终的合并策略取决于被装饰的 成员变量 的标识符名称，框架内置了以下几种。如果不在下表中，会透传至 VueComponent 的 options 对象中。

成员类型	名称	功能
property	props	vue的props属性
property	data	vue的data属性，会被转换成函数形式, 支持 this，请勿直接写 `data(){}` 函数
property	*	其他未知属性，直接复制到 `Vue` 的 `options` 中的对应属性上

props

@Component 
export default class Hello {
  props = {
    name: {
      type: String,
      default: 'haha'
    },
    num: Number
  }
}

上述 props 成员变量定义，会被直接转换成到 options 中对应的 props。具体完整定义结构请参见 Vue 文档 API-props。

HelloOption = {
  props: {
    name: {
      type: String,
      default: 'haha'
    },
    num: Number
  }
}

data

@Component 
export default class Hello {
  props = {
    name: {
      type: Number,
      default: 1
    },
  }
  data = {
    hello: this.props.name + 2
  }
}

上述 data 成员变量定义，会被转换成 data 函数形式，您无需手动编写 data 函数。

TestOption = {
  props: {
    name: {
      type: Number,
      default: 1
    }, 
  },
  data: function data() {
    return {
      hello: this.props.name + 2
    }
  }
}

dependency

上述 <script> 定义中，没有说明组件依赖的使用方式，在 .vue 文件中，推荐使用以下写法来标记组件依赖，即 <dependency> 标签，下面示例中即引用了 ./child.vue 组件。

<template>
  <child></child>
</template>
<dependency component="Child" src="./child.vue" />

标签属性

default 导入

针对 ES6 Module 的 default 导出或者 commonjs Module 对象的导出，可使用如下方式引入。

属性	类型	默认值	备注
component	string	必填	引入到 `options.components` 的标识符名。
src	string	必填	组件来源，同require(`src`)。
lazy	boolean	false	是否对该组件启用懒加载（当且仅当被 `Vue` 使用到时再进行 `require` 加载模块）。
style	string	undefined	默认不启用，如果设置了字符串，会根据 `${src}/${style}` 的路径来加载组件对应样式文件。

如下示例:

<dependency component="name" src="source" lazy />

member 导入

针对 ES6 Module 的命名导出，可使用如下方式引入：

属性	类型	默认值	备注
component	string	必填	引入到 `options.components` 的多个命名标识符, 必须以花括号 `{`，`}` 包括，否则会识别为 `default 引入`。
src	string	必填	组件来源，同 require(`src`)。
lazy	boolean	false	是否对该组组件启用懒加载（当且仅当被 `Vue` 使用到时再进行 `require` 加载模块）。

如下示例:

<dependency component="{ List, ListItem, AButton }" src="@alipay/antui-vue" lazy />

默认对 @alipay/antui-vue 组件库支持 babel-plugin-import 按需加载。

template

模板的内容结构与 vue 一致。

<template>
  <div>Hello World</div>
</template>

style

可以通过添加 scoped 属性标记来使得该样式只对当前组件生效。

<style lang="less" rel="stylesheet/less" scoped>
    /* less */
</style>

状态注入

对于 Kylin 组件，如果需要使用到 Store 中的属性，使用计算属性把 $store 对象中的属性透传出来是一种不推荐的写法，如下所示：

@Component 
class Hello {
  // 通过计算属性来关联store中的状态
  get hello() {
    return this.$store.state.hello
  }
}

推荐使用下面的 connect 机制来透传 $store 数据：

接口声明

@Component({
  mapStateToProps: Object|Array,
  mapActionsToMethods: Object|Array,
  mapMethods: Array|Boolean,
  mapEvents: Array
})
class Hello {
}

mapStateToProps

把 state 中的特定键值映射到当前组件的 props 中，其接收参数等价于 Vuex 提供的 mapState 辅助函数。

有以下 3 种方式可实现上述功能：

函数方式

说明：把 $store.state 中名为 bbb 的数据，映射到名为 aaa 的 props 上。

{
  mapStateToProps: {
    aaa: (state, getters) => state.bbb
  }
}

字符串键值对方式

说明：把 $store.state 中名为 bbb 的数据，映射到名为 aaa 的 props 上。

{
  mapStateToProps: {
    aaa: 'bbb'
  }
}

字符串数组方式

说明：

把 $store.state 中名为 aaa 的数据，映射到名为 aaa 的 props 上。
把 $store.state 中的名为 bbb 的数据，映射到名为 bbb 的props 上。

{
  mapStateToProps: ['aaa', 'bbb']
}

mapActionsToMethods

与 Vuex 中 mapActions 入参一致，支持使用对象方式（名称映射）、数组方式（名称）把在全局 $store 下配置的 actions 注入到当前组件的 methods 中。

@Component({
  mapActionsToMethods: ['a', 'b']
})
class IndexView {
  async doSomeAction() {
    const ret = await this.a(123);
    // 等价于调用
    // const ret = await this.$store.dispatch('a', 123);
  }
}

mapMethods

通过在父子组件之间加一层中间层组件的方式来具体实现 connect 机制。当父组件调用子组件中特定的 method 方法时，无法直接访问子组件（实际访问到的是中间层组件），需要通过以下配置实现访问。

@Component({
  mapMethods: true
})
export default class Child {
  a() {}
}

<template>
  <div>
    this is parent
    <child ref="child"></child>
  </div>
</template>
<script>
  @Component
  export default class Parent {
    b() {
      // 此处可以访问
      this.$refs.child.a();
    }
  }
</script>

吐槽：学这个麒麟框架真的像中了佐二助大招雷遁麒麟一样难受(╯﹏╰)

kylinH5框架之项目组件理解

组件介绍

组件声明结构

组件接口

script

dependency

template

style

状态注入

接口声明

.Net 8.0 下的新RPC，IceRPC之试试的新玩法"打洞"

关于游戏付费的一点想法

我通过CKA和CKS啦！

《最新出炉》系列入门篇-Python+Playwright自动化测试-42-强大的可视化追踪利器Trace Viewer

大数据怎么学？对大数据开发领域及岗位的详细解读，完整理解大数据开发领域技术体系

wx.navigateTo跳轉首頁無效

ECharts 雷達圖在類目值下面顯示數值

鏈式調用setTimeout()與setInterval()的區別

js的array.some()方法

css3實現科技感的呼吸燈效果

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結