vue.js响应式数据更新系统(四)

    技术2022-07-11  85

    每个 Vue应用都是通过 Vue函数创建一个新的Vue实例开始的。

    var vm = new Vue({ .... })

    vue 没完全遵守mvvm模型,但也收到此模型的启发而设计,故常用vm(viewmodel)代表vue变量。

    数据与方法

    当一个Vue实例被创建时,它将data对象中的所有的属性加入到Vue的响应式系统中。当这些属性的值发生改变时,视图会产生“响应”,即匹配更新为最新值。

    <div id="app"> {{a}} </div> <script type="text/javascript"> var data = { a : 1 }; var vm = new Vue({ el : "#app", data : data }); setTimeout(function(){data.a = "test"}, 2000) </script>

    a变量在初始化时就被加入到 data对象中,所以vue响应式系统将监控 a变量的值,当定时 2 秒后, 变量 a 的值变换, 相应的视图中的变量值也随之变换。 **只有在 new vue() 时加入data 对象中的 属性的值才会监控。

    其他方法:

    使用 Object.freeze() 使一个对象不响应式$watch方法 (变量名,回调函数) vm.$watch("a", function(newVal, oldVal){ console.log(newVal,oldVal); })
    Processed: 0.009, SQL: 9