【Vue源码学习】响应式原理探秘
最近准备开启Vue的源码学习，并且每一个Vue的重要知识点都会记录下来。我们知道Vue的核心理念是数据驱动视图，所有操作都只需要在数据层做处理，不必关心视图层的操作。这里先来学习Vue的响应式原理，Vue2.0的响应式原理是基于
Object.defineProperty来实现的。Vue通过对传入的数据对象属性的getter/setter方法来监听数据的变化，通过getter进行依赖收集，setter方法通知观察者，在数据变更时更新视图。
1.使用rollup搭建开发环境
安装rollup环境
npm i @babel/preset-env @babel/core rollup rollup-plugin-babel rollup-plugin-serve cross-env -D配置rollup
// rollup.config.jsimport babel from "rollup-plugin-babel"
import serve from "rollup-plugin-serve"
export default {
input: './src/index.js', // 打包入口
output: {
file: 'dist/umd/vue.js', //出口路径
name: 'Vue' , // 指定打包后全局变量的名字
format: 'umd' , // 统一模块规范
sourcemap: true, // es6->es5 开启源码调试，可以找到源代码报错位置
},
plugins:[ //使用的插件
babel({
exclude:'node_modules/**' //排除文件
}),
process.env.ENV==='development'?serve({
open:true,
openPage:'/public/index.html', //默认启动html的路径
port:3000,
contentBase: ''
}):null
]
}
项目搭建
这里搭建了一个Vue项目，主要代码都放在src下面
2.响应式原理探秘
1.Object.defineProperty
想要了解Vue2的响应式原理，我们得先来简单了解一下Object.defineProperty
Object.defineProperty()的作用就是直接在一个对象上定义一个新属性，或者修改一个已经存在的属性,默认情况下，使用 Object.defineProperty() 添加的属性值是不可修改（immutable）的。
Object.defineProperty(obj,prop,desc)- obj：需要定义属性的对象
- prop：当前需要定义的对象属性
- desc：属性描述符
该方法最低兼容到IE8，这也就是Vue最低兼容到IE8的原因。
2.Vue初始化过程
我们先来分析一下Vue的初始化都做了哪些事情，我们在使用Vue的时候一般都会这样写：
const vm = new Vue({ el:'#app',
data(){
return {
name: '南玖'
}
}
})
我们知道Vue只能通过new关键字初始化，所以Vue应该是一个构造函数，然后会调用this._init方法进行初始化过程，OK，我们自己可以来实现一下
import {initMixin} from "./init"function Vue (options) {
if (process.env.NODE_ENV !== 'production' &&
!(this instanceof Vue)) {
warn('Vue is a constructor and should be called with the `new` keyword')
} // 开发环境下不通过new进行调用会告警
/*调用_init初始化，这个方法是挂在Vue原型上的*/
this._init(options)
// options就是new Vue是传入的参数，包括：el,data,computed,watch,methods...
}
initMixin(Vue) // 给Vue原型上添加_init方法
export default Vue
我们接着来写这个init.js,这里主要是给Vue原型上挂上方法：_init,$mount,_render,$nextTick等
import {initState} from "./state"//initMixin就做了一件事，就是给Vue原型挂上_init方法
export function initMixin(Vue){
// 初始化流程
Vue.prototype._init = function (options){
// console.log(options)
const vm = this // vue中使用this.$options
vm.$options = options
// /*初始化props、methods、data、computed与watch*/
initState(vm)
// 这里先看initState，后面还会有很多初始化事件：初始化生命周期、初始化事件、初始化render等等
}
}
初始化data，这里我们知道Vue支持传入的data可以是一个对象也可以是一个方法，所以我们需要判断一下传入的data的数据类型，是对象就直接传给observe，是方法就先执行再将返回值传给observe。
function initData(vm) { console.log('初始化数据',vm.$options.data)
// 数据初始化
let data = vm.$options.data;
data = vm._data = typeof data === 'function' ? data.call(this) : data
// 对象劫持，用户改变了数据 ==》 刷新页面
// MVVM模式 数据驱动视图
// Object.definePropety() 给属性增加get和set方法
observe(data) //响应式原理
}
3.响应式原理
将数据变成可观察的，我们都知道Vue2是通过Object.defineProperty来实现的。ok，这里我们就进入了这次的重点原理讲解：我们知道Object.defineProperty这个方法，只能劫持对象不能劫持数组，所以这里我们判断一下数据类型，数组需要单独处理，重写数组原型上的方法，在数组变更时在通知到订阅者
// 把data中数据使用Object.defineProperty重新定义 es5// Object.defineProperty 不能兼容IE8及以下，所以vue2无法兼容IE8版本
import {isObject,def} from "../util/index"
import {arrayMethods} from "./array.js" // 数组方法
export function observe (data) {
// console.log(data,'observe')
let isObj = isObject(data)
if(!isObj) return
return new Observer(data) // 观测数据
}
class Observer {
constructor(v){
// 如果数据层次过多，需要递归去解析对象中的属性，依次增加set和get方法
def(v,'__ob__',this)
if(Array.isArray(v)) {
// 如果是数组的话并不会对索引进行监测，因为会导致性能问题
// 前端开发中很少去操作索引 push shift unshift
v.__proto__ = arrayMethods
// 如果数组里放的是对象，再进行监测
this.observerArray(v)
}else{
//对象则调用walk进行劫持
this.walk(v)
}
}
observerArray(value) {
for(let i=0; i<value.length;i++) {
observe(value[i])
}
}
/* 遍历每一个对象并且为它们绑定getter与setter。该方法只有在数据类型为对象时才能被调用 */
walk(data) {
let keys = Object.keys(data); //获取对象key
keys.forEach(key => {
defineReactive(data,key,data[key]) // 定义响应式对象
})
}
}
function defineReactive(data,key,value){
observe(value) // 递归实现深度监测，注意性能
Object.defineProperty(data,key,{
get(){
// 依赖收集，下期探讨
//获取值
return value
},
set(newV) {
//设置值
if(newV === value) return
observe(newV) //继续劫持newV,用户有可能设置的新值还是一个对象
value = newV
/*dep对象通知所有的观察者，下期探讨*/
//dep.notify()
console.log('值变化了',value)
}
})
}
4.数组方法重写
// 重写数组的7个方法： push,pop,shift,unshift,reverse,sort,splice会导致数组本身改变
let oldArrayMethods = Array.prototype
// value.__proto__ = arrayMethods
// arrayMethods.__proto__ = oldArrayMethods
export let arrayMethods = Object.create(oldArrayMethods)
const methods = [
'push','pop','shift','unshift','reverse','sort','splice'
]
methods.forEach(method=>{
arrayMethods[method] = function(...args) {
console.log('用户调用了：'+method,args)
const res = oldArrayMethods[method].apply(this, args) // 调用原生数组方法
// 添加的元素可能还是一个对象
let inserted = args //当前插入的元素
//数组新插入的元素需要重新进行observe才能响应式
let ob = this.__ob__
switch (method) {
case 'push':
case 'unshift':
inserted = args
break;
case 'splice':
inserted = args.slice(2)
break;
default:
break;
}
if(inserted) {
ob.observerArray(inserted) //将新增属性继续
}
console.log('数组更新了：'+ JSON.stringify(inserted))
//通知所有注册的观察者进行响应式处理,这里下期再来探讨
// ob.dep.notify()
return res
}
})
OK，写到这里我们可以来测试一下我们的Vue了
let vm = new Vue({ el:'#app',
data(){
return{
a:1,
b:{name:'nanjiu'},
c:[{name:'front end'}]
}
},
computed:{}
})
vm._data.a = 2
vm._data.c.push({name:'sss'})
这里控制台应该会打印出如下内容：
这样Vue的数据响应式，我们就算实现了，但这里看着有点别扭，我们希望操作Vue的data里的数据可以直接通过this来获取，而不是通过this._data来获取，这个很简单，我们只需要再做一层代理就可以实现了。
5.代理
export function proxy (target,sourceKey,key) { // target: 想要代理到的目标对象，sourceKey：想要代理的对象
const _that = this
Object.defineProperty(target, key, {
enumerable: true,
configurable: true,
get: function(){
return _that[sourceKey][key]
},
set: function(v){
_that[sourceKey][key] = v
}
})
}
然后再initData里面调用该方法
function initData(vm) { console.log('初始化数据',vm.$options.data)
// 数据初始化
let data = vm.$options.data;
data = vm._data = typeof data === 'function' ? data.call(this) : data
// 对象劫持，用户改变了数据 ==》 刷新页面
// MVVM模式 数据驱动视图
Object.keys(data).forEach(i => {
proxy.call(vm,vm,'_data',i)
})
// Object.definePropety() 给属性增加get和set方法
observe(data) //响应式原理
}
然后我们就可以愉快的使用this直接去访问data里面的数据了～
3.总结
OK，Vue的响应式原理我们就算全都实现了一遍，Vue2的响应式原理主要是通过Object.defineProperty来实现的，但这个方法有缺陷，不能劫持数组，所以对数据需要单独处理，在Vue3中，底层把响应式处理改成了通过proxy来实现，这个方法对数组劫持也同样适用。这里我们只探讨了Vue是如何进行响应式处理，至于它如何收集依赖，以及如何通知视图更新我们下期再来一起学习吧～
觉得文章不错，可以点个赞呀_ 另外欢迎关注留言交流～
以上是 【Vue源码学习】响应式原理探秘 的全部内容， 来源链接： utcz.com/z/378416.html
