当前位置 : 主页 > 网络编程 > JavaScript >

Vue源码学习之数据初始化

来源:互联网 收集:自由互联 发布时间:2023-02-08
目录 初始化数据 创建Vue实例 构造函数扩展方法 初始化状态 调用initData方法对数据进行代理 初始化数据 环境搭建:菜鸟学Vue源码第一步之rollup环境搭建步 响应式数据的核心就是,数据
目录
  • 初始化数据
    • 创建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 数据初始化的资料请关注易盾网络其它相关文章!

上一篇:vue实现电子时钟效果
下一篇:没有了
网友评论