前言
亲人永远是我们最珍贵的财富,却有是最不懂的珍惜的.
之所以不在乎,大概是因为我们相信时间、机遇、财富、和默认姑娘的爱情都是稍众即逝的. 而亲人不会,无论是嫌弃,疏远,甚至是抛弃, 他们都会呆在我们认定的属于他们自己的位置上.
等我们一无所有了,再想回头找他们, 有时候还算幸运, 其他的就剩下感受他们那种失望的机会了
所以,对于我们人生的这个生命周期而言, 每一个阶段都有对应的钩子. 能够走路了,要进幼儿园, 7 岁要去小学, 高三了要高考. 而这些钩子背后都有父母在背后. 我们不能一直的往前走, 有时间没时间也需要找出时间,来看看自己的父母,爷爷奶奶,外公外婆. 甚至叔叔们.
不然意外发生的时候, 你的钩子就变成了 遗憾和悔恨了.
Vue 是什么
它是一个构造函数, 这个构造函数初始化的值就是我们在开发业务时候传进去的. 它在 MVVM 模型当中,就是那个 VM.
它想要解决的问题是为了减少我们开发人员的心智负担,不用直接操作真实 DOM 来进行对应的数据渲染. 只要按照它制定的规范来填入代码,就可以实现界面的渲染,更新.
WEB 前端的开发人员做的最终目的,就是按照预想的,渲染界面给用户看.Vue 专注于视图, 让开发人员只用想业务逻辑如何组织就行了. 再结合commponent, 实现组件化的开发, 降低团队开发的成本.
New 的过程
知道了 Vue 想要解决的问题. 也知道了 Vue 就是一个构造函数. 那么我们想要了解它生命周期,还是要复习一下基础知识. new 的过程干了啥.
- 创建一个空对象
- 给这个空对象添加
__proto__属性,并指向prototype原型对象 - 将 this 的属性绑定到这个对象当中
- 然后
return这个对象给实例化对象
return的是基本类型和对象会带来不同的效果
return的是数字的话, 不会有什么变化,直接走以前的
return的是对象的话, 会直接覆盖你上面的那一连串骚操作
代码实现:
function targetFn(name) {
this.name = name;
}
targetFn.prototype = {
aget: 18,
};
function myNew(fn, ...rest) {
const newObj = Object.create(fn.prototype);
const returnResult = fn.apply(newObj, rest);
return isObject(returnResult) ? returnResult : newObj;
}
function isObject(obj) {
const target = "[object Object]";
return Object.prototype.toString.call(obj) === target;
}
钩子的实现
beforeCreate() {},
created() {},
beforeMount() {},
mounted() {},
实现上面这四个钩子 🪝, 分别对应数据没有初始化 -> 数据初始化之后 -> 数据处理完毕,即将要渲染界面 -> 渲染界面之后
依旧使用在 手写 v-if 和 v-show(2)-实现过程 中的代码.
实现过程:
- 定义生命周期变量, 作为
_init的形参
var recycles = {
beforeCreate: options.beforeCreate,
created: options.created,
beforeMount: options.beforeMount,
mounted: options.mounted,
};
this._init(this, options.template, options.methods, recycles);
- 在定义好变量之后, 还没有进一步处理这些参数的时候,
recycles.beforeCreate()
this._init(.....)
- new 成功之后, 表示
prototype指向了this中的__proto__
Vue.prototype._init = function (vm, template, methods, recycles) {
recycles.create.bind(vm);
};
如果不指定 bind 的是当前实例的话. 在
main.js中打印 this 的话, 打印的是recycles这个对象
- 剩下的两个就简单了, 在把虚拟 DOM 渲染界面前后
function render(vm, showPool, container, recycles) {
// some code
recycles.beforeMount.bind(vm);
_el.append(container);
recycles.mounted.bind(vm);
}
自此, 这几个钩子就能够在main.js文件中正确打印结果.
