欢迎光临
我的个人博客网站

浅谈vue原理(一)

  哎,不知道多久之前说的要说说vue原理的,后来就忘记了,嘿嘿,这次就来看看vue的大概原理吧!

  看过我博客的人应该知道,我不是很喜欢用那种太专业的术语的,喜欢用小白都能看懂的话来说,所以可能有的地方表达的不是很专业,不要打我╮(╯_╰)╭

  前提:起码要简单使用过vue,知道怎么用

1.vue的作用  

  首先,我们知道有一个东西叫做mvvm,不懂这个没关系,其实就是简称双向数据绑定,可以拆成三部分,m(model),v(view),vm(viewmodel);

  想一想,假如我们要把html标签中的数据和js中的数据相互产生联系,一般会怎么做?传统的做法就是获取dom节点,然后向其中设置新的值覆盖旧的值就行了,类似下面这样的:

浅谈vue原理(一)

 

  但是每次都要去获取这个dom节点真的很烦,当html标签很多的时候看找这个节点的选择器都看花了眼,想偷个懒怎么办?最好是在<script>标签中写js代码的地方,有个变量和html标签中的变量是一个共同体,只要修改了其中一个另外一个就会发生变化;

  那么现在的问题就是,怎么将那个变量和html标签中的变量建立联系呢?俗话说得好,解决不了两个对象之间的关系,那就建立一个中间层就好了,如果建立一个还解决不了,那就再建立一个中间层!

  所以这里,我们就需要建立一个中间层来维持js中变量和html中变量的关系,下图所示,那个vue.js文件就是中间层;

浅谈vue原理(一)

 

  用专业一点的图就是这样的,下图所示;

浅谈vue原理(一)

   现在应该大概懂了啥叫做mvvm了吧!然后我们只需要再深入一下从view->model,然后反着model->view的绑定过程就ok了;两个方向都要看看嘛,所以就叫做双向绑定啊!

 

2.Object.defineProperty()

  第一次看到这个方法肯定比较懵逼,这方法干嘛的啊?

  我们可以看看这样的一个场景,一个对象let a = { name: 0 },如果我要给这个对象的那么属性修改应该怎么做?我的话,肯定在想,尼玛谁的name居然是0啊肯定写错了,我上去就是一个滑铲就写了a.name = “小王”;(牛批!鼓掌╮(╯_╰)╭)

  那么有没有想过a.name=”小王”这到底是怎么调用的啊?为啥一个点然后加个属性名就可以给这个对象增加一个属性啊?

  我找了一下,有兴趣的可以参考这个老哥的博客 ,用一句话来说明就是在你声明一个对象的时候,js会偷偷的给这个对象添加一个set和get方法,然后这个方法还不让你看到,只是会在你去a.name的时候会判断后面有没有赋值语句,有的话就调用set方法,没有的话就调用get方法;

  如果有小伙伴学过其他的面向对象的语言的,比如java,应该知道这种get/set方法肯定是我们需要自己生成的,能够实际看得到;

  那么现在又来一个奇葩的场景,在使用a.name=”小王”的时候,同时还要打印这样一句话:“呵呵,现在是在修改值哦๑乛◡乛๑”;

  第一种方式,我们可以这样做,手动的去修改a对象去覆盖自带的set方法:

let a = {       // 加了下划线可以当作私有属性啊(当然,这个不是真正的私有属性啊,有兴趣的可以看看这个博客真正私有属性的实现https://www.cnblogs.com/Mr-O-o-Lee/p/13781362.html)       _name: 0,       // 覆盖自带的set方法       set name(val) {         console.log('呵呵,现在是在修改值哦๑乛◡乛๑');         this._name = val;       }     }     a.name = "小王";

 

  一番波折我们也是完成了,不错不错!但是有没有考虑一个问题,如果这个对象是别人写的呢?你去把别人写的东西给改了……。那么我们有没有什么方法在不修改代码的情况下实现上面的功能呢?

  第二种方法:我们可以使用Object.defineProperty(),我们把上面代码这样修改一下,也是可以的(同理,也可以添加get方法,自己试试;)

let a = {       _name: 0,     }     // 在不改变对象的前提下添加功能     Object.defineProperty(a, 'name', {       configurable: true,       set: (val)=>{         console.log('呵呵,现在是在修改值哦๑乛◡乛๑');         _name = val;       }     })     a.name = "小王";

 

  瞎比比了大半天,终于快把Object.defineProperty()说完了,上面代码中有configurable表示描述属性是否配置,以及可否删除,还有enumerable表示该属性是否能被for in 或者 Object.keys()遍历到;当然还有其他的属性自行了解;

  而vue中就是使用到了Object.defineProperty(),在上面的例子中可以看到,我们可以给一个对象的属性添加get/set方法,在修改属性值的时候,调用set方法中拿到新的值的同时还可以做自定义处理的,专业说法叫做数据劫持。

 

3.数据代理

  一句话解释清楚什么叫做数据代理:就是将data中的所有数据的地址丢到vue实例中一份,以便于我们可以直接使用vue.xxx去获取属性值vue.data.xxx,伪代码如下:

浅谈vue原理(一)

 上面这个图中,假如我们这样写myVue.message=”world”,实际上调用的是myVue.data.message=”world”,所以就会触发message属性的数据劫持,调用set方法!

 

 4.手动实现的代码

html部分:

<body>   <div id="app">     <h1>{{message}}</h1>   </div>    <script src="./mvvm.js"></script>   <script>     //1.myVue中不能在data中新增不存在的属性,例如,不能在初始化之后还使用myVue.data.name="小王",变成了下面这样,此时的name没有经过数据劫持     //2.对于data中属性值的获取或者修改都会触发数据劫持,也就是在初始化的过程中会给的所有属性添加get/set方法      // 自定义的myVue实例     let myVue = new MyVue({       el: '#app',       data: {         message: { a: { b: 1 } }       }     })   </script> </body>

 

js部分:

function MyVue (options = {}) {   //第一步:首先就是得到data对象   this.$options = options;   this._data = this.$options.data;    //第二步:数据劫持,将data对象中每一个属性都设置get/set方法   observe(this._data);    //第三步:数据代理,这里就是将_data的对象属性放到myVue实例中一份,如果修改属性值实际上修改的还是data中的数据,会触发数据劫持   for (let key in this._data) {     //这里的this代表当前myVue实例对象     Object.defineProperty(this, key, {       enumerable: true,       get () {         return this._data[key];       },       set (newVal) {         this._data[key] = newVal;       }     })   } }  //数据劫持操作 function observe (data) {   // 如果data不是对象,就结束,不然递归调用会栈溢出的   if (typeof data !== 'object') return;   return new Observe(data); }  function Observe (data) {   // 遍历data所有属性   for (let key in data) {     let val = data[key];     //初始化的时候, data中就有复杂对象的时候,例如data: { message:{a:{b:1}}}  ,就需要递归的遍历这个对象中每一个属性都添加get和set方法     observe(val);     Object.defineProperty(data, key, {       enumerable: true,       get () {         return val;       },       set (newVal) {         if (val === newVal) return;         val = newVal;         //当后续可能因为业务逻辑使得_data.message = {name: "小王"},设置对象类型的属性值,就需要递归的给对象中{name: "小王"}的每个属性也添加get和set方法         //否则name是没有get/set方法的         observe(val);       }     })   } }

 

 

 

 

赞(0) 打赏
未经允许不得转载:张拓的天空 » 浅谈vue原理(一)
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏