search

vuejs / vue

This is the repo for Vue 2. For Vue 3, go to https://github.com/vuejs/core
http://v2.vuejs.org
MIT License
207.76k stars 33.66k forks source link

dev inspector shows pre-compiled vue dom #1057

Closed mark-hahn closed 9 years ago

mark-hahn commented 9 years ago

Does anyone know why the dev inspector in chrome would show this?

<div class="show-right-comp" cur-tags="[object Object]" show-in-list="function (a) {
    var l = arguments.length
    return l
      ? l > 1
        ? fn.apply(ctx, arguments)
        : fn.call(ctx, a)
      : fn.call(ctx)
  }" cur-show="[object Object]" cur-show-idx="32" all-shows="[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]" filter-tags="[object Object]" page-mode="select"><div class="show-list-comp" show-in-list="function (a) {
    var l = arguments.length
    return l
      ? l > 1
        ? fn.apply(ctx, arguments)
        : fn.call(ctx, a)
      : fn.call(ctx)
  }" filter-tags="[object Object]" cur-show="[object Object]" cur-show-idx="32" all-shows="[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]" page-mode="select"><div class="show-list-inner"><!--v-repeat-start--><div class="show" style="display: none;">About a Boy</div><div class="show" style="display: none;">The Affair</div><div class="show" style="display: none;">After You've Gone</div><div class="show" style="display: none;">Alpha House</div><div class="show" style="display: none;">American Crime</div><div class="show" style="display: none;">Anger Management</div><div class="show">Another Period</div><div class="show" style="display: none;">Apocalypse Code the Bible Prediction</div><div class="show" style="display: none;">Archer (2009)</div><div class="show">Armstrong and Miller</div><div class="show" style="display: none;">Backstrom</div><div class="show" style="display: none;">Bad Education</div><div class="show" style="display: none;">Bad Judge</div><div class="show">Ballers</div><div class="show" style="display: none;">Ballot Monkeys</div><div class="show" style="display: none;">Banished</div><div class="show" style="display: none;">Battle Creek</div><div class="show">Benidorm</div><div class="show">Big Bad World</div><div class="show" style="display: none;">The Big Bang Theory</div><div class="show" style="display: none;">Big School (2013)</div><div class="show">Black Mirror</div><div class="show">The Blacklist</div><div class="show" style="display: none;">Bluestone 42</div><div class="show" style="display: none;">Bob Servant Independent</div><div class="show" style="display: none;">Bob's Burgers</div><div class="show" style="display: none;">BoJack Horseman</div><div class="show" style="display: none;">Bosch</div><div class="show" style="display: none;">Breaking Bad</div><div class="show">Breaking Greenville</div><div class="show">The Brink</div><div class="show" style="display: none;">Broad City</div><div class="show selected">Brooklyn Nine-Nine</div><div class="show" style="display: none;">Buffy the Vampire Slayer</div><div class="show" style="display: none;">Cardinal Burns</div><div class="show" style="display: none;">Castle (2009)</div><div class="show" style="display: none;">Castle Builders</div><div class="show" style="display: none;">The Castle Builders</div><div class="show">The Casual Vacancy</div><div class="show">Catastrophe (2015)</div><div class="show" style="display: none;">Catterick</div><div class="show" style="display: none;">Chalk</div><div class="show" style="display: none;">Charlie Brooker's Weekly Wipe</div><div class="show">Class Act Series 1</div><div class="show" style="display: none;">Clipped</div><div class="show">Cockroaches</div><div class="show" style="display: none;">The Comeback</div><div class="show">The Comedians</div><div class="show" style="display: none;">Comedians in Cars Getting Coffee</div><div class="show" style="display: none;">Coming of Age (2008)</div><div class="show">Community</div><div class="show" style="display: none;">Constantine</div><div class="show" style="display: none;">Count Arthur Strong</div><div class="show" style="display: none;">Cristela</div><div class="show" style="display: none;">Crowded</div><div class="show">The Delivery Man</div><div class="show" style="display: none;">Drifters</div><div class="show">Drunk History</div><div class="show" style="display: none;">Drunk History (UK)</div><div class="show" style="display: none;">Episodes</div><div class="show">The Exes</div><div class="show" style="display: none;">The Exes S04 Web Dl Aac2 0</div><div class="show" style="display: none;">Family Guy</div><div class="show" style="display: none;">Fargo</div><div class="show" style="display: none;">Flight of the Conchords</div><div class="show" style="display: none;">The Following</div><div class="show">Forever (2014)</div><div class="show" style="display: none;">Fresh Off the Boat</div><div class="show">Friends of the People</div><div class="show" style="display: none;">Game Face</div><div class="show" style="display: none;">Getting On</div><div class="show">Getting On (US)</div><div class="show">Girlfriends' Guide to Divorce</div><div class="show" style="display: none;">Give Out Girls</div><div class="show" style="display: none;">Give Out Girls S01 Web Dl Aac2 0</div><div class="show">Gotham</div><div class="show">Grace and Frankie</div><div class="show">Ground Floor</div><div class="show" style="display: none;">The Guardian</div><div class="show">Halt and Catch Fire</div><div class="show" style="display: none;">HAPPYish</div><div class="show">Heartburn Hotel</div><div class="show" style="display: none;">Hello Ladies</div><div class="show" style="display: none;">Hindsight</div><div class="show" style="display: none;">Hindsight (2015)</div><div class="show" style="display: none;">The Hitchhiker's Guide to the Galaxy</div><div class="show">Hoff the Record</div><div class="show" style="display: none;">The Honourable Woman</div><div class="show">Hot in Cleveland</div><div class="show" style="display: none;">The House That Jack Built</div><div class="show">How to Get Away with Murder</div><div class="show">Humans</div><div class="show" style="display: none;">I Live With Models</div><div class="show" style="display: none;">Impastor</div><div class="show" style="display: none;">In and Out of the Kitchen</div><div class="show" style="display: none;">Inside Amy Schumer</div><div class="show">Inside No. 9</div><div class="show" style="display: none;">Intelligence (2014)</div><div class="show">The Interceptor</div><div class="show" style="display: none;">The IT Crowd</div><div class="show" style="display: none;">It's a Date</div><div class="show">It's Always Sunny in Philadelphia</div><div class="show">It's Kevin</div><div class="show">iZombie</div><div class="show">The Jack and Triumph Show</div><div class="show">Jane the Virgin</div><div class="show" style="display: none;">The Jim Gaffigan Show</div><div class="show">The Job Lot</div><div class="show" style="display: none;">The Last Man on Earth</div><div class="show">Last Man Standing (2011)</div><div class="show">Louie (2010)</div><div class="show" style="display: none;">Love/Hate</div><div class="show">Lunch Monkeys</div><div class="show">Luther</div><div class="show">Madam Secretary</div><div class="show">Man Seeking Woman</div><div class="show" style="display: none;">Manhattan Love Story</div><div class="show" style="display: none;">Manhattan Love Story (2014)</div><div class="show">Mapp and Lucia (2014)</div><div class="show" style="display: none;">Married</div><div class="show" style="display: none;">Married At First Sight: The First Year</div><div class="show" style="display: none;">Married to Medicine</div><div class="show">The McCarthys</div><div class="show">The Mentalist</div><div class="show">The Middle</div><div class="show">Mike &amp; Molly</div><div class="show">The Mindy Project</div><div class="show">Miranda</div><div class="show">Modern Family</div><div class="show">Mom</div><div class="show">Mr. Robot</div><div class="show" style="display: none;">Murder In Successville </div><div class="show">Murder Most Horrid</div><div class="show" style="display: none;">My Mad Fat Diary</div><div class="show" style="display: none;">The Mysteries of Laura</div><div class="show" style="display: none;">Mystery Science Theater 3000</div><div class="show">Nathan Barley</div><div class="show" style="display: none;">New Girl</div><div class="show">The New Statesman</div><div class="show" style="display: none;">Newsreaders</div><div class="show" style="display: none;">Nick Helm's Heavy Entertainment</div><div class="show">No Offence</div><div class="show" style="display: none;">Not Going Out</div><div class="show">Not Safe for Work (2015)</div><div class="show">Number 2s</div><div class="show">Nurse (2015)</div><div class="show" style="display: none;">Nurse Jackie</div><div class="show">The Odd Couple (2015)</div><div class="show" style="display: none;">Off the Hook</div><div class="show">The Old Guys</div><div class="show">One Big Happy</div><div class="show" style="display: none;">Orange Is the New Black</div><div class="show">Other Space</div><div class="show">Peep Show</div><div class="show" style="display: none;">Playhouse Presents</div><div class="show">Playing House</div><div class="show" style="display: none;">Pokémon</div><div class="show" style="display: none;">Pompidou</div><div class="show" style="display: none;">Porkpie</div><div class="show">Project Runway All Stars</div><div class="show" style="display: none;">Psig Wp</div><div class="show">Psychobitches</div><div class="show">Pulling</div><div class="show" style="display: none;">Raised by Wolves</div><div class="show" style="display: none;">Review</div><div class="show">Rick and Morty</div><div class="show">Rizzoli &amp; Isles</div><div class="show">Robot Chicken</div><div class="show">Roman's Empire</div><div class="show" style="display: none;">The Royals</div><div class="show" style="display: none;">Russell Howard's Good News</div><div class="show" style="display: none;">Saturday Night Live</div><div class="show" style="display: none;">Schitt's Creek</div><div class="show">Scrotal Recall</div><div class="show" style="display: none;">Selfie</div><div class="show">Shameless (US)</div><div class="show">Sherlock</div><div class="show">Siblings</div><div class="show">Silicon Valley</div><div class="show" style="display: none;">Sin City Saints</div><div class="show">Sin City Saints S01 Yhoo</div><div class="show">The Sketch Show</div><div class="show" style="display: none;">The Smoking Room</div><div class="show" style="display: none;">Some Girls</div><div class="show">The Soup</div><div class="show">South Park</div><div class="show" style="display: none;">The Spa</div><div class="show">Step Dave</div><div class="show">SunTrap</div><div class="show">Super Fun Night</div><div class="show">That Mitchell and Webb Look</div><div class="show" style="display: none;">This is Jinsy</div><div class="show">Titty Bang Bang</div><div class="show">Toast of London</div><div class="show" style="display: none;">Togetherness</div><div class="show">Top of the Pops (UK)</div><div class="show" style="display: none;">Triptank</div><div class="show">Trollied</div><div class="show">True Detective</div><div class="show">Trying Again</div><div class="show">Unbreakable Kimmy Schmidt</div><div class="show">Uncle</div><div class="show">Undateable (2014)</div><div class="show" style="display: none;">Undercover</div><div class="show">Vicious</div><div class="show" style="display: none;">Viral Tap</div><div class="show">Wayward Pines</div><div class="show" style="display: none;">Web Therapy</div><div class="show" style="display: none;">Web Therapy (2011)</div><div class="show">Weird Loners</div><div class="show">White Collar</div><div class="show">Workaholics</div><div class="show">The Worst Week of My Life</div><div class="show" style="display: none;">The Wrong Mans</div><div class="show" style="display: none;">You're the Worst</div><div class="show" style="display: none;">Younger</div><div class="show" style="display: none;">Your Family or Mine</div><!--v-repeat-end--></div><div class="alpha" style="display: none;"><!--v-repeat-start--><div class="letter btn">A</div><div class="letter btn">M</div><div class="letter btn">B</div><div class="letter btn">N</div><div class="letter btn">C</div><div class="letter btn">O</div><div class="letter btn">D</div><div class="letter btn">P</div><div class="letter btn">E</div><div class="letter btn">R</div><div class="letter btn">F</div><div class="letter btn">S</div><div class="letter btn">G</div><div class="letter btn">T</div><div class="letter btn">H</div><div class="letter btn">U</div><div class="letter btn">I</div><div class="letter btn">V</div><div class="letter btn">J</div><div class="letter btn">W</div><div class="letter btn">L</div><!--v-repeat-end--></div></div><!--v-component--><div class="tag-list-comp" cur-tags="[object Object]" cur-show="[object Object]" page-mode="select" style="display: none;"><div class="tag-hdr" style="display: none;">Tags For: Brooklyn Nine-Nine</div><div class="tag-hdr" style="display: none;">Filter Show List</div><!--v-repeat-start--><div class="tag">Foreign</div><div class="tag">Comedy</div><div class="tag">Drama</div><div class="tag">Crime</div><div class="tag">MarkOnly</div><div class="tag">LindaOnly</div><div class="tag">Favorite</div><div class="tag">OnTheFence</div><div class="tag" style="display: none;">New</div><div class="tag" style="display: none;">LessThan3</div><div class="tag" style="display: none;">Watched</div><div class="tag">Archive</div><div class="tag">Deleted</div><!--v-repeat-end--></div><!--v-component--><div class="two-btns" rgt-btn-txt="Alpha" lft-btn-txt="Filter"><div class="btn">Filter</div><div class="btn">Alpha</div></div><!--v-component--></div>

This looks to me like the vue DOM before compiling, not the running DOM. The strange part is that the code still works. I guess all the garbage attributes don't hurt anything.

This makes debugging very hard.

ubuntu 14.0.4 chrome 43.0.2357.132 (64-bit)

mark-hahn commented 9 years ago

It occurs to me that this also means the DOM is much bigger than it needs to be which is a performance issue. I have an array of about 1000 objects passed to a lot of components and it creates an enormously long attribute value in a number of places in the DOM.

yyx990803 commented 9 years ago

What version of Vue are you using?

mark-hahn commented 9 years ago

0.12.7

This has been happening for at least a month: #185

yyx990803 commented 9 years ago

That's weird, all props and directives should be removed after compilation. I've never seen this before... maybe something to do with linux Chrome?

mark-hahn commented 9 years ago

Maybe. Can you give me some pointer on how to debug this? Like where the removal happens in your code? I've read your code and it is very clean.

On Fri, Jul 17, 2015 at 5:19 AM, Evan You notifications@github.com wrote:

That's weird, all props and directives should be removed after compilation. I've never seen this before... maybe something to do with linux Chrome?

— Reply to this email directly or view it on GitHub https://github.com/yyx990803/vue/issues/1057#issuecomment-122258881.

yyx990803 commented 9 years ago

It's removed here: https://github.com/yyx990803/vue/blob/dev/src/compiler/compile-props.js#L56

mark-hahn commented 9 years ago

Apparently this only happens when you put an attribute in a component and then don't include that attribute in the component's props list. I can see how this happens. I assume you are just doing .toString on all unused attributes.

So I know how to fix this now. I guess it is good for this to happen since it acts as a warning that an attribute is unused.