Vue原理(一)——初始化data属性

let app = new Vue({
    data: {
        text: "text",
        text2: "text2"
    }
})

第一步:

使用observe函数对Vue中的data对象进行处理,使其可观察(observable)。这一步的实质就是使用Object.defineProperty方法重写data的属性,重写属性特征(主要指set和get两个属性特征函数,从而在获取属性值和设置属性值的时候插入额外的操作来实现视图中跟随数据变化):

了解Vue实例化过程做了什么?下面可以看出,Vue实例化的时候,会把传入对象的data属性传递给实例的_data属性,同时,调用observe函数来处理_data也就是option.data。observe函数实质上就是使_data对象的所有属性的set, get。

class Vue {
    constructor(options) {
        this._data = options.data;
        observe(this._data);
    }
}

observe函数具体的实现,其实就是遍历_data中的所有属性,调用defineProperty在set和get来注入取值和设置值时的额外操作。

其中,dep是一个数组,其中存放着依赖于当前属性的观察者列表,也就是属性改变时要通知列表中的这些对象来更新数据。

function observe(obj) {
    Object.keys(obj).forEach((key) => {
        defineReactive(obj, key, obj[key]);
    })
}

// defineReactive函数
function defineReactive(obj, key, value) {
    const dep = [];
    Object.defineProperty(obj, key, {
        enumerable: true,
        configurable: true,
        get: () => {
            // 读取值时的额外操作,即绑定当前的观察者到依赖列表中
            dep.push(Dep.target);
            return value;
        },
        set: (newVal) => {
            if (newVal === value) { return };
            // 设置值时的额外操作,即设置值时通知依赖列表中的所有观察者来更新数据
            dep.forEach((a) => a.update);
            value = newVal;
        }
    })
}

原文地址:https://www.cnblogs.com/ykli/p/9735857.html

时间: 2024-10-09 12:33:43

Vue原理(一)——初始化data属性的相关文章

Kendo UI 初始化 Data 属性

初始化 Data 属性 前面在介绍准备 Kendo UI 开发环境时我们使用 jQuery 的方法将一个  HTML 元素转换成一个 Kendo UI 控制项: $("#datepicker").kendoDatePicker();除了使用 jQuery 插件的方法来初始化方法外,每个 Kendo 控制项还可以通过 data 属性来初始化,此时你需要设置 data 的 role 属性,然后调用 kendo.init 方法.使用初始化 Data 属性的方法在页面上包含有大量 Kendo

vue实例中中data属性三种写法

<script type="text/javascript"> var app=new Vue({ el:'#app', data:{ book: "vue.js" } })</script> <script type="text/javascript">var app=new Vue({el:'#app',data:function(){book: "vue.js"}})</scri

剖析Vue原理&amp;实现双向绑定MVVM

剖析Vue原理&实现双向绑定MVVM vue.js 双向绑定 javascript 邓木琴居然被盗用了 2016年08月16日发布 推荐 24 推荐 收藏 195 收藏,10.6k 浏览 本文能帮你做什么?1.了解vue的双向数据绑定原理以及核心代码模块2.缓解好奇心的同时了解如何实现双向绑定为了便于说明原理与实现,本文相关代码主要摘自vue源码, 并进行了简化改造,相对较简陋,并未考虑到数组的处理.数据的循环依赖等,也难免存在一些问题,欢迎大家指正.不过这些并不会影响大家的阅读和理解,相信看完

vue原理探索--响应式系统

Vue.js 是一款 MVVM 框架,数据模型仅仅是普通的 JavaScript 对象,但是对这些对象进行操作时,却能影响对应视图,它的核心实现就是「响应式系统」. 首先看一下 Object.defineProperty,Vue.js就是基于它实现「响应式系统」的. 主要涉及属性: enumerable,属性是否可枚举,默认 false. configurable,属性是否可以被修改或者删除,默认 false. get,获取属性的方法. set,设置属性的方法. 响应式基本原理就是,在 Vue

vue原理简介

写vue也有一段时间了,对vue的底层原理虽然有一些了解,这里总结一下. vue.js中有两个核心功能:响应式数据绑定,组件系统.主流的mvc框架都实现了单向数据绑定,而双向绑定无非是在单向绑定基础上给可输入元素添加了change事件,从而动态地修改model和view. 1. MVC,MVP,MVVM 1.1 MVC MVC模式将软件分为下面三个部分 1.视图(View):用户界面2.控制器(Controller):业务逻辑3.模型(Model):数据保存 MVC各个部分之间通信的方式如下:

vue(原理)_数据绑定

一.前言 1.数据绑定原理 2.在数据绑定中四个重要的对象                              3.具体实现                                                   3.1初始化阶段                                                   3.2建立Dep和watcher的联系阶段                                                   3.3

Vue中用props给data赋初始值遇到的问题解决

Vue中用props给data赋初始值遇到的问题解决 更新时间:2018年11月27日 10:09:14   作者:yuyongyu    我要评论 这篇文章主要介绍了Vue中用props给data赋初始值遇到的问题解决,小编觉得挺不错的,现在分享给大家,也给大家做个参考.一起跟随小编过来看看吧 前言 前段时间做一个运营活动的项目,上线后产品反馈页面埋点不对,在排查过程中发现,问题竟然是由于Vue中的data初始值导致,而data的初始值来自于props.为方便描述,现将问题抽象如下: 一.现象

vue 添加对象的新属性的方法

和数组一样,Vue 不能检测到对象属性的添加或删除.由于 Vue 会在初始化实例时对属性执行 getter/setter 转化过程,所以属性必须在 data 对象上存在才能让 Vue 转换它,这样才能让它是响应的. 两种不同情况下使用的方法: Vue.set(object, key, value) Vue.set(vm.someObject, 'b', 2) vm.$set this.$set(this.someObject,'b',2) 如果想向已有对象上添加一些属性,例如使用 Object.

data属性

本框架内置组件以及部分插件可以通过data属性来初始化并使用,通常通过data-toggle来调用API(toggle是触发器的意思,例如我们创建一个navtab标签可以通过为a的data-toggle="navtab").如无特殊说明,相关参数也通过data属性传递. data属性无法向JS传递含有大写字母的参数,如果参数是驼峰式(大小写混搭),则需要将大写字母转换为-加小写.如: reloadWarn ---> reload-warn maxAndLevel --->