同学刷抖音的间隙,我学会了Vue数据代理与数据劫持的原理,前端开发要学哪些课程

35 阅读3分钟

        obj:目标对象

        prop:需要定义的属性或者方法的名字

       descriptor:prop属性所具有的特性

               可供定义的特性列表:

                        value :属性的值

                        writable:若为false,表示属性值不能重写

                        get:一旦目标属性被访问,则自动调用该方法,并返回该方法的调用结果

                        set:一旦目标属性被赋值,则自动调用该方法,进行赋值操作

                        configurable:若为false,则任何尝试删除目标属性,或修改目标属性的

                                    以下特性:writable、configurable、enumerable的行为均无效

                        enumerable:若为true,则可以在for ... in 循环或Object**.**keys()可以枚举出来

二、数据代理


1、含义

通过一个对象,代理对另一个对象的操作,即:读、写操作。

2、原理

每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的:

var vm = new Vue({

// 选项options(配置项)

})

// 数据data对象

var data = { a: 1 }

// 该data对象被加入到一个 Vue 实例中

var vm = new Vue({

data: data

})

上面的代码一般写成下面的形式:也就是直接在Vue函数中,传入 data 配置对象

const vm = new MVVM({

el: "#root",

data: {

a: 1

}

})

数据代理的实质是: 

1. 利用 Object.defineProperty() 方法,给new出来的Vue实例 vm ,添加和 data 配置项中一模一样的属性和值。

2. 为每一个添加到 vm 上的属性,都指定一个 getter/setter 

3. 在 getter/setter 内部去操作(读/写)data 中对应的属性

我们可以在控制台打印 vm ,如下图

可以看到,每一个属性,都有一对 get/set 或 getter/setter方法,这是实现响应式变化的关键

数据代理用到的Vue构造函数伪代码如下:

function MVVM(options){

// 将选项对象保存到vm

this.$options = options

// 将data对象保存到 vm和 新定义的data变量中

var data = this._data = this.$options.data

// 将vm保存在me变量

var me = this

// 遍历data中所有属性名

Object.keys(data).forEach(function (key){

// 每次遍历,实现当前属性的代理

me._proxy(key)

})

// 对data进行监视

observe(data,this)

// 创建一个用来编译模板的compile对象,用来解析模板以及模板里的指令

this.$compile = new Compile(options.el || document.body, this)

}

MVVM.prototype = {

$watch:function(key,cb,options){

new Watcher(this,key,cb)

},

// 调用_proxy方法,对指定的属性实现代理

// _proxy方法接收一个参数key,即原data对象中每个可枚举的属性的属性名

_proxy:function(key){

// 将vm保存在me变量

var me = this

// 给vm添加指定属性名的属性

Object.defineProperty(me,key,{

configurable:false, //不能再重新定义该属性

enumerable:true, //可以枚举

// 使用vm.name的形式读取属性值时,自动调用get/getter回调函数

get:function proxyGetter(){

return me._data[key]

},

// 使用vm.name = 'XXX'形式,写操作时,自动调用set/setter回调函数

set:function proxySetter(newValue){

me._data[key] = newValue

}

})

}

}

在 new 一个 Vue 实例的时候,会调用上面的构造函数 MVVM :

构造函数 MVVM 会接收到一个选项对象 options (也叫配置对象),也就是我们上面说的 new Vue 里面的选项对象

{

    el: "#root",

    data: {

      a: 1

    }

算法刷题

大厂面试还是很注重算法题的,尤其是字节跳动,算法是问的比较多的,关于算法,推荐《LeetCode》和《算法的乐趣》,这两本我也有电子版,字节跳动、阿里、美团等大厂面试题(含答案+解析)、学习笔记、Xmind思维导图均可以分享给大家学习。

写在最后

最后,对所以做Java的朋友提几点建议,也是我的个人心得:

  1. 疯狂编程

  2. 学习效果可视化

  3. 写博客

  4. 阅读优秀代码

  5. 心态调整

开源分享:docs.qq.com/doc/DSmRnRG…