vue源码分析系列之响应式数据（一）
栏目: JavaScript · 发布时间: 5年前
内容简介：在使用vue的时候，data,computed,watch是一些经常用到的概念，那么他们是怎么实现的呢，让我们从一个小demo开始分析一下它的流程。这是一段简单的代码。页面中引用了data中的a,b属性，计算属性total则是求a与b的和。页面中提供一个button按钮，每点击一次会对属性a+1。total属性则会根据依赖变化，判断total值是否需要更新，并在合适的时机更新。当我们new一个vue时，实际上执行了vue的构造函数，这个构造函数内部挂载了很多方法，可以在我的上一篇文章中看到。构造函数内部调用
概述
在使用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
中渲染部分的内容。
以上所述就是小编给大家介绍的《vue源码分析系列之响应式数据（一）》，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持！
猜你喜欢:
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
