Enhance the tolerance of invalid data format

[Hanks10100]

See the two examples below, they are actually the same program but writen in different syntax.

• Using Weex (.we)
• Using Vue

They both rendered a list, and set this.lists.lengh++ in the mounted (and ready) intentially.

Because the this.lists[1] is undefined, which is an invalid data in the lists, it will cause an error when evaluating obj.name. However, despite the error Weex (.we) can still render the this.lists[2] correctlly, but the Vue 2.0 couldn't.

The simplified error stack is like this:

updateComponent() -> watcher.run() -> watcher.get() -> getter.call(vm)

The key reason for this problem is the watcher in Vue 2.0 is binding to the whole render function, every data change will re-run the render function. But in .we, the watcher is bind one-by-one to the specific element (as Vue 1.0 did).

The problem also exists on the web platform. It's not a bug, it's a feature in Vue 2.0. But This feature did troubled many Weex developers. The data fetched from the server is always unreliable in the real world. It's much better to tolerance the invalid data format in the framework. (or not ?)

@yyx990803 Do you have any advice to solve it?

[yyx990803]

In Vue 2, if the there is an Error in the render function, then the entire function fails to return, so there's no way to render other parts independently. However, in the upcoming 2.2 release there will be some improvements to error handling:

• If the repeated block is a component and the error happens in the child component, the parent will be able to successfully render.

• Users can make components with render errors show different output with the new renderError option. The following global mixin can be quite useful:

  Vue.mixin({
  renderError (h, err) {
    return h('div', { style: { color: 'red' }}, `render error:\n\n${err.stack}`)
  }
  })

[Hanks10100]

OK. I found this commit, it would very useful in practice. Besides, the developer should pay more attention to the data structure, validate it before rendering.