前言
经过initMixin
再接下来就到了stateMixin
,接下来咱们就看看stateMixin
中到底有什么;
内容
stateMixin
位于src/core/instance/state.ts
下;
export function stateMixin(Vue: typeof Component) {
// flow somehow has problems with directly declared definition object
// when using Object.defineProperty, so we have to procedurally build up
// the object here.
// $data
const dataDef: any = {}
dataDef.get = function () {
return this._data
}
// $props
const propsDef: any = {}
propsDef.get = function () {
return this._props
}
// 开发环境下针对set行为的警告
if (__DEV__) {
dataDef.set = function () {
// 不可以替换根实例上的$data
warn(
'Avoid replacing instance root $data. ' +
'Use nested data properties instead.',
this
)
}
// $props是只读的
propsDef.set = function () {
warn(`$props is readonly.`, this)
}
}
// 将dataDef和propsDef 添加到原型链上
Object.defineProperty(Vue.prototype, '$data', dataDef)
Object.defineProperty(Vue.prototype, '$props', propsDef)
// 将set和del方法挂载到原型链上 || 位于observer/index.ts
Vue.prototype.$set = set
Vue.prototype.$delete = del
// $watch方法定义
Vue.prototype.$watch = function (
expOrFn: string | (() => any),
cb: any,
options?: Record<string, any>
): Function {
const vm: Component = this
if (isPlainObject(cb)) {
return createWatcher(vm, expOrFn, cb, options)
}
options = options || {}
options.user = true
// 位于obeserver/watcher.ts
const watcher = new Watcher(vm, expOrFn, cb, options)
// 深度监听
if (options.immediate) {
const info = `callback for immediate watcher "${watcher.expression}"`
pushTarget()
invokeWithErrorHandling(cb, vm, [watcher.value], vm, info)
popTarget()
}
return function unwatchFn() {
watcher.teardown()
}
}
}
总结
1. $data定义
2. $props定义
3. $set定义
4. $delete定义
5. $watch定义
标签:function,set,stateMixin,Vue,十五,props,data,options
From: https://www.cnblogs.com/wangyang0210/p/17346343.html