Vue实现computed(Vue原理之步骤六)

for(let i = 0; i < keys.length; i++){

//new一个Watcher的实例,

new Watcher(this,keys[i],watch[keys[i]])

}

}

}

initComputed(){

let computed = this.$options.computed

//判断如果存在计算属性,进行遍历

if(computed){

let keys = Object.keys(computed)

for(let i = 0; i < keys.length; i++) {

//传入第四个参数,computed是惰性的

const watcher = new Watcher(this,computed[keys[i]],function() {},{lazy:true})

//把该属性添加到vue实例上,并设置只能取,不能存

Object.defineProperty(this,keys[i],{

enumerable:true,

configurable:true,

get : function computerGetter() {

if(watcher.dirty) {

watcher.get()

watcher.dirty = false

}

//返回出去

return watcher.value

},

set : function computedSetter() {

console.warn(‘请不要给计算属性computed赋值’)

}

})

}

}

}

//实例对象上挂载一个和watch同样的方法

$watch(key,cb) {

new Watcher(this,key,cb)

}

//实现$set方法

$set(target,key,value){

//新增的属性也变成响应式的

defineReactive(target,key,value)

//执行

target.ob.dep.notify()

}

}

//判断类型的函数observe

/**

• @param {*} data

*/

function observe(data) {

//判断data的数据类型

let type = Object.prototype.toString.call(data)

//如果是基本类型就直接返回

if(type !== ‘[object Object]’ && type !== ‘[object Array]’){

return

}

if(data.ob){

return data.ob

}

//如果是复杂类型,new一个实例

return new Observer(data)

}

//创建一个观察值类,观察data中的数据变化

class Observer {

constructor(data) {

//数组不能使用Object.defineProperty,下标会乱 ,需要判断一下

if(Array.isArray(data)){

data.proto = ArrayMethods

//初始化

this.observeArray(data)

}else{

//调用函数

this.walk(data)

}

//实现$set需要重新new一个Dep实例

this.dep = new Dep()

//在data中新增一个__ob__属性,设置该属性不可遍历

Object.defineProperty(data,‘ob’,{

value:this,

//不可遍历

enumerable:false,

configurable:true,

writable:true

})

}

//walk函数

walk(data) {

let keys = Object.keys(data)

for(let i = 0; i < keys.length; i++){

//代用抽离出去的函数

defineReactive(data,keys[i],data[keys[i]])

}

}

//数组循环,变成响应式的

observeArray(arr){

for(let i = 0 ; i < arr.length; i++){

//调用observe函数

observe(arr[i])

}

}

}

//抽离函数

/**

• @param {*} obj 传进来的对象

• @param {*} key 属性

• @param {*} value 之前的值

*/

function defineReactive(obj,key,value){

//递归,判断数据类型

let childObj = observe(obj[key])

//new一个dep的实例

let dep = new Dep()

Object.defineProperty(obj,key,{

enumerable:true,

configurable:true,

//获取到属性值时调用该函数

get:function reactiveGetter(){

//调用depend函数收集回调函数

dep.depend()

//也收集一份,先判断是否存在

if(childObj) {

childObj.dep.depend()

}

//或取到的值返回出去

return value

},

//设置值的时候掉用该函数

set:function reactiveSetter(val){

//对比新设置的值和原来的值是否相同

if(val === value){

//相同的话直接返回

return

}

//执行相应回调

dep.notify()

//否则,设置新值

value = val

}

})

}

//新建一个dep的类

class Dep{

constructor(){

//收集的回调存放在数组中

this.subs = []

}

//收集回调函数

depend() {

//把回调添加到数组中

if(Dep.target) {

//把含有不同属性的Watcher实例添加到数组中

this.subs.push(Dep.target)

}

}

//执行相应的回调函数

notify() {

//循环遍历数组,执行相应回调

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

// watcher指的是数组中的每一项,每一项是Watcher实例,实例中包含run函数

//一次执行回调函数

watcher.update()

})

}

}

//每一个watcher的标识

let watcherId = 0;

//存放标识id的数组,用于检查是否有相同的watch

let watcherQueue = [];

//把回调抽象成一个Watcher类

class Watcher {

//参数1:vue实例,参数2:哪一个属性,参数3:回调函数是什么

constructor(vm,exp,cb,options = {}){

this.dirty = this.lazy = !!options.lazy

this.vm = vm;

this.exp = exp;

this.cb = cb;

this.id = ++watcherId;

//如果不是惰性,执行get函数

if(!this.lazy){

this.get()

}

}

//求值

get(){

//把Watcher类的this 挂载到Dep类的静态属性上,相当于把Watcher实例挂载到全局了

Dep.target = this;

//判断第二个参数是函数的话

if(typeof this.exp === ‘function’){

//定义一个实例下的value保存值,把函数exp的this改变为vue实例

this.value = this.exp.call(this.vm)

}else {

//调用下边这个表达式,触发数据劫持中get函数,从而调用depend函数

this.value = this.vm[this.exp]

}

//然后清空

Dep.target = null

}

update() {

if(this.lazy) {

this.dirty = true

}else {

this.run()

}

}

//执行函数

run() {

//当存在于数组中

if(watcherQueue.indexOf(this.id) !== -1){

return

}

watcherQueue.push(this.id)

let index = watcherQueue.length - 1

//不存在的时候,异步执行

Promise.resolve().then(()=>{

//调用回调函数cb时,把this指向改变为vue实例

this.cb.call(this.vm)

//然后把数组中删掉

watcherQueue.splice(index,1)

})

}

}

//创建一个对象

const ArrayMethods = {}

//把这个对象的原型对象指向数组的原型

ArrayMethods.proto = Array.prototype

//把修改的方法名放在数组中

const methods = [

‘push’,

‘pop’,

//其他拦截的方法

]

//循环要拦截的方法

methods.forEach(method => {

//把传递过来的参数放在数组中,使用扩展运算符展开

ArrayMethods[method] = function(…args){

//如果是push方法,传入的是一个数组的话

if(method === ‘push’){

this.ob.observeArray(args)

}

//调用原来的方法 改变this指向,然后传参

const result = Array.prototype[method].apply(this,args)

//手动调用notify执行

this.ob.dep.notify()

//把结果返回出去

return result

}

})

1.上边代码和原版Vue比较有问题

使用以下代码测试,分别测试原版vue.js和自己写的vue.js

let vm = new Vue({

data:{

person:{

name:‘zhangsan’

}

},

watch:{

x() {//2号watcher

console.log(‘x监听’)

}

},

computed:{

x() {//1号watcher

console.log(‘x计算’)

return JSON.stringify(this.person)

}

}

})

1.原版的vue.js,打印vm

2.自己写的vue.js,打印vm

分析原因:

把computed中的watcher称为1号watcher,把watch中的watcher称为2号watcher,在代码中initWatcher调用时,2号watcher上台求值,触发了person的getter,触发1号watcher的get()方法,1号watcher也上台,覆盖了2号watcher,person的筐(前几篇提到的存和取回调函数的数组)开始收集1号watcher,结束后清空舞台,person并没有收集到1号watcher

解决思路:

维护一个栈,有新的watcher上台时入栈,下台时出栈,台上永远是栈顶的watcher;

watcher被dep收集时,也收集dep,互相收集,这样的话,计算属性getter完成后,检查舞台上还有没有watcher,有就把自己的watcher收集的dep拿出来通知,收集舞台上的watcher

解决问题的版本

class Vue {

//options是传过来的参数类似一个对象

constructor(options){

//把options存起来,可能会在实例中用到

this.$options = options

//data可能会是函数

this._data = options.data

this.initData()

this.initComputed()

this.initWatch()

}

initData() {

let data = this._data;

//获取到data对象中所有的键

let keys = Object.keys(data)

//循环遍历 实现数据代理

for(let i = 0 ; i < keys.length ; i++){

Object.defineProperty(this,keys[i],{

//设置为true,表示可以被遍历

enumerable:true,

//可以删除属性,或者修改其特性(writable,configurable,enumerable)

configurable:true,

//获取值的时候触发

get:function proxyGetter(){

//获取到的值返回出去

return data[keys[i]]

},

//修改值的时候触发

set:function proxySetter(value) {

//改变值的时候,给获取到的值赋值新值value

data[keys[i]] = value

}

})

}

//调研判断是基本类型还是复杂类型的数据 来实现数据劫持

observe(data)

}

initWatch() {

//$options参数对象中是否有watch这个属性

let watch = this.$options.watch

if(watch) {

let keys = Object.keys(watch)

//遍历watch属性中的值

for(let i = 0; i < keys.length; i++){

//new一个Watcher的实例,

new Watcher(this,keys[i],watch[keys[i]])

}

}

}

initComputed(){

let computed = this.$options.computed

//判断如果存在计算属性,进行遍历

if(computed){

let keys = Object.keys(computed)

for(let i = 0; i < keys.length; i++) {

//传入第四个参数,computed是惰性的

const watcher = new Watcher(this,computed[keys[i]],function() {},{lazy:true})

//把该属性添加到vue实例上,并设置只能取,不能存

Object.defineProperty(this,keys[i],{

enumerable:true,

configurable:true,

get : function computerGetter() {

if(watcher.dirty) {

watcher.get()

watcher.dirty = false

}

// 已经收集了1号watcher,此时1号watcher也记录了person的dep

if(Dep.target) {

//1号watcher收集到的dep,把这些dep一个个的拿出来通知他们收集,现在仍然在2号watcher

for(let j = 0; j < watcher.deps.length; j++) {

watcher.deps[j].depend()

}

}

//返回出去

return watcher.value

},

set : function computedSetter() {

console.warn(‘请不要给计算属性computed赋值’)

}

})

}

}

}

//实例对象上挂载一个和watch同样的方法

$watch(key,cb) {

new Watcher(this,key,cb)

}

//实现$set方法

$set(target,key,value){

//新增的属性也变成响应式的

defineReactive(target,key,value)

//执行

target.ob.dep.notify()

}

}

//判断类型的函数observe

/**

• @param {*} data

*/

function observe(data) {

//判断data的数据类型

let type = Object.prototype.toString.call(data)

//如果是基本类型就直接返回

if(type !== ‘[object Object]’ && type !== ‘[object Array]’){

return

}

if(data.ob){

return data.ob

}

//如果是复杂类型,new一个实例

return new Observer(data)

}

//创建一个观察值类,观察data中的数据变化

class Observer {

constructor(data) {

//数组不能使用Object.defineProperty,下标会乱 ,需要判断一下

if(Array.isArray(data)){

web浏览器中的javascript

• 客户端javascript
• 在html里嵌入javascript
• javascript程序的执行
• 兼容性和互用性
• 可访问性
• 安全性
• 客户端框架
• 开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

window对象

• 计时器

• 浏览器定位和导航

• 浏览历史

• 浏览器和屏幕信息

• 对话框

• 错误处理

• 作为window对象属性的文档元素