带你了解vue源码与实用技巧（一）——响应式与非响应式

相信大家都对vue 非常熟知了，它是一款流行的Javascript前端框架，深受大家喜爱的原因离不开它的核心特性之一 ------"响应式数据"，可以达到数据修改视图更新的效果，与传统开发相比，开发者们只需要关注于业务本身逻辑，而不用过多关注dom操作就可以实现需求功能。

大家都知道响应式的好处，那么我们使用vue框架开发过程中是不是所有数据都需要是响应式的呢，非响应式数据又是什么，应该如何使用？接下来将展开说说响应式与非响应式数据，以及一些使用技巧。

响应式原理解析

首先，在了解非响应式数据之前我们先简单介绍一下响应式数据，Vue.js 其核心包括是一套"响应式系统"。

"响应式"，是指当数据改变后 ，Vue 会通知到使用该数据的代码。例如，视图渲染中使用了数据，数据改变后，视图也会自动更新。

举个简单的例子，对于模板：

xml 复制代码

  <div id="app">
    <h1>{{title}}</h1>
    <button @click="changeMsg">change title</button>
  </div>

创建一个 Vue 组件：

javascript 复制代码

   const app = new Vue({
      data()  {
        return {
          title: 'hello vue'
        }
      },
      methods: {
        changeMsg() {
          this.title += '!'
        }
      },
    })
    app.$mount('#app')

点击button，title改变，视图改变（新增！）

vue主要是通过：数据劫持 + 依赖收集（这里用到了发布者-订阅者模式）的方式来实现的。

通过 Object.defineProperty() 替换配置对象属性的 set、get 方法，实现"拦截"
watcher 在执行 getter 函数时触发数据的 get 方法，从而建立依赖关系
写入数据时触发 set 方法，从而借助 dep 发布通知，进而 watcher 进行更新

defineReactive() 是定义响应式数据的核心函数，将 data 中的数据定义一个响应式对象，vue源码如下：

scss 复制代码

function defineReactive(obj, key, val, customSetter, shallow, mock) {
      var dep = new Dep();
      ...
      Object.defineProperty(obj, key, {
          ...
          get: function reactiveGetter() {
              var value = getter ? getter.call(obj) : val;
              if (Dep.target) {            
                dep.depend();           
                  if (childOb) {
                      childOb.dep.depend();
                      if (isArray(value)) {
                          dependArray(value);
                      }
                  }
              }
              return value;
          },
          set: function reactiveSetter(newVal) {
            const value = getter ? getter.call(obj) : val
            if (newVal === value || (newVal !== newVal && value !== value)) {
              return
            }
            // ...
            childOb = !shallow && observe(newVal)
            dep.notify()
          }
      });
      return dep;
  }

从以上代码中可以看出：

收集依赖：

- 当使用数据时，会触发数据的get方法，可以看到 get 属性方法中调用了一个dep.depend 方法，该方法正是依赖收集的开始。

派发更新：

- 当我们修改一个存在 data 属性上的值时，会触发数据中的 set 属性方法，首先会判断并修改该属性数据的值，并触发自身的 dep.notify 方法开始更新派发，触发watch中的updata进行更新。

以上，简单带大家了解了一下响应式数据的核心原理，接下来就来说一下非响应式数据。

使用技巧

与响应式数据对立的即非相应数据，不需要随着数据的跟新进行视图更新，比如：接口访问地址等。

为什么建议使用非响应式数据？原因如下：

从vue.js 源码可以看出，响应式数据会有一定的性能开销：

影响运行速度，每一个响应式数据都会执行 defineReactive 函数
占用内存，defineReactive 使用了闭包，get 和 set 函数中可以访问 dep 函数中的变量

因此，当非相应是数据比较多时，使用非相应数据可以提高运行速度，提高性能。

非响应式数据使用方式

1. 数据放在vue实例外

arduino 复制代码

const test = ['1', '2', '3']
export default {
// options
}

弊端: vue template中访问不到数据

2. beforeCreate，created 钩子函数中定义

xml 复制代码

  <div id="app">
    <h2>{{description}}</h2>
  </div>

javascript 复制代码

created() {
    // 注意data中不要声明该变量名
    this.description = 'testData'
}

不可以在mounted中定义，在created 之前的生命周期中定义

注意：data中不要声明该变量名

3. 自定义Options

bash 复制代码

<template>
  <div>{{ $options.myOptions.test }}</div>
</template>

javascript 复制代码

export default {
    data() {
    },
    // 自定义options和data同级
    // 取值时: this.$options.myOptions.test
    myOptions: {
        test: '111'
    }
}

tip: 刚开始工作写的文章，学习了解 vue 响应式源码的，权当做个存档吧