Skip to content

Commit

Permalink
docs: vue2 usage problem
Browse files Browse the repository at this point in the history
  • Loading branch information
fangsmile committed Mar 22, 2024
1 parent 8e03fa4 commit 18500dc
Show file tree
Hide file tree
Showing 4 changed files with 28 additions and 20 deletions.
11 changes: 6 additions & 5 deletions docs/assets/faq/en/20-How to use VTable in Vue.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,10 +6,13 @@ VTable does not encapsulate the Vue component, so how do you VTable in Vue?

## Solution

In Vue 3.x, using VTable
It is recommended to use Vtable in Vue 3.x. If you use vue2, it may cause performance problems. For example, binding the instance of table to the vue component `this.tableInstance = new VTable.ListTable(dom, option)` will cause vue's Responsiveness monitors all changes to the tableInstance attribute, causing table performance to look poor. (If you need to save the variable, you can place it on the window first).

Composition API, you can refer to[ the online demo ](https://codesandbox.io/p/devbox/magical-nash-t6t33f)for details.
The following code uses Vue3!

Composite API usage:

You can refer to[ the online demo ](https://codesandbox.io/p/devbox/magical-nash-t6t33f)for details.

## Code Example

Expand Down Expand Up @@ -353,12 +356,10 @@ onMounted(() => {
```


## Results

- [Online demo](https://codesandbox.io/p/sandbox/wizardly-dream-ktf74n)


## Related Documentation

- [GitHub](https://github.com/VisActor/VTable)
- [GitHub](https://github.com/VisActor/VTable)
14 changes: 8 additions & 6 deletions docs/assets/faq/zh/20-How to use VTable in Vue.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,13 +2,17 @@

## 问题描述

VTable没有封装Vue组件,那么如何在 Vue 中VTable呢
VTable 没有封装 Vue 组件,那么如何在 Vue 中 VTable 呢

## 解决方案

Vue 3.x 中使用 Vtable
建议在 Vue 3.x 中使用 Vtable,如果使用 vue2 可能造成性能问题,如将 table 的实例绑定到 vue 组件上`this.tableInstance = new VTable.ListTable(dom, option)`,这样会导致 vue 的响应式去监听了 tableInstance 属性的所有变更,导致表格性能看上去不太好。(如果需要保存变量可以先放置到 window 上)。

组合式 API,具体可以[参考在线 demo](https://codesandbox.io/p/devbox/magical-nash-t6t33f)
以下代码使用基于 Vue3 !

组合式 API 用法:

具体可以[参考在线 demo](https://codesandbox.io/p/devbox/magical-nash-t6t33f)

不同的表格,封装方式都是类似的

Expand Down Expand Up @@ -145,12 +149,10 @@ onMounted(() => {
```


## 结果展示

- [在线效果参考](https://codesandbox.io/p/sandbox/wizardly-dream-ktf74n)


## 相关文档

- [GitHub](https://github.com/VisActor/VTable)
- [GitHub](https://github.com/VisActor/VTable)
10 changes: 6 additions & 4 deletions docs/assets/guide/en/Developer_Ecology/vue.md
Original file line number Diff line number Diff line change
@@ -1,9 +1,12 @@
## How to use VTable in Vue?

In Vue 3.x, using VTable
It is recommended to use Vtable in Vue 3.x. If you use vue2, it may cause performance problems. For example, binding the instance of table to the vue component `this.tableInstance = new VTable.ListTable(dom, option)` will cause vue's Responsiveness monitors all changes to the tableInstance attribute, causing table performance to look poor. (If you need to save the variable, you can place it on the window first).

Composition API, you can refer to[ the online demo ](https://codesandbox.io/p/devbox/magical-nash-t6t33f)for details.
The following code uses Vue3!

Composite API usage:

You can refer to[ the online demo ](https://codesandbox.io/p/devbox/magical-nash-t6t33f)for details.

## Code Example

Expand Down Expand Up @@ -142,8 +145,7 @@ onMounted(() => {

If you need to use ref to save table instances, please use `shallowRef`. Using `ref` will affect internal attribute updates and cause rendering exceptions.


```
const tableInstance = shallowRef();
tableInstance.value = new ListTable(listTableRef.value, option);
```
```
13 changes: 8 additions & 5 deletions docs/assets/guide/zh/Developer_Ecology/vue.md
Original file line number Diff line number Diff line change
@@ -1,8 +1,12 @@
## 如何在 Vue 中使用 VTable?

Vue 3.x 中使用 Vtable
建议在 Vue 3.x 中使用 Vtable,如果使用 vue2 可能造成性能问题,如将 table 的实例绑定到 vue 组件上`this.tableInstance = new VTable.ListTable(dom, option)`,这样会导致 vue 的响应式去监听了 tableInstance 属性的所有变更,导致表格性能看上去不太好。(如果需要保存变量可以先放置到 window 上)

组合式 API,具体可以[参考在线 demo](https://codesandbox.io/p/devbox/magical-nash-t6t33f)
以下代码使用基于 Vue3 !

组合式 API 用法:

具体可以[参考在线 demo](https://codesandbox.io/p/devbox/magical-nash-t6t33f)

## 代码示例

Expand Down Expand Up @@ -139,10 +143,9 @@ onMounted(() => {

## 注意

如果需要使用ref保存table实例,请使用`shallowRef`,使用`ref`会影响内部属性更新,导致渲染异常。

如果需要使用 ref 保存 table 实例,请使用`shallowRef`,使用`ref`会影响内部属性更新,导致渲染异常。

```
const tableInstance = shallowRef();
tableInstance.value = new ListTable(listTableRef.value, option);
```
```

0 comments on commit 18500dc

Please sign in to comment.