Giter VIP home page Giter VIP logo

wonder_tree's Introduction

wonder-tree

Project setup

npm install

Compiles and hot-reloads for development

npm run serve

Compiles and minifies for production

npm run build

Lints and fixes files

npm run lint

Customize configuration

See Configuration Reference.

wonder_tree's People

Contributors

krave1986 avatar

Watchers

James Cloos avatar  avatar

wonder_tree's Issues

各种TODO!!!

1、合理优化 beforeMountedForTreeFlatList 的默认值
2、添加节点过滤功能 !
3、节点的4个组成部分:节点容器、左、中、右部分,各自都可以接收 provide 进来的,以 plain object 形式存在的样式包。淡化默认样式。
4、标签上,所做的 v-bind 不要把整个 nodeInstance 给 bind 出来。这样会影响程序的性能。provide keys 进去,告诉具体要 bind 出来的是哪几个 key 。
关于 v-bind 有几种情形:

  1. v-bind="nodeInstance" 类似于把整个组件绑定了出去,但是无参数的 v-bind 对 nodeInstance 对象做了解构,绑定出去的内容丢失响应性。比如说,在slot内容的渲染处,修改绑定出来的 nodeInstance 的 data ,所在的组件,是不会有响应操作的。不过绑定出去的方法,方法体内的 this 仍旧指向原组件实例。同时,上用的是 v-bind ,所以组件内部的状态变化,是可以在内容中,实时响应的。即 由内之外:响应;由外至内,丢失。
  2. v-bind:node="nodeInstance" 绑定出来的 node 就是原组件,一切组件性质照旧。即内外双向响应。问题是:性能很差。也不利于 Vue DevTools 的运行。经常卡死。
  3. v-bind:node="filter(nodeInstance)" 优点:可以对组件绑定精挑细选,降低 overhead 。同时,如果想要双向响应的话,可以把深度 data 的上层 bind 出来,修改下层的话,外部同样能对内部形成变化响应。
  4. 5、虽然已经证明了即使数据量很大,通过 requestIdleCallback 去做完全渲染也不会对交互产生任何负面影响,但是从环保的角度来说,我们还是应该要增加 passive 和 positive 两种模式。
    6、状态方法化:把很多去修改状态的操作,封装成 method ,这样 v-bind 出方法之后,只要调用方法,就可以实现和修改状态,实现响应一样的效果。还不需要安排深度 data 。
    7、left、main、right就不添加默认的点击事件了。直接把这些内容交给 slot content 来完成。

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.