ensures sequential lifecycle ending in afterUpdate

src/runtime/internal/scheduler.ts

@@ -35,15 +35,18 @@ export function flush() {
 	const seen_callbacks = new Set();
 
 	do {
-		// first, call beforeUpdate functions
-		// and update components
-		while (dirty_components.length) {
-			const component = dirty_components.shift();
-			set_current_component(component);
-			update(component.$$);
-		}
-
-		while (binding_callbacks.length) binding_callbacks.pop()();
+		do {
+			// check dirty bindings first
+			while (binding_callbacks.length) binding_callbacks.pop()();
+
+			// then call beforeUpdate functions
+			// and update components
+			while (dirty_components.length) {
+				const component = dirty_components.shift();
+				set_current_component(component);
+				update(component.$$);
+			}
+		} while (binding_callbacks.length);
 
 		// then, once components are updated, call
 		// afterUpdate functions. This may cause

test/runtime/samples/binding-this-sequential-lifcycle-hooks/_config.js

@@ -0,0 +1,23 @@
+export default {
+	html: `<div>bind</div>`,
+
+	async test({ assert, component, target }) {
+		assert.equal(component.ref, target.querySelector('div'));
+		assert.equal(component.hooks[0], 'Before');
+		assert.equal(component.hooks.pop(), 'After');
+
+		while (component.hooks.length) component.hooks.pop();
+
+		component.bind = false;
+		assert.equal(component.ref, null);
+		assert.equal(component.hooks[0], 'Before');
+		assert.equal(component.hooks.pop(), 'After');
+
+		while (component.hooks.length) component.hooks.pop();
+
+		component.bind = true;
+		assert.equal(component.ref, target.querySelector('div'));
+		assert.equal(component.hooks[0], 'Before');
+		assert.equal(component.hooks.pop(), 'After');
+	}
+};

test/runtime/samples/binding-this-sequential-lifcycle-hooks/main.svelte

@@ -0,0 +1,15 @@
+<script>
+	// adapted from https://svelte.dev/repl/8a96e6e545244bff9fd0125b152d6840?version=3.6.9
+	import { afterUpdate, beforeUpdate, onMount } from 'svelte';
+
+	export let ref = null, bind = true, hooks = [];
+
+	// using push to not make hooks reactive
+  beforeUpdate(() => hooks.push('Before'))
+  afterUpdate(() => hooks.push('After'))
+	onMount(() => hooks.push('Mount'))
+</script>
+
+{#if bind}
+	<div bind:this={ref}>bind</div>
+{/if}