7.最俗学习之-Vue源码学习-数据篇(中)
2018-02-05 本文已影响59人
木子tar
这里还是从例子说起，丰富一下例子的参数变成这样
噢，这里首先推荐两篇文章，写的非常好
第一篇对Vue的数据响应系统有很清晰的了解，这个文章估计很多人都知道
第二篇对dep，watcher讲解的非常好，网上有很多文章都有讲解，但是都只是在代码逻辑上讲解，这里
作者很清晰的把来龙去脉讲解的很好，而不是完全从代码逻辑上解析
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app">
<child-component :c="vmC"></child-component>
</div>
</body>
<script type="text/javascript" src="vue.js"></script>
<script>
var mixin = {
beforeCreate () {
console.log('beforeCreate from mixin')
}
}
var childComponent = {
props: {
c: {
type: Number,
default: 99,
validator (val) {
return typeof val === 'number'
}
}
},
template: `<h1 style="color: red;"> {{ c }} </h1>`
}
let vm = new Vue({
el: '#app',
data: {
a: 1,
b: [1, 2, 3],
vmC: 4
},
beforeCreate () {
console.log('beforeCreate 2')
},
watch: {
a () {
console.log(this.vmC)
}
},
components: {
childComponent: childComponent
},
mixins: [mixin]
})
setTimeout( () => {
vm.a = 3;
}, 2000)
console.log(vm)
</script>
</html>
添加了watch字段，添加了一个组件，组件使用props字段，传入的props的c是vm上的一个值vmC，watch实例vm，
上的a属性，定时器2秒后值变化，触发a的watch事件，这个也是很常用的例子，再回到源码的初始化方法
export function initState (vm: Component) {
vm._watchers = []
const opts = vm.$options
if (opts.props) initProps(vm, opts.props)
if (opts.methods) initMethods(vm, opts.methods)
if (opts.data) {
initData(vm)
} else {
observe(vm._data = {}, true /* asRootData */)
}
if (opts.computed) initComputed(vm, opts.computed)
if (opts.watch) initWatch(vm, opts.watch)
}
// 那么这里就会走initProps和initWatch两个方法，这里要说下，子组件的props字段最后会合并再这
// 个options上面，具体是前面说过的一段
if (options && options._isComponent) { // 这里子组件会进入这里处理
// optimize internal component instantiation
// since dynamic options merging is pretty slow, and none of the
// internal component options needs special treatment.
initInternalComponent(vm, options)
} else {
vm.$options = mergeOptions(
resolveConstructorOptions(vm.constructor),
options || {},
vm
)
}
// 这里我们还是看initProps和initWatch两个方法，首先是props
export const observerState = { // 这个是另外一个值，在observer/index.js里面，和这里相关
shouldConvert: true,
isSettingProps: false
}
const isReservedProp = { key: 1, ref: 1, slot: 1 } // 定义的一个值
// 这里有个地方要注意vm.$options.propsData和参数props，按照我们这个例子，它们分别是这样的
这个propsData很多文章都说是用来测试用的，但是这里的用处感觉不仅仅是测试吧，难道是我还没法理解- -#
vm.$options.propsData = { // 这个是真实的值
c: 4
}
props = { // 这个是我们传入的参数选项
c: {
type: Number,
default: 99,
validator (val) {
return typeof val === 'number'
}
}
}
function initProps (vm: Component, props: Object) {
const propsData = vm.$options.propsData || {} // 上面说了，所以这里propsData = {c: 4}
const keys = vm.$options._propKeys = Object.keys(props) // 获取props的key，也就是keys = ['c']
const isRoot = !vm.$parent // false，不是根实例的
// root instance props should be converted
observerState.shouldConvert = isRoot // 赋值，observerState.shouldConvert = false
for (let i = 0; i < keys.length; i++) { // 对每个key进行defineReactive，这里我们只有c这个值
const key = keys[i]
/* istanbul ignore else */
if (process.env.NODE_ENV !== 'production') {
if (isReservedProp[key]) { // 禁止使用key, ref, slot三个值作为prop
warn(
`"${key}" is a reserved attribute and cannot be used as component prop.`,
vm
)
}
defineReactive(vm, key, validateProp(key, props, propsData, vm), () => {
if (vm.$parent && !observerState.isSettingProps) { // 这里大概意思就是根实例的props不能赋值吧，猜测的，不常用，暂时不管
warn(
`Avoid mutating a prop directly since the value will be ` +
`overwritten whenever the parent component re-renders. ` +
`Instead, use a data or computed property based on the prop's ` +
`value. Prop being mutated: "${key}"`,
vm
)
}
})
} else {
defineReactive(vm, key, validateProp(key, props, propsData, vm))
}
}
observerState.shouldConvert = true // 变回默认值，这个暂时不明白用处
}
// 最后剩下重点，就是这个东西
defineReactive(vm, key, validateProp(key, props, propsData, vm), () => {
if (vm.$parent && !observerState.isSettingProps) { // 这里大概意思就是根实例的props不能赋值吧，猜测的，不常用，暂时不管
warn(
`Avoid mutating a prop directly since the value will be ` +
`overwritten whenever the parent component re-renders. ` +
`Instead, use a data or computed property based on the prop's ` +
`value. Prop being mutated: "${key}"`,
vm
)
}
})
// 省略warn，就变成
defineReactive(vm, key, validateProp(key, props, propsData, vm))
validateProp就是一个验证的方法，具体如下
function validateProp ( // 按照例子来的参数就是这样的
key, // c
propOptions, // 对应上面的props
propsData, // 对应上面的propsData
vm // Vue的实例vm
) {
var prop = propOptions[key]; // 获取这个c的参数选项
var absent = !hasOwn(propsData, key); // 是否有这个key，但是这里取反赋值给absent = false
var value = propsData[key]; // 获取val
// handle boolean props
if (isType(Boolean, prop.type)) { // isType在文件夹methods realizes找到
if (absent && !hasOwn(prop, 'default')) { // 如果没有这个值，又没有默认值，就直接赋值一个false，这里感觉是一个容错处理，一般不会走这里
value = false;
} else if (!isType(String, prop.type) && (value === '' || value === hyphenate(key))) {
value = true;
// 综合来说就是，是一个boolean，不是string，且value是空字符串或value === hyphenate(key))
// hyphenate在文件夹methods realizes找到解释
// 这个value === hyphenate(key))一开始我也有点不明白，后来想了下，大概是这样的，见下方例子
}
}
// check default value
if (value === undefined) { // 如果值为undefined
value = getPropDefaultValue(vm, prop, key); // 检测是否有默认值传入，有则获取，没有则是undefined，这个方法比较简单，就不说了
// since the default value is a fresh copy,
// make sure to observe it.
var prevShouldConvert = observerState.shouldConvert; // 这个东东暂时不管吧
observerState.shouldConvert = true; // 这个东东暂时不管吧
observe(value); // 对这个值做数据响应，前面说过的
observerState.shouldConvert = prevShouldConvert; // 这个东东暂时不管吧
}
{
assertProp(prop, key, value, vm, absent);
}
return value // 经过处理后返回，这时候这个value值已经经过了数据响应绑定了，也就是返回observer
}
// 最后是这个assertProp(prop, key, value, vm, absent)方法
function assertProp ( // 按照我们这个例子参数就是
prop, // props，上面说过的，我们传入的参数选项
name, // key，这里变成了name，就是例子中的c
value, // value值，就是4
vm, // 实例
absent // 这个是false，上面说过的
) {
if (prop.required && absent) { // 判断是否有required，这个是必须传入参数选项，这里没说，但用过Vue都应该知道吧，不是重点，只是一个检测而已
warn(
'Missing required prop: "' + name + '"',
vm
);
return
}
if (value == null && !prop.required) {
return
}
var type = prop.type; // function Number() { [native code] }
var valid = !type || type === true; // 取反，则为false，这里我们如果有传入type这里就是false，如果没有则是true
var expectedTypes = []; // 定义空数组
if (type) {
if (!Array.isArray(type)) {
type = [type]; // 如果传入的不是一个数组，则变成一个数组，用过Vue的都知道props还有另一种写法就是type: [Number, Array, String]这样的形式
}
for (var i = 0; i < type.length && !valid; i++) {
// 这里我们知道了value就是值，type就是类型，按照我们的例子
// 就是assertType(4, Number)，这个就没问题了，这个assertType方法也比较简单，就是检测的对比，这里就不说了
var assertedType = assertType(value, type[i]); // 所以这里就是检测类型和值是否对应
expectedTypes.push(assertedType.expectedType); // 添加到这个数组里面
valid = assertedType.valid; // 获取检测结果的boolean值
}
}
if (!valid) { // 如果出现类型对不上，那就报错呗
warn(
'Invalid prop: type check failed for prop "' + name + '".' +
' Expected ' + expectedTypes.map(capitalize).join(', ') +
', got ' + Object.prototype.toString.call(value).slice(8, -1) + '.',
vm
);
return
}
var validator = prop.validator; // 获取验证方法
if (validator) {
if (!validator(value)) { // 自身执行方法，把自身value值传入，这个就很好理解了
warn(
'Invalid prop: custom validator check failed for prop "' + name + '".',
vm
);
}
}
}
最后剩下之前留下的一个问题value === hyphenate(key))
// 说这个之前，要先知道这个hyphenate方法是做什么的，就是这个helloVue变成hello-vue，驼峰转横杠，
// 我们把整段代码拿过来
if (isType(Boolean, prop.type)) { // isType在文件夹methods realizes找到
if (absent && !hasOwn(prop, 'default')) { // 如果没有这个值，又没有默认值，就直接赋值一个false，这里感觉是一个容错处理，一般不会走这里
value = false;
} else if (!isType(String, prop.type) && (value === '' || value === hyphenate(key))) {
value = true;
// 综合来说就是，是一个boolean，不是string，且value是空字符串或value === hyphenate(key))
// hyphenate在文件夹methods realizes找到解释
// 这个value === hyphenate(key))一开始我也有点不明白，后来想了下，大概是这样的，见下方例子
}
}
// 我们把之前的一个例子加点东西进去，变成这样，在props加了个dEf字段
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app">
<child-component :c="vmC" :d-ef="true"></child-component>
<child-component :c="vmC" d-ef></child-component>
<child-component :c="vmC" d-ef=""></child-component>
</div>
<!-- 第一种写法比较常见，第二种和第三种写法就是因为有了这个判断
(value === '' || value === hyphenate(key)
所以才没问题，我们可以看到下面mounted打印出来的三个都是true -->
</body>
<script type="text/javascript" src="vue.js"></script>
<script>
var mixin = {
beforeCreate () {
console.log('beforeCreate from mixin')
}
}
var childComponent = {
props: {
c: {
type: Number,
default: 99,
validator (val) {
return typeof val === 'number'
}
},
dEf: {
type: Boolean
}
},
mounted () {
console.log(this.dEf)
},
template: `<h1 style="color: red;"> {{ c }} </h1>`
}
let vm = new Vue({
el: '#app',
data: {
a: 1,
b: [1, 2, 3],
vmC: 4
},
beforeCreate () {
console.log('beforeCreate 2')
},
watch: {
a () {
console.log(this.vmC)
}
},
components: {
childComponent: childComponent
},
mixins: [mixin]
})
setTimeout( () => {
vm.a = 3;
}, 2000)
console.log(vm)
</script>
</html>
// 到此，props字段的常用操作都差不多是这样子了，然后再看initWatch，这里我们的例子添加点东西，变成
// 这样，在mixin上添加了一个watch
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app">
<child-component :c="vmC" :d-ef="true"></child-component>
<child-component :c="vmC" d-ef></child-component>
<child-component :c="vmC" d-ef=""></child-component>
</div>
</body>
<script type="text/javascript" src="vue.js"></script>
<script>
var mixin = {
beforeCreate () {
console.log('beforeCreate from mixin')
},
watch: {
a () {
console.log(this.vmC, 'this watch from mixin')
}
}
}
var childComponent = {
props: {
c: {
type: Number,
default: 99,
validator (val) {
return typeof val === 'number'
}
},
dEf: {
type: Boolean
}
},
mounted () {
console.log(this.dEf)
},
template: `<h1 style="color: red;"> {{ c }} </h1>`
}
let vm = new Vue({
el: '#app',
data: {
a: 1,
b: [1, 2, 3],
vmC: 4
},
beforeCreate () {
console.log('beforeCreate 2')
},
watch: {
a () {
console.log(this.vmC)
}
},
components: {
childComponent: childComponent
},
mixins: [mixin]
})
setTimeout( () => {
vm.a = 3;
}, 2000)
console.log(vm.a)
</script>
</html>
// 源码是这两个方法，第一个参数是实例vm，第二个是watch，这里就是这样的
watch = [function, function]; // 对应的就是上面两个a的watch方法
function initWatch (vm: Component, watch: Object) {
for (const key in watch) { // 遍历这个watch
const handler = watch[key] // 获取每一个key的value，就是watch的function
if (Array.isArray(handler)) { // 判断这个key是否是数组，这里我们在mixin上面也有a的watch，所以在前面的合并策略会合并成数组
for (let i = 0; i < handler.length; i++) {
createWatcher(vm, key, handler[i]) // 执行这个
}
} else {
createWatcher(vm, key, handler) // 不是数组则执行这个，原理都一样
}
}
}
function createWatcher (vm: Component, key: string, handler: any) {
let options
if (isPlainObject(handler)) { // 是一个object，一般来说这个应该是一个function才对，这个还是有点奇怪的，一会再说
options = handler
handler = handler.handler
}
if (typeof handler === 'string') { // 是一个字符串，一般来说这个应该是一个function才对，这个还是有点奇怪的，一会再说
handler = vm[handler]
}
vm.$watch(key, handler, options) // 没想到这里调用的是实例上面的方法，可以参考官方的api指南
}
这里就剩下上面两个if的问题，和实例上的vm.$watch方法
Vue.prototype.$watch = function ( // 按照例子，参数分别为
expOrFn, // a
cb, // 两个a对应的function
options // undefined
) {
var vm = this;
options = options || {};
options.user = true;
var watcher = new Watcher(vm, expOrFn, cb, options); // 上面都简单，这里才是重点，下面还有三个例子，说完就看这个
if (options.immediate) { // 这个看官方api解释是：立即以表达式的当前值触发回调
cb.call(vm, watcher.value);
}
return function unwatchFn () { // 返回一个func，可以停止watch，这个官方api也有说
watcher.teardown(); // 调用watch实例上面的方法，所以还是重点看实例
}
};
// 这种方法是在new Vue的时候的watch，我们再看下另外三种，这里有一个例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app">
</div>
</body>
<script type="text/javascript" src="vue.js"></script>
<script>
let vm = new Vue({
el: '#app',
data: {
a: 1,
vmC: 4,
watchObj: {
wa: 33,
wb: 20
},
watchObjWithDeep: {
withDeep: 'deep'
}
},
watch: {
a () {
console.log('watch a ok')
}
}
})
// -------------下面是测试例子，单独测试，其他的都要注释---------------------------------
//---------- example 0 ---------------------------------------------
// 函数
vm.$watch( // 以函数形式,这样子相当于watch了a和vmC两个值,任何一个值变化都会触发
function () {
return this.a + this.vmC
},
function (newVal, oldVal) {
console.log(newVal)
console.log(oldVal)
}
)
setTimeout( () => {
vm.a = 3;
}, 2000)
setTimeout( () => {
vm.vmC = 3;
}, 5000)
//---------- example 1 ---------------------------------------------
// 键路径
// vm.$watch('watchObj.wa', function (newVal, oldVal) {
// console.log(newVal)
// console.log(oldVal)
// })
// setTimeout( () => {
// vm.watchObj.wa = 66;
// }, 2000)
//---------- example 2 ---------------------------------------------
// vm.$watch('watchObjWithDeep', function (newVal, oldVal) {
// console.log(newVal)
// console.log(oldVal)
// }, {
// deep: true, // 深入object内部watch，具体看官方api
// immediate: true // 立即watch一次，具体看官方api
// })
// setTimeout( () => {
// vm.watchObjWithDeep.withDeep = 'deep with immediate';
// }, 2000)
</script>
</html>
// 现在我们就有4中方式，但是都是最终都是以这种形式使用vm.$watch(key, handler, options)
// 最后关键在于这个类new Watcher(vm, expOrFn, cb, options)
<p style="font-weight: bold;margin-bottom: 10px;color: #FF0000">剩下的几个问题</p>
Vue.set = set // 涉及到Vue的数据响应式系统，先保留
Vue.delete = del // 涉及到Vue的数据响应式系统，先保留
Vue.nextTick = util.nextTick // 水平有限，看不懂 - -#
initExtend(Vue) // 水平有限，看不懂 - -#
extend(Vue.options.directives, platformDirectives) // 水平有限，看不懂 - -#
extend(Vue.options.components, platformComponents) // 水平有限，看不懂 - -#
Vue.prototype.__patch__ // 水平有限，看不懂 - -#
compileToFunctions // 水平有限，看不懂 - -#
const extendsFrom = child.extends // 水平有限，看不懂 - -#
initProxy(vm) // 水平有限，看不懂 - -#
