vue源码分析系列之响应式数据（一）

2024年4月14日 161次阅读 来源: A_大白

概述

在使用vue的时候，data,computed,watch是一些经常用到的概念，那么他们是怎么实现的呢，让我们从一个小demo开始分析一下它的流程。

demo演示代码片段

html代码

<!DOCTYPE html>
<html>
  <head>
    <title>demo</title>
    <script src="../../dist/vue.js"></script>
  </head>
  <body>
    <div id="demo">
      <div>
          <p>a：{{a}}</p>
          <p>b: {{b}}</p>
          <p>a+b: {{total}}</p>
          <button @click="addA">a+1</button>
      </div>
    </div>
    <script src="app.js"></script>
  </body>
</html>

js代码

var demo = new Vue({
  el: '#demo', 
  data: {
    a: 1,
    b: 2,
  },
  computed:{
    total() {
      return this.a + this.b;
    }
  },
  methods: {
    addA() {
      this.a += 1;
    }
  }
})

简单说明

这是一段简单的代码。页面中引用了data中的a,b属性，计算属性total则是求a与b的和。页面中提供一个button按钮，每点击一次会对属性a+1。total属性则会根据依赖变化，判断total值是否需要更新，并在合适的时机更新。

代码初始化部分

new一个Vue的时候做了什么

当我们new一个vue时，实际上执行了vue的构造函数，这个构造函数内部挂载了很多方法，可以在我的上一篇文章中看到。构造函数内部调用了_init方法，那我们看看init里做了什么即可。

function Vue (options) {
  this._init(options)
}

init函数

Vue.prototype._init = function (options?: Object) {
  const vm: Component = this
  // a uid
  vm._uid = uid++

  // 通过_isVue标识该对象不需要被做响应式处理。
  vm._isVue = true
  // 合并构造函数上挂载的options与当前传入的options.
  if (options && options._isComponent) {
    initInternalComponent(vm, options)
  } else {
    vm.$options = mergeOptions(
      resolveConstructorOptions(vm.constructor),
      options || {},
      vm
    )
  }
  // 非生产环境，包装实例本身，在后期渲染时候，做一些校验提示输出。
  if (process.env.NODE_ENV !== 'production') {
    initProxy(vm)
  } else {
    vm._renderProxy = vm
  }
  // expose real self
  vm._self = vm
  // 初始化生命周期相关
  initLifecycle(vm)
  // 初始化事件相关
  initEvents(vm)
  // 初始化渲染相关
  initRender(vm)
  // 这里调用beforeCreate钩子
  callHook(vm, 'beforeCreate')
  // inject/provide相关处理
  initInjections(vm) // resolve injections before data/props
  // 初始化data、props以及computed,watch等。
  initState(vm)
  initProvide(vm) // resolve provide after data/props
  // 调用created钩子
  callHook(vm, 'created')


  if (vm.$options.el) {
    // 挂载组件到页面上的
    vm.$mount(vm.$options.el)
  }
}

这篇文章讲述的内容,需要我们着重关注一下initState函数与vm.$mount中渲染部分的内容。

initState函数

export function initState (vm: Component) {

  vm._watchers = []
  const opts = vm.$options
  //初始化props
  if (opts.props) initProps(vm, opts.props)
  // 初始化methods
  if (opts.methods) initMethods(vm, opts.methods)
  // 初始化data
  if (opts.data) {
    initData(vm)
  } else {
    observe(vm._data = {}, true /* asRootData */)
  }
  // 初始化计算属性
  if (opts.computed) initComputed(vm, opts.computed)
  // 初始化watch
  if (opts.watch && opts.watch !== nativeWatch) {
    initWatch(vm, opts.watch)
  }
}

接下里的几篇我们将围绕着initData，initComputed，initWatch函数，分别展开，探究其内部做了什么。

文章链接

    原文作者：A_大白
    原文地址: https://segmentfault.com/a/1190000018145146
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞