vue底层

defineReactive-用于定义非data变量响应

  function defineReactive$$1 (
    obj,
    key,
    val,
    customSetter,
    shallow
  ) {
    var dep = new Dep();

    var property = Object.getOwnPropertyDescriptor(obj, key);
    if (property && property.configurable === false) {
      return
    }

    // cater for pre-defined getter/setters
    var getter = property && property.get;
    var setter = property && property.set;
    if ((!getter || setter) && arguments.length === 2) {
      val = obj[key];
    }

    var childOb = !shallow && observe(val);
    Object.defineProperty(obj, key, {
      enumerable: true,
      configurable: true,
      get: function reactiveGetter () {
        var value = getter ? getter.call(obj) : val;
        if (Dep.target) {
          dep.depend();
          if (childOb) {
            childOb.dep.depend();
            if (Array.isArray(value)) {
              dependArray(value);
            }
          }
        }
        return value
      },
      set: function reactiveSetter (newVal) {
        var value = getter ? getter.call(obj) : val;
        /* eslint-disable no-self-compare */
        if (newVal === value || (newVal !== newVal && value !== value)) {
          return
        }
        /* eslint-enable no-self-compare */
        if (customSetter) {
          customSetter();
        }
        // #7981: for accessor properties without setter
        if (getter && !setter) { return }
        if (setter) {
          setter.call(obj, newVal);
        } else {
          val = newVal;
        }
        childOb = !shallow && observe(newVal);
        dep.notify();
      }
    });
  }

使用了一个 Object.defineProperty,方法里面使用get与set,get方法里面使用dep.depend()进行依赖收集

获取数据-》触发get方法,然后使用依赖收集对更新的组件进行收集
例如:helloWorld组件中data数据里只有a变量发生变化,那么只更新a

更新:set
通过dep.notify();去更新

理解Vue.mixin–混入

可写一个全局定义的方法或者是弹框等

可以查看文章理解Vue.mixin,利用Vue.mixin正确的偷懒

Render函数-作用于多变的dom(复杂逻辑的HTML)

官方文档

Vue render函数

vue-router源码

vue-router源码实现

extend -把对象变成vue对象

1.随时插入组件-调用实例
2.单元测试

如果你import一个.vue文件,引入的只是一个js对象
如果你使用vue.extend({
data:{},
methods:{},
template:
})
拿到的就是vue构造类而不是一个实例化对象

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值