Planned deprecations / breaking changes in 1.0-beta

[yyx990803]

Update: This post will no longer be updated. For up-to-date progress, see proposal tracking in core

---

As I've mentioned in various occasions, 0.12 is planned to be the last point release before 1.0. There is not going to be huge changes in 1.0 - it basically means the API has stabilized and is production ready. However, there will be a few deprecations / small breaking changes. I am posting them here so the community can provide feedback (note 1.0 doesn't mean we will not be adding new features, it means we will try hard to avoid breaking changes).

Planned deprecations/breaking changes in 1.0-beta:

• $add() will be deprecated in favor of $set(). The behavior of $add() is a bit confusing and it's just simpler to always use $set().
• v-repeat will always require an alias. This has a few benefits:
  1. consistency
  2. easier to read templates
  3. easier internal implementations, slightly better performance
  4. avoid edge cases where a component's default state can be overwritten by a v-repeat with no identifiers.
• All components will default to "strict" mode, in which they only inherit assets from the inheritance chain (via Vue.extend), but not from view composition. This means child components no longer inherit assets from their parents in the view hierarchy; assets are either registered globally, or explicitly depended on by the component that needs them. This results in better encapsulated components.
• wait-for can potentially be deprecated by making the data function accept asynchronously resolved data. (e.g. returning a Promise) by introducing a new lifecycle hook that controls the insertion timing of dynamic components.
• <content select="..."> will be deprecated in favor of <slot name="...">. For details see #298.

Note this is just a tentative plan, it's subject to change any time before actual work starts for 1.0.

[holic]

Since v-repeat is going to soon require an identifier, I thought I'd bring this up.

I always thought the identifier syntax was a bit unnatural given how natural Vue feels in general. I usually need to look it up to make sure I have my variables on the correct sides of the colon. Does the syntax pull from anything in particular? Or is it this way because of the standard directive expression parser?

I'm curious if implementing an expression syntax like v-repeat="item in array" to get this directive to feel more familiar and Javascript-like would be considered.

[yyx990803]

@holic that's probably a good idea ;)

[azamat-sharapov]

+1 for item in array syntax and async data!

Evan, I was wondering about $context thing (like on React), you know when you want to pass data from root component to sub-sub-sub child component. That's the only verbose thing I am currently having on apps. Do you think I should consider changing my apps' architecture (recommendations appreciated) or $context makes sense for you? It doesn't have to be $context, but something that makes it easier to pass data from some parent component to it's children's children..

[arrilot]

+1 for item in array too. The current syntax is really confusing when you start using Vue and I agree it's kinda unnatural because in real life we use colon in opposite way fruits: apples, oranges, bananas Angular-like syntax proposed by @holic is also consistent with filterBy searchText in name. It's a huge BC break though.

I also want to say that I'm not a fan of making identifiers required in v-repeat. I find using it without an identifier very convenient in many cases. As a developer I would like to have that choice. On the other hand I can't really judge about internal problems and edge-cases. You may definately have strong reasons here.

[jwondrusch]

+1 for item in array.

I also would appreciate the $context type connection @azamat-sharapov mentioned :)

Is there a tentative timeline for the release of 1.0?

[thelinuxlich]

+1 for @holic suggestion

[kazupon]

+1 for item in array me too.

[thelinuxlich]

What is the reason of prop array syntax deprecation? API consistency?

[simplesmiler]

+1 for item in array, current array: item confuses me every time I use v-repeat.

On the "restricting asset inheritance" thing, I feel like this will hurt the usability of dynamic v-component quite a bit.

[butsalt]

@simplesmiler Actually it is item: array.
In Vue's compiling mechanism for directive( including v-repeat ), the string before the colon will be regarded as an exclusive argument for target directive, and the rest part will be regarded as an expression for its nested watcher.
To be honest, I don't like item in array. Because this usage might ruin the directive expression syntax which has been used for a long time as I mentioned before. Why v-repeat could be more special than any other directives? In my opinion, what we really need is the solution for directive which needs more than one argument and we should be able to clearly understand every argument's usage in this solution.
For v-repeat, we must use expression, identifier. And we can use trackBy optionally. How things will go if we think in this way?

[simplesmiler]

@butsalt yep, just confused me once more.

[nirazul]

I'm no fan of item in array either. It's too verbose for my taste and I can't grasp in one blink of an eye, what in means. In every other directive, words have the meaning of variable (or they are strings).

What if we use a syntax like that: <div v-repeat="myArray" iterate-as="item" track-by="uid">?

positive

• The syntax benefits from html syntax highlighting
• It'd be more in line with other directives.

negative

• More code

[jwondrusch]

@Nirazul While I like some of your examples (such as track-by), you tripled the number of parameters required, hence being more "verbose" :dancer:

[nirazul]

As I'm no native speaker I've misused the word "verbose", i guess 😅 What I really meant, was that normally, every word in a directive has a meaning. When introducing a syntax like item in array, the in blurs this line. But to be honest, this is a small detail :)

[successamp]

+1 for "item in array". I often had to double check which was first.

[nirazul]

While looking at the example for a select filter again (https://github.com/vuejs/Discussion/issues/235), I was thinking, maybe this is also a good solution for v-repeat as a built in filter:

<div v-repeat="myArray | as: 'item' ">

[desicochrane]

+1 for item in array