响应式系统
vue是一个帮助用户构建界面的前端框架,它的核心是一个响应式的数据绑定系统,通过数据来驱动页面显示的更新,而不是像jquery那样通过操作DOM来改变页面的显示。
vue通过ViewModal来实现数据和DOM的双向数据绑定。这是如何实现的呢?
当我们把一个普通的js对象传给Vue实例的data选项后,Vue将遍历这个对象所有的属性,并使用Object.defineProperty 把这些属性全部转为 getter/setter。
每个组件实例都有相应的watcher实例对象,他会在组件渲染的过程中把属性记录为依赖,当依赖项的setter被调用时,会通知watcher重新计算,从而使它关联的组件得以更新。
由于Vue不能检测对象属性的添加或删除。 由于Vue 会在初始化实例时对属性执行 getter/setter 转化过程,所以属性必须在 data 对象上存在才能让 Vue 转换它,这样才能让它是响应的。
因此要在初始化实例前声明响应式属性,哪怕只是一个空值:
var vm = new Vue({
data: {
// 声明 message 为一个空值字符串
message: