SSamplePage.js:444 Uncaught ReferenceError: fetchData is not defined
at onBtnClicked(SamplePage.js:444)
at onClick (Details.js:101)
at HTMLUnknownElement.callCallback (react-dom.development.js:149)
at Object.invokeGuardedCallbackDev (react-dom.development.js:199)
at invokeGuardedCallback (react-dom.development.js:256)
at invokeGuardedCallbackAndCatchFirstError (react-dom.development.js:270)
at executeDispatch (react-dom.development.js:561)

Version
2.6.10

Reproduction link
https://jsfiddle.net/80o2ef9w/

Steps to reproduce
Create an element and add style bind
ing:

<div :style="{'-webkit-clip-path': 'some values'}">example</div>
What is expected?
<div style="-webkit-clip-path: some values">example</div>
What is actually happening?
<div style="clip-path: some values">example</div>
In the docs, it is stated that Vue supposedly automatically adds vendor prefixes to CSS properties if it needs them, but not for clip-path. In Safari, the -webkit- prefix is required to be specified in order for it to work.

Version

2.6.10

Reproduction link

https://jsfiddle.net/vuetest/c5uw870y/3/

Steps to reproduce

1、click jsfiddle link
2、you will see result is {{msg}}，is incorrect

What is expected?

render template tag as html element, dom looks like that:

<div>
  <p>
    <template>
      #document-fragment
      <span>{{msg}}</span>
    </template>
  </p>
</div>

What is actually happening?

template tag disappeared

<div>
  <p>
    <span>{{msg}}</span>
  </p>
</div>

when v-pre used at the staticRoot, template render correctly, fixed by #8146. see this also: https://jsfiddle.net/vuetest/c5uw870y/5/

when v-pre does not used at the staticRoot, template tag will be skip, source code in vue/src/compiler/codegen/index.js is:

export function genElement (el: ASTElement, state: CodegenState): string {
  // ...
  } else if (el.tag === 'template' && !el.slotTarget && !state.pre) {
    // template tag run into here, directively render it's children instead of him
    return genChildren(el, state) || 'void 0'
  } // ...

how to slove this problem:

export function genElement (el: ASTElement, state: CodegenState): string {
  if (el.parent) {
    el.pre = el.pre || el.parent.pre; 
    // add this line
    state.pre = el.pre;
  }

I'm not familiar with creating pr with test, someone else can help me?

Version

2.6.10

Reproduction link

https://codepen.io/SamirGuo/pen/vYBezXz

Steps to reproduce

<div id="app">
<template>
  <div>
    <button @click="visible = !visible">显示/隐藏</button>
    <my-component :visible="visible" style="border-bottom: solid 1px #ccc" />
  </div>
</template>
</div>

const directive = {
    name: 'show',
    value: true
};

Vue.component('MyComponent', {
    props: {
        mystyle: '',
        visible: true
    },
    render(h) {
        directive.value = this.visible;
        return h('div', {
            // do not work!
            directives: [directive],
            // work well!
            // directives: [{
            //     name: 'show',
            //     value: this.visible
            // }],
            domProps: {
                innerText: 'sssssss'
            },
            style: this.mystyle
        });
    }
});


var Main = {
    data() {
      return { 
        visible: true
      };
    }
  };
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')

What is expected?

v-show to be applied

What is actually happening?

v-show isn't applied

When the instruction update logic assigns oldValue, oldVnode.data.directives ["show"] and vnode.data.directives ["show"] are actually the same object.
So dir.oldValue = oldDir.value is actually equivalent to dir.oldValue = dir.value; in the later update event, dir.oldValue === dir.value

Please prepare a runnable repro case (you can use https://codesandbox.io/ for this).

Version

2.6.10

Reproduction link

https://codesandbox.io/s/codesandbox-nuxt-vdcv8

Steps to reproduce

View page source

What is expected?

<textarea id="input-62" rows="5"></textarea>

What is actually happening?

<textarea id="input-62" rows="5">null</textarea>

Similar to #9231

Repro in vue/test/ssr/ssr-string.spec.js:

it('falsy domProps value', done => {
   renderVmWithOptions({
     render (h) {
       return h('div', [
         h('textarea', {
           domProps: {
             value: null
           }
         })
       ])
     }
   }, result => {
     expect(result).toContain(
       '<div data-server-rendered="true"><textarea></textarea></div>'
     )
     done()
   })
 })

Relevant vuetify code:
https://github.com/vuetifyjs/vuetify/blob/243a7c34a1c58dff3753ad35dded13ba5002c8eb/packages/vuetify/src/components/VTextarea/VTextarea.ts#L86-L92
https://github.com/vuetifyjs/vuetify/blob/243a7c34a1c58dff3753ad35dded13ba5002c8eb/packages/vuetify/src/components/VTextField/VTextField.ts#L357-L361

Docs Writing Resources
I specifically recommend that people should read through What Nobody Tells You About Documentation. It's a great post that gives excellent advice about the main categories of tech docs, and the type of content that should go in each category. The HN discussion thread on this post may be useful as well.

Additional resources worth reading:

The Four Layers to Great Documentation

• Writing Good Documentation for Your Open-Source Library
• Writing Documentation When You Aren't A Technical Writer
  • Part 1
  • Part 2
  • HN comment thread, with comments from Chrome writer Kayce Basques
• What to Write

A challenge with the React DevTools profiler is that it's too hard to correlate profiler results with console logs. This makes diagnosing and fixing render performance issues much more difficult.

For example, yesterday I was debugging an app where each render usually took 10ms-20ms except every 20-30 renders it'd take 600-800ms. It was frustrating that I didn't have a way to correlate the profiler UI (which told me which renders were problematic) with the verbose console log output that might tell me exactly what went wrong during those renders. Instead I had to comb through logs and guess which output came from "bad" renders. This was tedious and error-prone.

Anyway, my proposal is for React DevTools to make it easy to correlate profiler results with console log output. Both directions would be useful:

1. navigate from logs to profiler - if I see a suspicious line in the logs, I'd like to easily navigate to the profiler with the specific component/commit selected that was running when the line was logged.
2. navigate from profiler to logs - if I see a suspiciously long commit, I'd like to select it in the profiler pane and have an easy way to see associated logs.

I don't have a strong opinion about how this should be accomplished, but below are a few ideas to spur discussion.

A minimal solution could be something like this:
a) The profiler assigns a unique ID to each commit
b) The profiler's right pane would show the ID for each commit
c) React would add a new hook that'd return that ID
d) Userland code could include the ID in logs.

Just this minimal support would be a vast improvement.

If we wanted to make it smoother, here's a few ideas that could be layered on top.

1. Profiler->Console Links The ID in the profiler UI could be a hyperlink that'd open the console drawer and put the ID in the console's CMD+F search box. This would be one-click navigation from profiler to logs. I don't know if Chrome allows this kind of cross-pane control, over the console UI so this might not be practical.

2. Console -> Profiler Links For one-click logging in the other direction., we could have a special URL format (e.g. react://profiler/commit/2c1056b5-1be1-43d4-a105-1d840cf4f9c3) that would enable userland code to emit links in the console that, when clicked, would navigate to the specific commit (in the profile pane) that was active when the logs were emitted. Similar caveat as above: I'm not sure if chrome extensions can be "deeplinked" like this.

3. Log Components Where Building on (1) and (2) above, we could enable console<->profiler linking without requiring changes to userland code. We could have a profiler setting (e.g. "log components where" with UX like "hide components where") that, when active, would emit a line to the console log at the start of each render of a matching component. The output would link back to the profiler, e.g.
   [RDT] Starting MyCoolComponent (react://profiler/commit/2c1056b51be143d4a1051d840cf4f9c3).

What do you think? I'm unfamiliar with React and RDT internals so there might be much better ways to solve log<->profiler correlation than my naive ideas above. But at least I wanted to call out the problem and encourage discussion about a solution.

I try to end each of my blog posts with a "Further Information" section that includes links mentioned earlier in the page, and also has additional links to relevant articles and resources. I'd love it if we could add this type of info to each of our existing docs pages.

As a starting point: the "Structuring Reducers" docs section has a page called "Prerequisite Concepts" that links to some selected articles on topics like immutable data and normalization. However, the other pages in that section don't specifically reference those links. A few of those links could be added to the bottom of each page in the "Structuring Reducers" section, as appropriate.

I have no idea why lodash is trying to set toString on returned methods, it doesn't seem to give much and can only IMHO trip people up. Maybe it's worth reporting this to them as from what I see they are refactoring the codebase right now, presumably getting ready to release v5 (this is just my guess) - so maybe you could raise that issue there (not this specific one, as they probably dont care about redux-saga, but rather the fact that they override toString and would be good to know why).

### What problem does this feature solve?
An event modifier to support passive events was added in #5132.

In the last couple of years, browsers have adopted the passive behavior by default fortouchstartand touchmove events (reference). Thus, to be able to cancel one of these events by calling e.preventDefault(), you need to explicitly pass { passive: false } when adding the event listener.

With the current API this is impossible to achieve in a Vue template (as far as I can tell). You must manually add and remove the event listener in a component hook like so:

this.$refs.someElement.addEventListener('touchstart', this.start, { passive: false });
this.$refs.someElement.addEventListener('touchmove', this.move, { passive: false });

// later
this.$refs.someElement.removeEventListener('touchstart', this.start);
this.$refs.someElement.removeEventListener('touchmove', this.move);

### What does the proposed API look like?
An event modifier that does the opposite of the passive event modifier, specifying the option as false instead of true.

Unsure of the naming - perhaps nonPassive, active, assertive, intentional.

<div
  @touchstart.active="start"
  @touchmove.active="move"
></div>