5 ms·

Out of curiosity, what do you find clunky about Vue's variables vs Svelte? I've been working exclusively with Vue for the last... 6 years. Since the launch of

• oefrha 4y ago
  You don’t need to write .value’s everywhere, that’s about all. And Vue is a lot more convenient in other ways.
  • tinco 4y ago
    Do you mean .value when writing a component that's some sort of form field? How do you refer to that value in Svelte components? edit: oh nvm, we haven't upgraded our codebase to Vue 3 yet, there are a lot more ".value"'s if you click through to the Vue 3 examples in the original post.
    • lcrz 4y ago
      Vue has `refs`, which are reactive proxy objects that are used for tracking things like re-rendering. Since vue does not hide the fact that something is a ref, you need to call `myRef.value` to get to the underlying value of `const myRef = ref(10)`. In a new and currently experimental syntax, you can use `const myRef = $ref(10)`, at which point you can just use `myRef` directly. This will then be converted by the Vue SFC compiler. Another option is to use a reactive object as the state: `const state = reactive({ myVal: 10 })`, at which point you can just use `state.myVal`.
      • b0afc375b5 4y ago
        > In a new and currently experimental syntax, you can use `const myRef = $ref(10)`, Oh sweet didn't know that. I keep forgetting to type `.value` and debugging it wastes a couple of seconds here and there. https://vuejs.org/guide/extras/reactivity-transform.html#refs-vs-reactive-variables https://vuejs.org/guide/extras/reactivity-transform.html#ref...
        • oefrha 4y ago
          Huh, I forgot reactivity transform is already out! Meant to try it but didn't get the chance. Good thing I happen to be starting a new project today.
      • solardev 4y ago
        What is the `10` here? Is it a reference to the literal value `10`...?
        • rk06 4y ago
          It is just an initial value.
          • solardev 4y ago
            So ref is just a state variable with an initial value of 10? How do you mutate the variable/change the state?
            • rk06 4y ago
              No, $ref(10) will return a reactive object. And 10 will be the initial value of that object. You use the object the same way you use a js variable. let st = $ref(10) st = st + 1 // update it and use it like if it was just "10" But now, st is reactive.
              • solardev 4y ago
                Thank you for the explanation... I will have to learn a lot of basics, it looks like :)
    • preommr 4y ago
      In vue 2, objects are made reactive with getters/setters, so changing a field on an object can be tracked. That still exists in vue 3, but a separate api was needed for primitives like numbers or strings, without a parent object that they'be set to. Vue3's solution is to wrap it in a wrapper object called a ref, and to read it's value you have to use .value. It's a pretty simple concept. In svelte, top level variables are automatically reactive.
      • yawnxyz 4y ago
        Yes! This was exactly what I felt was more "natural" in Svelte. I also like Svelte's "writable store" model rather than React's Redux which forces data to flow a certain way, through the dispatcher. Svelte Stores make it a little too easy to "shoot yourself in the foot" if you're not too careful though, as you can make data bi-directional, and you can make children set parent data. This makes prototyping super easy and fast, but probably creates massive code readability problems down the line, especially for larger teams.
        • solardev 4y ago
          These days in reactland, you can easily get app-wide state using useContext (which is much MUCH simpler to work with than Redux). It's just a global store (well, or you can limit it to a certain part of the tree) that any child or sibling can read/write to at will. But just like you said, it can be a footgun if you're not careful.
          • acemarke 4y ago
            FWIW, Redux and Context are different tools that solve different problems, with some overlap. Context is a Dependency Injection tool for a single value, used to avoid prop drilling. Redux is a tool for predictable global state management, with the state stored outside React. Note that Context itself isn't the "store", or "managing" anything - it's just a conduit for whatever state _you_ are managing, or whatever other value you're passing through it (event emitter, etc). I wrote an extensive article specifically to answer this frequently asked question, including details about what the differences are between Context and Redux, and when to consider using either of them - I'd recommend reading through this: - https://blog.isquaredsoftware.com/2021/01/context-redux-differences/ https://blog.isquaredsoftware.com/2021/01/context-redux-diff...
    • oefrha 4y ago
      I'm talking about reactive references in the composition API; the options API is too different from Svelte to make a direct comparison. You can use reactive() to hide some .value's but they are more limited and I personally avoid them. There have been proposals to add more transformations to @vue/compiler-sfc to make refs more "magical" like Svelte.