Comments (8)
@jiyinyiyong I would actually disagree with you that Vue cannot scale well. At my work we have built a rather large application with Vue and it worked out great. The way we accomplished it was treating each little section of our application as a component. Since components are essentially just another Vue instance you can attach data, methods, computed properties to them. This way each section of the application is its own entity.
Since most of our data was being handled by an API (built with php) we simply used promises to batch all of our components together and then instantiate our main Vue instance.
from discussion.
@brandonjpierce would love to see some examples of the promises approach to batching the components.
I too think the Vue.js approach can scale to "large" web apps, but only time will tell.
from discussion.
@brandonjpierce My point is that Vue's component system does not help with dividing methods into components. So my question is how do you solve this problem? I quite wonder if there's some useful tricks implemented in Vue but not yet well documented(my bad it is I don't understand source code before reading in depth).
Here's what I found, in the docs on component, there are examples:
// Extend Vue to get a reusable constructor
var MyComponent = Vue.extend({
template: 'A custom component!'
})
// Register the constructor with id: my-component
Vue.component('my-component', MyComponent)
// Implicitly call Vue.extend, then register the returned constructor.
// Use this syntax when you don't need to programatically
// instantiate your component.
// Note: this method returns Vue, not the registered constructor.
Vue.component('my-component', {
template: 'A custom component!'
})
But not methods
and computed
properties are written in each component. Which means, I have to put all methods in one instance. When codebase gets larger, managing code would not be as simple as that in Backbone or other tools.
Also in these example template
property is filled with a string ot template rather than an id that referring to template in script element. It's sometimes misleading.
from discussion.
@jiyinyiyong Looks like the docs just need improving. 😸
With the exception of the el
property, all other instantiation options can be passed in via .extend()
and by extension (heh) via .component()
.
Here's an example:
https://github.com/BigBlueHat/vue-schema/blob/master/app.js
from discussion.
You'll also notice that Vue.js can look up templates using DOM id's:
https://github.com/BigBlueHat/vue-schema/blob/master/app.js#L57-L59
from discussion.
@BigBlueHat That's really helpful. It's a lot better when we have this power.
I should suspend this topic before the usage of component is unveiled and documented.
from discussion.
@BigBlueHat This is a very simplified version of what we are doing (more of a proof of concept):
http://jsfiddle.net/brandonpierce/kL7HR/
from discussion.
@brandonjpierce very cool! Thanks for sharing (and sorry for the slow reply).
from discussion.
Related Issues (20)
- Use ||(or) in v-if (with nuxt js)
- Instantiate a copy of a component directly in that component HOT 1
- Call pre-defined javascript method on vue js event
- What about js-data.io?
- How to make vue bind to, or work with, html in properties
- Convert VueJS 1 to VueJS 2 HOT 2
- Third Party Libraries - Make non reactive?
- why v-switch not included in vuejs and what the alternative way HOT 1
- Use raw html inside v-bind
- iOS event bound using addEventListener is not triggering
- How to validate when blur a component.
- Google is not defined HOT 2
- vuejs can not find method or variable inside a callback function HOT 2
- Thousands of rows performance HOT 1
- how to pass Header + Body in POST api using Vue JS-axios HOT 4
- Conditional rendering and child component
- Fetch the value of element dynamically
- Vue breaks DataTables and Pace JS
- Bootstrap4 tag b-form-input has problem with @blur
- Invalid prop: Expected `Basic type`, got Nulll.
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
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.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from discussion.