Vue知识回顾与总结

Vue知识总结与回顾

第一章 Vue的响应样式原理(Onject篇)

写在前面

工作之余，利用个人时间刷了一遍《深入浅出Vue.js》，书中对Vue的源码做了详细的分析和讲解，读完此书结合自己最近使用Vue开发的经历以及开发过程中碰到的一些困惑和Bug,感觉收货颇丰，遂决定提笔记录一下自己在学习过程中的新的体会。当然也希望将这些东西通过文字的方式分享出来，大家一起交流一起学习。此外在此推荐一篇讲解vue.js源码的文章逐行剖析Vue.js源码。由于Vue讲解源码的博文或者知识比较多，我在后续的文章中就不在过多涉及源码分析。

• 好了，接下来回到正文。

Object.defineProperty

学Vue 的这个东西应该是再熟悉不过了吧。

• Vue2使用ES5的Object.defineProperty实现对象的变化侦测
• Vue3使用ES6的Proxy实现变化侦测
  关于Object.defineProperty点此传送门Object.defineProperty
  我们只需要知道通过Object.defineProperty可以设置对象的属性是否可写，是否可枚举…最重要的是当读取该属性的值是会触发getter 函数，当设置或便捷该属性的值时会触发setter函数

Vue中的依赖

依赖？？？😢

　　经高人指点，让我把依赖假设成一个函数并且保存到window.target上。首先有了这个概念之后理解依赖收集和依赖通知（触发）就比较容易了。我们可以简单的定义一个数组dep，在Object.defineProerty的getter中把依赖添加到数组dep中，当属性值发生改变是，在setter中循环dep数组，执行依赖函数。简单的讲，就是在getter中收集依赖，setter 中触发依赖。这样当属性值发生变化时就能通过setter函数通知依赖数据更新了。
　　当然Vue的做法不会这么简单，Vue实现了一个Dep类，专门用来管理依赖。

Watcher

• 依赖是一个比较抽象的概念，Vue将其抽象为Watcher类
• Watcher 是一个抽象的角色，当数据变化时先通知Watcher，然后由Watcher再通知具体应用数据的地方。

Watcher 实现了get()和update()方法，然后在get()中触发getter进行依赖收集（将依赖watcher添加到dep的subs数组中）,当属性发生变化时循环subs执行依赖watcher的update()方法,并在update()中执行相应的业务逻辑和数据更新通知。

• 总结 Vue实现了一个Watcher类实现依赖注册和通知下发，依赖就是Watcher类的实例watcher

Observer

        上面的介绍的内容已经可以对数据的单个属性进行侦测，Vue封装了一个Observer类通过循环递归来实现将一个数据的所有属性都转换成setter和getter形式，实现所有属性可侦测。

$set 和 $Delete

        Object.defineProerty只能侦测到一个现有的属性是否被修改，而无法侦测到新属性的添加，以及属性删除。为了解决这个问题，Vue提供了两个全局API$set 和 $Delete。

this.$set(obj,newkey,value)
this.$delete(obj,key)

总结

• Data 通过 Observer 将所有属性转换成setter和getter形式，实现数据侦测。
• getter中收集依赖，setter中触发依赖。
• 依赖是Watcher实例，通过get()自动注册依赖，通过update()下发通知（触发视图更新渲染或触发用户回调函数）
• 实现Dep类来管理依赖，收集依赖，删除依赖和通知依赖
• $set 和 $Delete解决Object.defineProerty只能侦测到一个现有的属性是否被修改，而无法侦测到新属性的添加，以及属性删除的弊端。