Javascript响应式的最通俗易懂的解释(译)

许多javascript框架(比如:Angular,React,以及Vue)都有它们自己的响应式引擎。我们如果理解了响应式的原理,搞清楚它们是怎么工作的,我们可以提高自己的编程技巧,更有效的使用JavaScript框架。下面的视频和内容,将会帮助我们实现一个与Vue一样的响应式引擎。

响应式系统

 

当我们第一次看见Vue响应式系统工作的时候,感觉它就像充满了魔法一样。 现在我们举一个简单的例子

<div id="app">
    <div> Price :${{price}} </div>
    <div> Total:${{price * quantity}} </div>
    <div> Taxes: ${{totalPriceWithTax}} </div>
</div>

 

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
  var vm = new Vue({
     el:"#app",
    data:{
       price:5.00,
       quantity:2
    },
    computed:{
        totalPriceWithTax(){
              return this.price * this.quantity * 1.03
        }
    }
  })
</script>

不知道为什么,当price 发生变化的时候,Vue就知道自己需要做三件事情:阅读 “Javascript响应式的最通俗易懂的解释(译)”

发表评论