【前端vue——系列2】vue中的data是函数而不是对象与computed的实现原理

系列文章总结

【前端vue——系列1】vue的路由
【前端vue——系列2】vue中的data是函数而不是对象与computed的实现原理
【前端vue——系列3】vue框架的优缺点；vue实现双向绑定
【前端vue——系列4】vuex和angular
【前端vue——系列5】生命周期详讲（vue的生命周期、页面的生命周期）

---

---

一、vue中的data是函数而不是对象

• object是引用数据类型，如果data不用函数返回，每个组件的data都是内存的同一个地址，一个数据发生变化，那么其他的也发生改变；
• js只有函数构成作用域，data是一个函数时，每个组件实例都有自己的作用域，每个实例相互独立，不会相互影响，每次都返回一个新对象，不会造成数据干扰。

const MyComponent = function() {};
MyComponent.prototype.data = {
    a: 1,
    b: 2
}
const component1 = new MyComponent();
const component2 = new MyComponent();
 
component1.data.a === component2.data.a; // true
component1.data.b = 5;
component2.data.b //5

如上所示：如果两个实例同时引用一个对象，那么当你修改其中一个属性时，另一个实例也会跟着改变

所以要有各自的作用域才行：

const MyComponent = function() {
this.data = this.data();
};
MyComponent.prototype.data = function() {
return {
a:1,
b:2
}
};

这样一个实例的data属性就是独立的就不会互相影响了。

---

二、vue中computed的实现原理

2.1 computed的计算属性：

计算属性的主要应用场景是代替模板内的表达式，或者data值的任何复杂逻辑都应该使用computed计算，它有两大优势：

1. 逻辑清晰，便于管理
2. 计算值会被缓存，依赖的data值改变时才会重新开始计算

2.2 computed的实现原理：

computed的基本特性是：

1. 当data数据变更时，computed会更新。
2. 当computed中没有引入的数据更新时，computed不会去重新计算，大幅度节省计算量

实际上是vue内部创建了一个Dep类，computed用来监控自己定义的变量，该变量不在data里面声明，直接在computed里面定义，然后就可以在页面上进行双向数据绑定，计算属性不是异步更新的，渲染的时候才能拿到最新的值计算属性的核心就是定义了一个dirty，实现了一个缓冲的机制：

1. comuted内部实现了一个惰性的watcher，也就是computedWatchers，
2. computedWatchers不会立刻求值，同时持有一个dep实例，其内部通过this.dirty属性标记计算属性是否需要重新求值。

2.3 computed与watcher和methods的区别：

1. methods方法只要把方法用到模板上了，当每一次变化就会重新渲染视图，它的性能开销就比较大，computed计算属性也是一个watcher，是具备缓存的，只有当依赖的属性发生变化时才会更新视图，如果页面中有属性需求计算不要在页面中这样写{{fn()}},这个时候可以写一个计算属性，渲染时它依赖的属性没有发生变化，他就不会导致方法重新执行。
2. computed和watch的原理是他们都是里面一个watcher来实现的，computed是具备缓存的，watch不具备缓存

---

码字不易~， 各位看官要是看爽了，可不可以三连走一波，点赞皆有好运！，不点赞也有哈哈哈~~~