【Svelte】-(2)reactivity响应式 | 赋值 / reactivity变量 / reactivity代码语句 / reactivity对象

简介: 【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>

0000.gif

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>

1111.gif

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>

111.gif

其实怎么写倒是无所谓,$: 后面加语句快就好,直接添加或者当函数$: {} 都行,其实各框架实现响应式原理差不多,之所以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等都需要使用后重新赋值才具备响应式。


目录
相关文章
|
5月前
|
JavaScript
Vue2使用全局函数或变量的两种常用方式
这篇文章介绍了在Vue 2项目中实现全局函数或变量的两种常用方式:一种是通过挂载到Vue的`prototype`,另一种是使用Vue的全局混入(Vue.mixin)。
690 0
Vue2使用全局函数或变量的两种常用方式
|
JavaScript
js立即执行函数
js立即执行函数
|
8月前
|
JavaScript 开发者
vue 中 mixin 和 mixins 区别
vue 中 mixin 和 mixins 区别
97 0
|
3月前
|
缓存 JavaScript Java
vue2知识点:混入mixins
vue2知识点:混入mixins
53 4
|
4月前
|
JSON JavaScript 前端开发
js原型继承|26
js原型继承|26
|
5月前
|
JavaScript
Vue3使用全局函数或变量的两种常用方式
这篇文章介绍了Vue 3中实现全局函数或变量的两种方法:一种是使用`provide/inject`进行依赖注入,另一种是利用`app.config.globalProperties`和`getCurrentInstance()`来注册全局属性。
1227 2
Vue3使用全局函数或变量的两种常用方式
|
5月前
|
JavaScript 前端开发
JS - 立即执行函数
这篇文章解释了JavaScript中的立即执行函数(IIFE,Immediately Invoked Function Expression)的概念和用法,它用于创建局部作用域以避免全局变量的污染。文中提供了多种立即执行函数的示例,展示了如何通过不同的语法结构立即调用函数。
46 0
|
6月前
|
存储 JavaScript 前端开发
vue3【实用教程】声明响应式状态(含ref,reactive,toRef(),toRefs() 等)
vue3【实用教程】声明响应式状态(含ref,reactive,toRef(),toRefs() 等)
147 0
|
6月前
|
JavaScript
vue 动态绑定方法
vue 动态绑定方法
37 0
|
8月前
|
JavaScript 小程序 前端开发
vue中的mixins混入使用方法
vue中的mixins混入使用方法

热门文章

最新文章