yyx990803

<div id="app">
  <button id="reset">reset</button>
  <button id="outer">no leak</button>
  <div id="container">
    <button id="inner">leak</button>
    <span>1</span>
    <span>2</span>
    <span>3</span>
    <span>4</span>
    <span>5</span>

yyx990803

title	date	author	gravatar	twitter	hidden
Vue 3 将成为新的默认版本	2022-01-20	尤雨溪	eca93da2c67aadafe35d477aa8f454b8	@youyuxi	true

划重点：Vue 3 将在 2022 年 2 月 7 日成为新的默认版本！

yyx990803

Features

• Migration Build
• compiler-core: whitespace handling strategy (dee3d6a)
• support component-level compilerOptions when using runtime compiler (ce0bbe0)
• config: support configuring runtime compiler via app.config.compilerOptions (091e6d6)
• support casting plain element to component via is="vue:xxx" (af9e699)
• devtools: improved KeepAlive support (03ae300)
• devtools: performance events (f7c54ca)
• onServerPrefe

yyx990803

P4 (13)

• scope Id should not be attached to the Rules in the keyframes
• fix the detection of forwarded slots
• adapt keepalive to ssr
• toggling branches with in-out mode should be transitioned correctly
• custom dom props should be cloned when cloning a hoisted DOM
• respect the mixed render function in ssr
• component with multi roots should be removed when unmounted, Its accompanying PR that needs to be dealt with first is #2870: targetAnchor should also be removed when unmounted
• keep the order of imports expression for the fallback branch of SSR

yyx990803

// example vite.config.js
import { cdn } from './vite-plugin-cdn'

export default {
  plugins: [
    // also supported: esm.run, jspm
    // loads the dep over the CDN during dev
    // auto downloads and includes into the bundle during build
    cdn('skypack', {
      vue: '^3.0.5'

yyx990803

<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

/* 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

<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>

yyx990803

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 = {

yyx990803

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()
  }
}