Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Vue.js 3

github.com

Post reply on HN
Print view View original

21–30 of 308 posts

Re: Vue.js 3

#21

Post by manigandham »

bewareandaware wrote: post #5

I don't really understand the composition API. Doesn't passing values by reference which can be modified anywhere downward the tree make your app difficult to reason and debug it?

Modifications in all JS frameworks are the same. Some interaction causes an event, that event is caught and changes some data, that data then triggers the render functions which show the new UI. This is often coded with event handlers linked to actions/mutations/reducers in some kind of state management library.

Vue (and some other frameworks) use a reactivity approach where the data is wrapped with a proxy that basically automates all this code. I find it much easier to reason about since it greatly reduces the complexity and you can focus on the actual data changes rather than all the plumbing to change the data.

Re: Vue.js 3

#22

Post by agumonkey »

hugi wrote: post #2

Live release announcement with Evan You going on right now: https://www.youtube.com/watch?v=Vp5ANvd88x0

in case people wonder, still live as I type

ps: 5min later it's over

Re: Vue.js 3

#23

Post by spurgu »

tyingq wrote: post #11
fyrmio wrote: post #6

> Vue 3 has demonstrated significant performance improvements over Vue 2 in terms of bundle size (up to 41% lighter with tree-shaking), initial render (up to 55% faster), updates (up to 133% faster), and memory usage (up to 120% less). What does 120% less memory usage mean, really?

It's definitely not how to show that, but if you follow their link ( https://docs.google.com/spreadsheets/d/1VJFx-kQ4KjJmnpDXIEai... ), you'll see the numbers. The math is like, if it did use 100mb, and now it uses 25mb, that's 300% less, because 25mb is the "100%", and you reduced by that amount 3 times. Odd.

Yeah.

25 to 100 would be a 300% increase.

100 to 25 would be a 75% reduction.

Re: Vue.js 3

#24

Post by diminish »

lykahb wrote: post #4

I am impressed how they redesigned both internal architecture and a public API while keeping the users happy. Many well written projects fall into the trap of being a great fit for the contemporary practices but become less relevant over time as the ecosystem changes. Well done, Vue!

curious how easy it will be to move from vue 2 to vue 3

Re: Vue.js 3

#25

Post by sedatk »

fyrmio wrote: post #6

> Vue 3 has demonstrated significant performance improvements over Vue 2 in terms of bundle size (up to 41% lighter with tree-shaking), initial render (up to 55% faster), updates (up to 133% faster), and memory usage (up to 120% less). What does 120% less memory usage mean, really?

I guess it means 20% memory usage relative to the previous version?

Re: Vue.js 3

#26

Post by gavinray »

My only wish now is for the TSX experience to be rounded out.

From a reactivity standpoint, Vue has a much more ergonomic/easy to use API for handling component state, effects, and computed values (in my opinion) than React.

But in the last 6-8 months, I've leaned away from Single-File Components because when you want to do something like define a bunch of small components, it's a lot more difficult to do than with multiple TSX functions you can chuck in one file.

So I've been using Vue with TSX, and the experience (in the last few months only, before that was pretty bad) is okay, but not as solid as you'd get with React.

I'm not the only one who must feel this way, because this exists and has a lot of stars:

"Reactivue: Use Vue Composition API in React components"

https://github.com/antfu/reactivue

Unfortunately, this is a weird stance to take in the Vue community, almost nobody uses JSX/TSX. Because of this, the development efforts towards it aren't as much a priority.

Overall, I'd rate the experience as "decent" and "totally usable", but I hope to see the DX for Vue's TSX community improve over the coming months.

---

Edit 2: Disregard the below, this already exists apparently

Edit 1: Having to write two type definitions for Component Props: one TS interface/type, and one as the JS object sucks. That's my one big complaint.

I know it's impossible because props need a runtime value but someone should make a plugin/babel transform to decorate the "props" key from the generic argument here:

   const MyComponent = defineComponent
Use reflection on "MyComponentProps" to set "props" key.

There's another comment below discussing this drawback too.

Re: Vue.js 3

#27

Post by gonzus »

tyingq wrote: post #11
fyrmio wrote: post #6

> Vue 3 has demonstrated significant performance improvements over Vue 2 in terms of bundle size (up to 41% lighter with tree-shaking), initial render (up to 55% faster), updates (up to 133% faster), and memory usage (up to 120% less). What does 120% less memory usage mean, really?

It's definitely not how to show that, but if you follow their link ( https://docs.google.com/spreadsheets/d/1VJFx-kQ4KjJmnpDXIEai... ), you'll see the numbers. The math is like, if it did use 100mb, and now it uses 25mb, that's 300% less, because 25mb is the "100%", and you reduced by that amount 3 times. Odd.

This kind of arithmetic is always very unclear and causes all kinds of confusion / miscommunication. This is why I always prefer to be explicit about the absolute numbers (maybe in addition to the relative percentages): "it used 100 mb and now it uses 25 mb (which is a 300% reduction when looking at the final result / which is a 75% reduction based on the initial result)".

Re: Vue.js 3

#30

Post by IshKebab »

I was hoping for better Typescript support for typing properties, since that is where 90% of our type errors occur. But it seems like you still have to specify the types manually. The example from the manual:

  const Component = defineComponent({
    props: {
      name: String,
      success: { type: String },
      callback: {
        type: Function as PropType void>
      },
      message: {
        type: Object as PropType,
        required: true,
        validator(message: ComplexMessage) {
          return !!message.title
        }
      }
    }
  })
Contrast this with React where this would be something like this (I think; I've never used React):

  interface Props {
    name: string;
    success: string;
    callback: () => void;
    message: ComplexMessage;
  }

  export default class Component extends React.Component {
    ...
Quite disappointing. Maybe not that surprising given Evan said he only started using Typescript very recently, and many beginner Javascript developers don't realise that they should really be using Typescript (fortunately Evan isn't one of them). I would recommend still avoiding Vue for this reason alone.
Post reply on HN