zoukankan      html  css  js  c++  java
  • vue2.0源码学习一(new Vue的时候做了什么)

    这里我先用vue-cli本地建立了一个hello world的项目,它是采用runtime-only的模式构建的,所以这里跟踪源码的话,就是从node_modulesvuedistvue.runtime.esm.js去跟踪和分析,从这个js文件中可以看到这么一个定义

     可见当new Vue的时候是进入了一个函数,然后进入到this._init方法,同时把options作为参数传入进去,这个_init方法在initMixin方法中进行了定义,是定义在vue原型上的一个方法,然后merge各种options到vm.$options对象上,所以在new Vue里定义的所有属性都可以通过this.$options获取得到,然后进行各种初始化

    el元素的挂载就是在initMixin函数里操作的

    相信大伙儿都知道在new Vue的时候定义了data,比如这里data返回了一个message:“swh”,然后mounted的时候,通过this.message就可以访问到“swh”,那这又是什么原理呢,继续看

     请看这个函数

     进来的时候对props,methods和data进行了初始化,这种重点看data,继续走,到initData函数

     这里获取到data,并且通过getData对它做了处理,这里建议data是一个函数,然后

     到这里,data.call执行返回一个对象{message:"swh"},所以data和vm._data都是这个对象,继续看initData函数

     这里是指在vue中不可以data,methods和props同名,重点来了,看下面这个函数

     

     通过这一层代理,当访问this.message的时候实际上是在访问this._data.message,当然不建议直接用this._data.message在页面里访问,在编程界带下划线的是属于私有属性,不建议直接使用

  • 相关阅读:
    【GoLang】GoLang map 非线程安全 & 并发度写优化
    【IDEA】IDEA 如何设置编辑器字体大小
    【GoLang】GoLang fmt 占位符详解
    转头条:阿里p7架构师:三年经验应该具备什么样的技能?
    RPC与RMI的区别
    为什么使用消息队列,为什么使用RabbitMQ、springAMQP
    cookie的安全性问题
    solr与mysql数据同步的方案
    springcloud与dubbo对比:
    mybatis与分布式事务的面试
  • 原文地址:https://www.cnblogs.com/shenwh/p/14071571.html
Copyright © 2011-2022 走看看