【Svelte】-（2）reactivity响应式 ｜ 赋值 / reactivity变量 / reactivity代码语句 / reactivity对象

reactivity 于 Svelte （赋值）

reactivity 系统 即反应性或者响应式。

在Vue中是 ref 或者 reactive ，在React中是 useState 。
在Svelte中则十分简洁，终于可以摆脱Hooks了（虽然我也很爱Hooks）

Svelte 的内核是一个强大的 reactivity 系统，能够让 DOM 与你的应用程序状态保持同步，例如，事件响应。

就像这行代码

<button on:click={increment()}></button>

在 increment 函数内部，我们需要做的只是改变 count 的值：

<script>
  let count = 1
  const increment = () => count+=1
</script>

<button on:click={increment}>
  Clicked {count}
</button>

Svelte 用一些工具代码就能知道 DOM 需要更新。

声明reactivity变量

Svelte 的 reactivity 不仅使 DOM 与应用程序的变量保持同步，它还可以使用 reactivity 声明使变量彼此保持同步。

通过这种方法，只要参考值变化了就重新运行此代码

$: isOdd = count % 2 === 1;

虽然看着怪，但其实习惯就好，毕竟语法就是得习惯… , 比起用 computer / watch 又或者是写Hooks，其实我还蛮喜欢的，停不下。

<script>
  let count = 0
  $: isOdd = count % 2 === 1
  const increment = () => count++
</script>

<button on:click={increment}>
  Clicked {count} is {isOdd ? 'odd' : 'even'}
</button>

reactivity代码语句

Svelte不限于声明响应式值，可以响应式地运行任意语句。

例如，我们可以在count它发生变化时记录它的值：

<script>
  let count = 0
  $: isOdd = count % 2 === 1
  const increment = () => count++
  $: console.log('count', count)
</script>

<button on:click={increment}>
  Clicked {count} is {isOdd ? 'odd' : 'even'}
</button>

其实怎么写倒是无所谓，$: 后面加语句快就好，直接添加或者当函数$: {} 都行，其实各框架实现响应式原理差不多，之所以Svelte这么独特就取决于，我认为它更像编译器，而不是语言框架或者js库。

reactivity对象

不过我认为语法有点冗余的是，在更新对象的时候需要重新赋值，当然之所以这么设计肯定是有理由的。
例如你需要这样写

<script>
  let arr = {
    value: [0]
  }
  function add() {
    arr.value.push(1)
    arr = arr // !! 重新赋值
  }
</script>

或者这样

<script>
  let arr = {
    value: [0]
  }
  function add() {
  	arr = [...arr, 1]
  }
</script>

你必须对整个对象重新赋值才会生效，如pop,shift和 ，splice以及对象方法，如Map.set,Set.add等都需要使用后重新赋值才具备响应式。