一文详解Vue中响应式原理

本篇文章带大家学习Vue,深入了解Vue中响应式原理,希望对大家有所帮助!

一文详解Vue中响应式原理

以此文纪念将要逝去的响应式语法糖

废话不多说,直接进入正题,响应式在日常开发中的应用是很常见的,这里举个简单的例子:

let a=3 let b=a*10 console.log(b)//30 a=4 console.log(b)//40
登录后复制

这时候我们想让b=4*10,这样显然是不行的,即使我们在前面加上个var也只会发生变量提升,我们所给的值并不会提升。

而这个时候,响应式的作用就体现出来了:

import { reactive } from 'vue'  let state = reactive({ a: 3 }) let b = computed(() => state.a * 10) console.log(b.value) // 30 state.a = 4 console.log(b.value) // 40
登录后复制

只需要一个简单的响应式API便可实现跟踪变化的效果。【

© 版权声明
THE END
喜欢就支持一下吧
点赞11 分享
评论 抢沙发