浅谈实现vue2.0响应式的基本思路

浅谈实现vue2.0响应式的基本思路

最近看了vue2.0源码关于响应式的实现，以下博文将通过简单的代码还原vue2.0关于响应式的实现思路。

注意，这里只是实现思路的还原，对于里面各种细节的实现，比如说数组里面数据的操作的监听，以及对象嵌套这些细节本实例都不会涉及到，如果想了解更加细节的实现，可以通过阅读源码 observer文件夹以及instance文件夹里面的state文件具体了解。

首先，我们先定义好实现vue对象的结构

class Vue {

constructor(options) {

this.$options = options;

this._data = options.data;

this.$el = document.querySelector(options.el);

}

}

第一步：将data下面的属性变为observable

使用Object.defineProperty对数据对象做属性get和set的监听，当有数据读取和赋值操作时则调用节点的指令，这样使用最通用的=等号赋值就可以触发了。

//数据劫持，监控数据变化

function observer(value, cb){

Object.keys(value).forEach((key) => defineReactive(value, key, value[key] , cb))

}

function defineReactive(obj, key, val, cb) {

Object.defineProperty(obj, key, {

enumerable: true,

configurable: true,

get: ()=>{

return val

},

set: newVal => {

if(newVal === val)

return

val = newVal

}

})

}

第二步：实现一个消息订阅器

很简单，我们维护一个数组，这个数组，就放订阅者，一旦触发notify，订阅者就调用自己的update方法

class Dep {

constructor() {

this.subs = []

}

add(watcher) {

this.subs.push(watcher)

}

notify() {

this.subs.forEach((watcher) => watcher.cb())

}

}

每次set函数，调用的时候，我们触发notify，实现更新

那么问题来了。谁是订阅者。对，是Watcher。。一旦 dep.notify()就遍历订阅者，也就是Watcher，并调用他的update()方法

function defineReactive(obj, key, val, cb) {

const dep = new Dep()

Object.defineProperty(obj, key, {

enumerable: true,

configurable: true,

get: ()=>{

return val

},

set: newVal => {

if(newVal === val)

return

val = newVal

dep.notify()

}

})

}

第三步：实现一个 Watcher

Watcher的实现比较简单，其实就是执行数据变化时我们要执行的操作

class Watcher {

constructor(vm, cb) {

this.cb = cb

this.vm = vm

}

update(){

this.run()

}

run(){

this.cb.call(this.vm)

}

}

第四步：touch拿到依赖

上述三步，我们实现了数据改变可以触发更新，现在问题是我们无法将watcher与我们的数据联系到一起。

我们知道data上的属性设置defineReactive后，修改data 上的值会触发 set。那么我们取data上值是会触发 get了。所以可以利用这一点，先执行以下render函数，就可以知道视图的更新需要哪些数据的支持，并把它记录为数据的订阅者。

function defineReactive(obj, key, val, cb) {

const dep = new Dep()

Object.defineProperty(obj, key, {

enumerable: true,

configurable: true,

get: ()=>{

if(Dep.target){

dep.add(Dep.target)

}

return val

},

set: newVal => {

if(newVal === val)

return

val = newVal

dep.notify()

}

})

}

最后我们来看用一个代理实现将我们对data的数据访问绑定在vue对象上

_proxy(key) {

const self = this

Object.defineProperty(self, key, {

configurable: true,

enumerable: true,

get: function proxyGetter () {

return self._data[key]

},

set: function proxySetter (val) {

self._data[key] = val

}

})

}

Object.keys(options.data).forEach(key => this._proxy(key))

下面就是整个实例的完整代码

class Vue {

constructor(options) {

this.$options = options;

this._data = opthttp://ions.data;

this.$el =document.querySelector(options.el);

Object.keys(options.data).forEach(key => this._proxy(key))

observer(options.data)

watch(this, this._render.bind(this), this._update.bind(this))

}

_proxy(key) {

const self = this

Object.defineProperty(self, key, {

configurable: true,

enumerable: true,

get: function proxyGetter () {

return self._data[key]

},

set: function proxySetter (val) {

sehttp://lf._data[key] = val

}

})

}

_update() {

console.log("我需要更新");

this._render.call(this)

}

_render() {

this._bindText();

}

_bindText() {

let textDOMs=this.$el.querySelectorAll('[v-text]'),

bindText;

for(let i=0;i

bindText=textDOMs[i].getAttribute('v-text');

let data = this._data[bindText];

if(data){

textDOMs[i].innerHTML=data;

}

}

}

}

function observer(value, cb){

Object.keys(value).forEach((key) => defineReactive(value, key, value[key] , cb))

}

function defineReactive(obj, key, val, cb) {

const dep = new Dep()

Object.defineProperty(obj, key, {

enumerable: true,

configurable: true,

get: ()=>{

if(Dep.target){

dep.add(Dep.target)

}

return val

},

set: newVal => {

if(newVal === val)

return

val = newVal

dep.notify()

}

})

}

function watch(vm, exp, cb){

Dep.target = new Watcher(vm,cb);

return exp()

}

class Watcher {

constructor(vm, cb) {

this.cb = cb

this.vm = vm

}

update(){

this.run()

}

run(){

this.cb.call(this.vm)

}

}

class Dep {

constructor() {

this.subs = []

}

add(watcher) {

this.subs.push(watcher)

}

notify() {

this.subs.forEach((watcher) => watcher.cb())

}

}

Dep.target = null；

var demo = new Vue({

el: '#demo',

data: {

text: "hello world"

}

})

setTimeout(function(){

demo.text = "hello new world"

}, 1000)

bindText=textDOMs[i].getAttribute('v-text');

let data = this._data[bindText];

if(data){

textDOMs[i].innerHTML=data;

}

}

}

}

function observer(value, cb){

Object.keys(value).forEach((key) => defineReactive(value, key, value[key] , cb))

}

function defineReactive(obj, key, val, cb) {

const dep = new Dep()

Object.defineProperty(obj, key, {

enumerable: true,

configurable: true,

get: ()=>{

if(Dep.target){

dep.add(Dep.target)

}

return val

},

set: newVal => {

if(newVal === val)

return

val = newVal

dep.notify()

}

})

}

function watch(vm, exp, cb){

Dep.target = new Watcher(vm,cb);

return exp()

}

class Watcher {

constructor(vm, cb) {

this.cb = cb

this.vm = vm

}

update(){

this.run()

}

run(){

this.cb.call(this.vm)

}

}

class Dep {

constructor() {

this.subs = []

}

add(watcher) {

this.subs.push(watcher)

}

notify() {

this.subs.forEach((watcher) => watcher.cb())

}

}

Dep.target = null；

var demo = new Vue({

el: '#demo',

data: {

text: "hello world"

}

})

setTimeout(function(){

demo.text = "hello new world"

}, 1000)

上面就是整个vue数据驱动部分的整个思路。如果想深入了解更细节的实现，建议深入去看vue这部分的代码。

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。