vue 组件对外暴露方法(vue 中的store如何存取数据)

很多新手不太清楚如何在Vue中将数据打包成reactive，达到MDV效应。为了帮助大家解决这个问题，下面小编就详细讲解一下。需要的人可以从中学习，希望你能有所收获。

我们先来解释一下反应式是什么意思。简单来说，就是把数据包放入一个可观察的类型，当数据发生变化时，我们可以感觉到。

而Vue的相关实现代码都在core/observer目录下，如果想自己读，建议从core/instance/index.js开始。

在讨论reactive的具体实现之前，我们先来说几个对象：Watcher、Dep和Observer。

Watcher

Watcher是vue实现的一个观察数据的对象，体现在core/observer/watcher.js中。

这个类主要用于观察方法/表达式中引用的数据的变化(数据需要为正，即数据或道具)，变化后进行相应的处理。让我们先来看看Watcher类的参数：

vm:Component，expOrFn:string | Function，cb:Function，options？对象，解释这些参数的用途：

Vm:此观察程序当前所属的VueComponent。

ExpOrFn:要监控的方法/表达式。例如，vueComponent的render函数，或者computed的getter方法，或者abc.bbc.aac类型的字符串(因为Vue的parsePath方法的属性划分是通过split(')完成的)，不支持abc['bbc'])。如果expOrFn是一个方法，则直接赋给watcher的getter属性；如果它是一个表达式，它将被转换成一个方法，然后交给getter。

Cb:这个回调将在getter中引用的数据发生变化时被触发。

选项：附加参数。可以传入的参数包括deep、user、lazy和sync，默认情况下这些参数都为false。

如果deep为true，getter返回的对象将被再次深度遍历，以进行进一步的依赖项收集。

用户用于标记此监控是否由用户通过$watch调用。

Lazy用于标记观察器是否懒于执行。该属性用于计算数据。当数据中的值发生变化时，getter将不会立即计算以获得新值，但是观察器将被标记为脏，这将仅在引用计算数据以返回新的计算数据时执行，从而减少计算量。

Sync表示当数据中的值发生变化时，观察器是否同步更新数据。如果为真，该值将立即更新，否则，它将在下一个刻度中更新。

知道了参数的用途之后，我们基本上就知道了Watcher对象做了什么。

00-1010dep是vue实现的处理依赖关系的对象，在core/observer/dep.js中实现，代码量相当小，容易理解。

Dep主要扮演一个链接的角色，即连接反应数据和观察者。创建每个反应性数据时，将创建一个dep实例。参见observer/index.js中的defineReactive方法简化的defineReactive方法如下。

函数定义活动的(对象、键、值){ 0

const dep=NewDep()；

Object.defineProperty(obj，key，{ 0

  get() {
          if (Dep.target) {
            dep.depend();
          }
          return value        }
        set(newValue) {
            value = newValue;
            dep.notify();
        }
    })}

创建完 dep 实例后，就会给该 data 注入 getter 和 setter 的逻辑，当该 data 被引用的时候，就会触发 getter，而什么时候 data 会被引用呢？就是在 watcher 执行 getter 的时候，而当 watcher 执行 getter 的时候，watcher 会被塞入 Dep.target，然后通过调用 dep.depend() 方法，这个数据的 dep 就和 watcher 创建了连接。

创建连接之后，当 data 被更改，触发了 setter 逻辑。然后就可以通过 dep.notify() 通知到所有与 dep 创建了关联的 watcher。从而让各个 watcher 做出响应。

比如我 watch 了一个 data ，并且在一个 computed data 中引用了同一个 data。再同时，我在 template 中也有显式引用了这个 data，那么此时，这个 data 的 dep 里就关联了三个 watcher，一个是 render function 的 watcher，一个是 computed 的 watcher，一个是用户自己调用 $watch 方法创建的 watcher。当 data 发生更改后，这个 data 的 dep 就会通知到这三个 watcher 做出相应处理。

Observer

Observer 可以将一个 plainObject 或者 array 变成 reactive 的。代码很少，就是遍历 plainObject 或者 array，对每一个键值调用defineReactive 方法。

流程

以上三个类介绍完了，基本上对 vue reactive 的实现应该有个模糊的认识，接下来，就结合实例讲一下整个流程。

在 vue 实例化的时候，会先调用 initData，再调用 initComputed，最后再调用 mountComponent 创建 render function 的 watcher。从而完成一个 VueComponent 的数据 reactive 化。

initData

initData 方法在 core/instance/state.js 中，而这个方法里大部分都是做一些判断，比如防止 data 里有跟 methods 里重复的命名之类的。核心其实就一行代码：

observe(data, true)

而这个 observe 方法干的事就是创建一个 Observer 对象，而 Observer 对象就像我上面说的，对 data 进行遍历，并且调用 defineReactive 方法。

就会使用 data 节点创建一个 Observer 对象，然后对 data 下的所有数据，依次进行 reactive 的处理，也就是调用 defineReactive 方法。当执行完 defineReactive 方法之后，data 里的每一个属性，都被注入了 getter 以及 setter 逻辑，并且创建了 dep 对象。至此 initData 执行完毕。

initComputed

然后是 initComputed 方法。这个方法就是处理 vue 中 computed 节点下的数据，遍历 computed 节点，获取 key 和 value，创建 watcher 对象，如果 value 是方法，实例化 watcher 的入参 expOrFn 则为 value，否则是 value.get。

function initComputed (vm: Component, computed: Object) {
  ...  const watchers = vm._computedWatchers = Object.create(null)  for (const key in computed) {
    const userDef = computed[key]    let getter = typeof userDef === 'function' ? userDef : userDef.get
    ...
    watchers[key] = new Watcher(vm, getter, noop, { lazy: true })    if (!(key in vm)) {
      defineComputed(vm, key, userDef)    } else if (process.env.NODE_ENV !== 'production') {
      ...    }
  }}

我们知道 expOrFn 是可以为方法，也可以是字符串的。因此，通过上面的代码我们发现了一种官方文档里没有说明的用法，比如我的 data 结构如下

{ obj: { list: [{value: '123'}] } }

如果我们要在 template 中需要使用 list 中第一个节点的 value 属性 值，就写个 computed：

computed: {
  value: { get: 'obj.list.0.value' }}

然后在 template 中使用的时候，直接用{{ value }}，这样的话，就算 list 为空，也能保证不会报错，类似于 lodash.get 的用法。OK，扯远了，回到正题上。

创建完 watcher，就通过 Object.defineProperty 把 computed 的 key 挂载到 vm 上。并且在 getter 中添加以下逻辑

 if (watcher.dirty) {
   watcher.evaluate() }
 if (Dep.target) {
   watcher.depend() }
 return watcher.value

前面我有说过，computed data 的 watcher 是 lazy 的，当 computed data 中引用的 data 发生改变后，是不会立马重新计算值的，而只是标记一下 dirty 为 true，然后当这个 computed data 被引用的时候，上面的 getter 逻辑就会判断 watcher 是否为 dirty，如果是，就重新计算值。

而后面那一段watcher.depend。则是为了收集 computed data 中用到的 data 的依赖，从而能够实现当 computed data 中引用的 data 发生更改时，也能触发到 render function 的重新执行。

  depend () {
    let i = this.deps.length
    while (i--) {
      this.deps[i].depend()    }
  }

mountComponent

把 data 以及 computed 都初始化好之后，则创建一个 render function 的 watcher。逻辑如下：

export function mountComponent (
  vm: Component,
  el: ?Element,
  hydrating?: boolean): Component {
  vm.$el = el
  ...  callHook(vm, 'beforeMount')  let updateComponent
  ...
    updateComponent = () => {
      vm._update(vm._render(), hydrating)    }
  ...  vm._watcher = new Watcher(vm, updateComponent, noop)  if (vm.$vnode == null) {
    vm._isMounted = true
    callHook(vm, 'mounted')  }
  return vm}

可以看到，创建 watcher 时候的入参 expOrFn 为 updateComponent 方法，而 updateComponent 方法中则是执行了 render function。而这个 watcher 不是 lazy 的，因此创建该 watcher 的时候，就会立马执行 render function 了，当执行 render function 的时候。如果 template 中有使用 data，则会触发 data 的 getter 逻辑，然后执行 dep.depend() 进行依赖收集，如果 template 中有使用 computed 的参数，也会触发 computed 的 getter 逻辑，从而再收集 computed 的方法中引用的 data 的依赖。最终完成全部依赖的收集。

最后举个例子：

<template>
    <p>{{ test }}</p></template><script>
  export default {
    data() {
      return {
        name: 'cool'
      }
    },
    computed: {
      test() {
        return this.name + 'test';
      }
    }
  }</script>

初始化流程：

1. 将 name 处理为 reactive，创建 dep 实例

2. 将 test 绑到 vm，创建 test 的 watcher 实例 watch2，添加 getter 逻辑。

3. 创建 render function 的 watcher 实例 watcher2，并且立即执行 render function。

4. 执行 render function 的时候，触发到 test 的 getter 逻辑，watcher1 及 watcher2 均与 dep 创建映射关系。

name 的值变更后的更新流程：

1. 遍历绑定的 watcher 列表，执行 watcher.update()。

2. watcher1.dirty 置为为 true。

3. watcher2 重新执行 render function，触发到 test 的 getter，因为 watcher1.dirty 为 true，因此重新计算 test 的值，test 的值更新。

4. 重渲染 view

看完上述内容是否对您有帮助呢？如果还想对相关知识有进一步的了解或阅读更多相关文章，请关注行业资讯频道，感谢您对的支持。