defineReactive-用于定义非data变量响应
function defineReactive$$1 (
obj,
key,
val,
customSetter,
shallow
) {
var dep = new Dep();
var property = Object.getOwnPropertyDescriptor(obj, key);
if (property && property.configurable === false) {
return
}
// cater for pre-defined getter/setters
var getter = property && property.get;
var setter = property && property.set;
if ((!getter || setter) && arguments.length === 2) {
val = obj[key];
}
var childOb = !shallow && observe(val);
Object.defineProperty(obj, key, {
enumerable: true,
configurable: true,
get: function reactiveGetter () {
var value = getter ? getter.call(obj) : val;
if (Dep.target) {
dep.depend();
if (childOb) {
childOb.dep.depend();
if (Array.isArray(value)) {
dependArray(value);
}
}
}
return value
},
set: function reactiveSetter (newVal) {
var value = getter ? getter.call(obj) : val;
/* eslint-disable no-self-compare */
if (newVal === value || (newVal !== newVal && value !== value)) {
return
}
/* eslint-enable no-self-compare */
if (customSetter) {
customSetter();
}
// #7981: for accessor properties without setter
if (getter && !setter) { return }
if (setter) {
setter.call(obj, newVal);
} else {
val = newVal;
}
childOb = !shallow && observe(newVal);
dep.notify();
}
});
}
使用了一个 Object.defineProperty,方法里面使用get与set,get方法里面使用dep.depend()进行依赖收集
获取数据-》触发get方法,然后使用依赖收集对更新的组件进行收集
例如:helloWorld组件中data数据里只有a变量发生变化,那么只更新a
更新:set
通过dep.notify();去更新
理解Vue.mixin–混入
可写一个全局定义的方法或者是弹框等
可以查看文章理解Vue.mixin,利用Vue.mixin正确的偷懒
Render函数-作用于多变的dom(复杂逻辑的HTML)
vue-router源码
extend -把对象变成vue对象
1.随时插入组件-调用实例
2.单元测试
如果你import一个.vue文件,引入的只是一个js对象
如果你使用vue.extend({
data:{},
methods:{},
template:
})
拿到的就是vue构造类而不是一个实例化对象