Skip to content

Instantly share code, notes, and snippets.

Avatar

Evan You yyx990803

View GitHub Profile
View App.vue
<template>
<div class="jumbotron">
<div class="row">
<div class="col-md-6">
<h1>Vue.js 3.0.0-alpha4 (keyed)</h1>
</div>
<div class="col-md-6">
<div class="row">
<div class="col-sm-6 smallpad">
<button type="button" class="btn btn-primary btn-block" id="run" @click="run">Create 1,000 rows</button>
@yyx990803
yyx990803 / svelte.js
Last active Dec 8, 2019
Svelte/Vue generated code size comparison of the TodoMVC implementation. Note: (1) imports are replaced with a const declaration to enable compression. (2) The comparison is between components' "own code" and doesn't include imported runtime code.
View svelte.js
/* App.svelte generated by Svelte v3.14.1 */
/* After terser compression: min:6.00kb / gzip:2.43kb / brotli:2.15kb */
const {
SvelteComponent,
append,
attr,
destroy_block,
detach,
element,
empty,
@yyx990803
yyx990803 / commits.vue
Last active Sep 11, 2020
Vue examples comparisons in 2.x and function-based APIs
View commits.vue
<template>
<div id="demo">
<h1>Latest Vue.js Commits</h1>
<template v-for="branch in branches">
<input type="radio"
:id="branch"
:value="branch"
name="branch"
v-model="currentBranch">
<label :for="branch">{{ branch }}</label>
View 2.6-scoped-slot-return-values.md

2.6 Internal Change: Scoped Slot Function Return Value

This change only affects render function users. If you only use templates, you can ignore this change.

The Problem

In render functions, scoped slots are exposed on this.$scopedSlots as functions. Up until now, calling a scoped slot function can return a single VNode or an Array of VNodes based on what the parent component is passing in. For example, given this component:

const Child = {
View async-error.js
export default {
async mounted() {
// if an async error is thrown here, it now will get
// caught by errorCaptured and Vue.config.errorHandler
this.posts = await api.getPosts()
}
}
View esm.html
<script type="module">
import Vue from 'https://unpkg.com/vue/dist/vue.esm.browser.js'
new Vue({
// ...
})
</script>
View observable.js
const reactiveState = Vue.observable({
count: 0
})
View dynamic-directive-argument.html
<div v-bind:[attr]="value"></div>
<div :[attr]="value"></div>
<button v-on:[event]="handler"></button>
<button @[event]="handler"></button>
<my-component>
<template v-slot:[slotName]>
Dynamic slot name
</template>
View slot-example.html
<my-component>
<template v-slot:header>
<p>Header</p>
</template>
<template v-slot:item="{ data }">
<h2>{{ data.title }}</h2>
<p>{{ data.text }}</p>
</template>
View reverting-to-microtask.md

2.6 Internal Change: Reverting nextTick to Always Use Microtask

The Original Problem

When Vue detects data mutation, it asynchronously defer DOM updates to the next "tick" so that multiple mutations trigger only one update cycle. In versions before 2.5, Vue has been deferring updates using what is known as the "Microtask" (as explained in this blog post).

This works fine in most situations, but we discovered an edge case:

  1. Given two nested elements, "outer" and "inner";
  2. "inner" has a click event handler which triggers an update
You can’t perform that action at this time.