Reactivity for Arrays & Objects in Vue vs. Svelte

Coming from the Vue world, Reactivity in Svelte for anything more than simple strings feels.. a bit different.

Vue has made me lazy when handling reactive arrays or objects.

All I have to do with the older Object API is -

1
2
3
4


// nums: [1, 2]
addToNum() {
  this.nums.push(this.nums.length + 1);
}

Directly modifying an element (e.g. this.nums[1] = 'a') would not work though, and that was perfectly fine.

It is more tricky for objects - this.planets["jupiter"] = 5 will not trigger reactivity. We could work around this by this.planets = { ...this.planets, jupiter: 5 }. (Or, use $add if you are weird).

In Composition API, this seemingly became simpler and, verbose?..

From the example in Vue docs ..

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22


<template>
  <div v-for="(item, i) in list" :ref="el => { if (el) divs[i] = el }">
    {{ item }}
  </div>
</template>
<script>
  import { ref, reactive, onBeforeUpdate } from 'vue'

  export default {
    setup() {
      const list = reactive([1, 2, 3])
      const divs = ref([])
      onBeforeUpdate(() => {
        divs.value = []
      })
      return {
        list,
        divs
      }
    }
  }
</script>

Jumping back to Svelte, simple variables work as easily.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


<script>
  let clicks = 0;
  function addNumber() { 
    clicks += 1;
  }
<script>

<button on:click={addNumber}>
	Add a number
</button> {clicks}

But we cannot simply drop-in anything more complicated.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16


<script>
  let clicks = 0;
  let numbers = [1, 2, 3, 4];
  function addNumber() { 
    clicks += 1;
    numbers.push(numbers.length + 1); 
    // will change array, but not trigger reactivity
  }
<script>

<p>{numbers.join(' + ')} = {sum}</p>

<button on:click={addNumber}>
	Add a number
</button>
{count}

An additional statement will fix the problem -

1
2
3
4


function addNumber() {
	numbers.push(numbers.length + 1);
	numbers = numbers;
}

Or, do this -

1

	numbers = [...numbers, numbers.length + 1];

The below code also works, but I feel somewhat bad using it -

1

numbers [numbers.length] = numbers.length + 1;

Variables dependent on other variables need special treatment -

From the example in Svelte docs -

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14


<script>
	let numbers = [1, 2, 3, 4];

	function addNumber() {
		numbers.push(numbers.length + 1);
	}
	$: sum = numbers.reduce((t, n) => t + n, 0);
</script>

<p>{numbers.join(' + ')} = {sum}</p>

<button on:click={addNumber}>
	Add a number
</button>

Objects work in a similar way as arrays. Assignment to a variable on the left hand side will trigger reactivity for that variable -

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19


<script>
let numObj = {1:1, 2:2, 3:3, 4:4};
let clicks = 0;

function addNumber() {
	let nxtNum = Object.values(numObj)[Object.keys(numObj).length-1] + 1;
  numObj [nxtNum]= nxtNum; //this!
	clicks += 1;
}
</script>

<p>
	{Object.entries(numObj)}
</p>

<button on:click={addNumber}>
	Add a number
</button>

However, the below will not work as-is -

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16


<script>
let planet = {earth: {postn:3}};
const earth = planet.earth;

function addColor() {
	earth.color="blue";
}
</script>

<p>
{JSON.stringify(planet)}	
</p>

<button on:click={addColor}>
	Add Color
</button>

Add a line to trigger reactivity -

1
2
3
4


function addColor() {
	earth.color="blue";
	planet = planet;
}

Object API was intuitive. But, I think I prefer the Svelte solution in comparison with the Composition API in Vue.

Reactivity for Arrays & Objects in Vue vs. Svelte

See Also