脑课堂编程教育

相关特性简介

前端技术 1年前
303 0 0
脑课堂编程培训

*1、MVVM数据绑定(数据驱动)**

如果有用过Angular的同学,可能会很亲切。因为Vue的数据绑定借鉴了Angular的指令机制。

Angular:

<input type="text" ng-model = "msg">

Vue:

<input type="text" v-model = "msg">

但是与Angular不同的是:Vue.js的API里并没有繁杂的module、controller、scope、factory、service等概念,一切都是以“ViewModel 实例”为基本单位。

我们来看下Vue是怎么做的:

Html:

<div id="demo">
  <p>{{message}}</p>
  <input type="text" v-model="message"/>
</div>

Javascript:

var App = new Vue({ 
  el: "#demo",
  data: { 
    message: 'Hello,Vue.js'
  }
})

渲染结果

file

可能有些朋友会好奇,Vue的数据绑定和检测是如何实现的呢?

大致流程为:

1、将原生的数据改造成 “可观察对象”。一个可观察对象可以被取值,也可以被赋值。

2、在watcher的求值过程中,每一个被取值的可观察对象,都会将当前的watcher注册为自己的一个订阅者,并成为当前watcher的一个依赖。

3、当一个被依赖的可观察对象被赋值时,它会通知所有订阅自己的watcher重新求值,并触发相应的更新。

如下图所示:

file

收藏

本文标题:相关特性简介

本文链接:https://naoketang.com/p/mzg7kpyoqop8

评论区

推荐课程