Vue源码学习之数据初始化

目录
  • 初始化数据
    • 创建Vue实例
    • 构造函数扩展方法
    • 初始化状态
    • 调用initData方法对数据进行代理

初始化数据

环境搭建:菜鸟学Vue源码第一步之rollup环境搭建步

响应式数据的核心就是，数据变化了可以监听到数据变化了，数据的取值和更改值可以监测到,首先第一步需要创建一个Vue实例

创建Vue实例

//dist/index.html
//用Vue创造一个实例
const vm = new Vue({
  data(){
    return {
      name:'i东东',
      age:18
    }
  }
})

创造完 Vue实例，紧接着就需要有一个类去代理data中的数据，但是在Vue中并没有直接去用class去构建一个类，因为这样写会将所有的方法都耦合在一起(类的特点)，所以Vue本身采用了一个构造函数，通过构造函数去扩展方法。

构造函数扩展方法

//src/index.js
import { initMixin } from "./init";
function Vue(options){
this._init(options)
}
initMixin(Vue) // 扩展了init方法 (后面会写)
export default Vue

在拿到options选项之后需要做一个初始化，就需要加一个方法来用于初始化。但是如果功能一多，就很比较乱，所以就需要把它拆成两个文件

export function initMixin(Vue) { //给Vue增加init方法
  Vue.prototype._init = function (options) { //用来初始化数据 }
}

这样就可以直接在index.js中调用initMixin方法,这种方法，就可以把这些原型方法扩展成一个个函数，通过函数的方式在圆形上去扩展功能。

在用的时候就可以在当前实例上扩展一些属性，比如Vue中的vm.$optios,就是用来获取用户配置的,紧接着就需要进行初始化状态

初始化状态

//src/init.js
import { initState } from "./state"
export function initMixin(Vue) { //给Vue增加init方法
  Vue.prototype._init = function (options) { //用来初始化数据
    // 所有以$开头的都会被认为是Vue的属性，比如$nextTick()
    const vm = this
    vm.$options = options // 将用户的属性挂载到实例上
    // 初始化状态(props,methods,data等进行处理)原型中的this值得都是实例
    initState(vm)
  }
}

initState方法可以将它进行拆分到一个新的文件中,通过initState方法对数据进行劫持，判断数据是否存在，然后调用initData方法对数据进行代理

调用initData方法对数据进行代理

//
/src/state.js
export function initState(vm){
    // 对数据需要进行劫持
    const opts = vm.$options //获取所有选项
    if (opts.data){
        initData(vm)
    }
}
function initData(vm){
    // 对数据进行代理
    let data = vm.$options.data
    // data可以是函数或者对象，根实例可以是对象，组件data必须势函数
    data = typeof data === 'function' ? data.call(vm) : data
    console.log(data); // {name: 'i东东', age: 18}
}

执行index.html 当控制台输出{name: 'i东东', age: 18}就表示初始化数据完成

以上就是Vue源码学习之数据初始化的详细内容，更多关于Vue 数据初始化的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • 解决vuex数据异步造成初始化的时候没值报错问题

    当使用vue做登录的时候,我们会把拿到的部分用户信息存在vuex+cookie中,我们知道,vuex的数据是会随着浏览器刷新而丢失的,此时我们会重新请求接口对vuex的数据进行再次赋值,如下 当有cookie但是vuex没有数据的时候再次请求赋值 state mutation vuex的数据是异步的,当我们页面需要直接拿vuex的值进行渲染的时候,初始化瞬间(即请求过程进行的时候),vuex是没有这个值的,如何解决这个问题,暂时总结了三种方法,希望有遇到的大佬进行补充和查错: 1.通过watch

  • vue data恢复初始化数据的实现方法

    在我们进行vue开发过程中,经常会保存一些页面,此时,我们在app.vue的配置如下, <keep-alive> <router-view v-if="$route.meta.keepAlive"></router-view> </keep-alive> 以此来保存页面,那么在再次进入这些页面的时候,我们需要重置该页面的原始数据,那么该如何进行呢?是不是要讲每个数据进行重写,答案是否定的.利用Object.assign 以及vue的数据可

  • vue数据初始化initState的实例详解

    数据初始化 Vue 实例在建立的时候会运行一系列的初始化操作,而在这些初始化操作里面,和数据绑定关联最大的是 initState. 首先,来看一下他的代码: function initState(vm) { vm._watchers = []; var opts = vm.$options; if(opts.props) { initProps(vm, opts.props); //初始化props } if(opts.methods) { initMethods(vm, opts.method

  • vue中如何初始化data数据

    目录 如何初始化data数据 vue程序初始化流程 初始化 改写的原因 流程实现 源码流程 初始化流程 如何初始化data数据 后台管理系统中,新建和编辑使用同一个页面,常常需要初始化data数据. form: { id: 0, name: '', place: '', number: '', admin_uid: '', is_audit: 2, contact: '', sort: '', is_network: 2, network_type: 1, is_projector: 2, is

  • 浅谈Vue.js之初始化el以及数据的绑定说明

    1.初始化el 2.数据绑定说明 3.监听值的变化 以上这篇浅谈Vue.js之初始化el以及数据的绑定说明就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

  • 解决vuex数据页面刷新后初始化操作

    在vue项目的开发中经常会用到vuex来进行数据的存储,然而在开发过程中会出现刷新后页面的vuex的state数据初始化问题!下面是我用过的解决方法 1.利用storage缓存来实现vuex数据的刷新问题 我们可以在mutation等vuex的方法中对于数据进行改变时,将数据同时存储进我们的本地浏览器缓存中:下面是我在mutation中写的方法: 同步将数据的更改保存,也可以在页面调用vuex的mutation方法时同步更改:但是这种方法只能针对少量的数据需要保持不刷新,在真正的卡发中并不适用

  • Vue源码学习之数据初始化

    目录 初始化数据 创建Vue实例 构造函数扩展方法 初始化状态 调用initData方法对数据进行代理 初始化数据 环境搭建:菜鸟学Vue源码第一步之rollup环境搭建步 响应式数据的核心就是,数据变化了可以监听到数据变化了,数据的取值和更改值可以监测到,首先第一步需要创建一个Vue实例 创建Vue实例 //dist/index.html //用Vue创造一个实例 const vm = new Vue({ data(){ return { name:'i东东', age:18 } } }) 创

  • 详解Vue源码学习之双向绑定

    原理 当你把一个普通的 JavaScript 对象传给 Vue 实例的 data 选项,Vue 将遍历此对象所有的属性,并使用 Object.defineProperty 把这些属性全部转为 getter/setter.Object.defineProperty 是 ES5 中一个无法 shim 的特性,这也就是为什么 Vue 不支持 IE8 以及更低版本浏览器. 上面那段话是Vue官方文档中截取的,可以看到是使用Object.defineProperty实现对数据改变的监听.Vue主要使用了观

  • Vue源码学习记录之手写vm.$mount方法

    目录 一.概述 二.使用方式 三.完整版vm.$mount的实现原理 四.只包含运行时版本的vm.$mount的实现原理 这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助 一.概述 在我们开发中,经常要用到Vue.extend创建出Vue的子类来构造函数,通过new 得到子类的实例,然后通过$mount挂载到节点,如代码: <div id="mount-point"></div> <!-- 创建构造器 --> var Profile =

  • Vue源码学习之响应式是如何实现的

    Vue源码学习之响应式是如何实现的

    目录 前言 一.一个响应式系统的关键要素 1.如何监听数据变化 2.如何进行依赖收集--实现 Dep 类 3.数据变化时如何更新--实现 Watcher 类 二.虚拟 DOM 和 diff 1.虚拟 DOM 是什么? 2.diff 算法--新旧节点对比 三.nextTick 四.总结 前言 作为前端开发,我们的日常工作就是将数据渲染到页面➕处理用户交互.在 Vue 中,数据变化时页面会重新渲染,比如我们在页面上显示一个数字,旁边有一个点击按钮,每次点击一下按钮,页面上所显示的数字会加一,这要怎么

  • vue源码学习之Object.defineProperty对象属性监听

    本文介绍了vue源码学习之Object.defineProperty对象属性监听,分享给大家,具体如下: 参考版本 vue源码版本:0.11 相关 vue实现双向数据绑定的关键是 Object.defineProperty ,让我们先来看下这个函数. 在MDN上查看有关Object.defineProperty的解释. 我们先从最简单的开始: let a = {'b': 1}; Object.defineProperty(a, 'b', { enumerable: false, configur

  • Vue源码学习之关于对Array的数据侦听实现

    摘要 我们都知道Vue的响应式是通过Object.defineProperty来进行数据劫持.但是那是针对Object类型可以实现, 如果是数组呢? 通过set/get方式是不行的. 但是Vue作者使用了一个方式来实现Array类型的监测: 拦截器. 核心思想 通过创建一个拦截器来覆盖数组本身的原型对象Array.prototype. 拦截器 通过查看Vue源码路径vue/src/core/observer/array.js. /** * Vue对数组的变化侦测 * 思想: 通过一个拦截器来覆盖

  • Vue源码学习之初始化模块init.js解析

    我们看到了VUE分了很多模块(initMixin()stateMixin()eventsMixin()lifecycleMixin()renderMixin()),通过使用Mixin模式,都是使用了JavaScript原型继承的原理,在Vue的原型上面增加属性和方法.我们继续跟着this._init(options)走,这个一点击进去就知道了是进入了init.js文件是在initMixin函数里面给Vue原型添加的_init方法.首先来从宏观看看这个init文件,可以看出主要是导出了两个函数:i

  • Vue源码探究之状态初始化

    继续随着核心类的初始化展开探索其他的模块,这一篇来研究一下Vue的状态初始化.这里的状态初始化指的就是在创建实例的时候,在配置对象里定义的属性.数据变量.方法等是如何进行初始处理的.由于随后的数据更新变动都交给观察系统来负责,所以在事先弄明白了数据绑定的原理之后,就只需要将目光集中在这一部分. 来仔细看看在核心类中首先执行的关于 state 部分的源码: initState // 定义并导出initState函数,接收参数vm export function initState (vm: Com

  • Vue源码解析之数据响应系统的使用

    接下来重点来看Vue的数据响应系统.我看很多文章在讲数据响应的时候先用一个简单的例子介绍了数据双向绑定的思路,然后再看源码.这里也借鉴了这种方式,感觉这样的确更有利于理解. 数据双向绑定的思路 1. 对象 先来看元素是对象的情况.假设我们有一个对象和一个监测方法: const data = { a: 1 }; /** * exp[String, Function]: 被观测的字段 * fn[Function]: 被观测对象改变后执行的方法 */ function watch (exp, fn)

  • 详解Vue源码学习之callHook钩子函数

    Vue实例在不同的生命周期阶段,都调用了callHook方法.比如在实例初始化(_init)的时候调用callHook(vm, 'beforeCreate')和callHook(vm, 'created'). 这里的"beforeCreate","created"状态并非随意定义,而是来自于Vue内部的定义的生命周期钩子. var LIFECYCLE_HOOKS = [ 'beforeCreate', 'created', 'beforeMount', 'mount

随机推荐