我相信很多人都有自己喜欢使用框架,我也不例外,对于Vue真的是深有感触...
也许是Vue的渐进式,让人学习使用比较方便,而且在使用Vue-cli脚手架之后,更是对这个模式比较偏爱,用的比较多,也试着自己写了不少,学习的不是特别深入,以此记录我的学习.
初识Vue生命周期
Vue有自己的生命周期,现在网上旧版生命周期与官方文档最新生命周期还有些许不同.
先来看看网上常见的生命周期图示:
- beforeCreate
数据观测(data observer)，也就是在这个时候开始监控data中的数据变化了，之后开始初始化事件(Init Events)
- created
现在开始判断vue对象中是否已经el挂载节点,或者还有另外一种vm.#mount() 是否已经挂载,之后的逻辑就是开始判断是否有模板
有模板就编译数据到vue生成的html模板中
- beforeMount
(此时还未将vue生成的html模板渲染到页面中)
开始对指定的el节点将vue生成的html替换到指定位置
- mounted
挂载完成,已经完后了html模板渲染到页面,而且这个钩子函数只会执行一次,通常在这里进行数据请求,可以调用钩子函数
this.$nextTick(function () {
//进行请求数据的方法,可以调用方法 eg:
this.getMyData()
})
- beforeUpdate
这个钩子函数主要是随时监听数据变化,实时更新dom
- updated
数据更新后的钩子函数
- beforeDestroy
vue实例销毁函数, 拆卸监听和子模板,以及事件监听
- destroyed
vue实例已经被销毁,vue方法中改变数据已经不再更新dom
再来看看新的官方文挡中的略有不同的生命周期图
可以明显看出来,新的生命周期中先初始化事件和生命周期
之后开始第一个钩子beforeCreate之后初始化注入和反应
每次一扒
闲着没事扒了扒vue源码,在vue入口是自执行函数利用全局对象来挂载vue实例.
之后慢慢找到了声明生命周期函数名字的数组:
var LIFECYCLE_HOOKS = [
'beforeCreate',
'created',
'beforeMount',
'mounted',
'beforeUpdate',
'updated',
'beforeDestroy',
'destroyed',
'activated',
'deactivated',
'errorCaptured'
];
接下来开始配置vue,暂且不提..
// vue中对是否可以使用__proto__进行判断环境(我理解,因为规范是浏览器环境用的__proto__,在js和node中没有,开发过程中可以自己玩)
var hasProto = '__proto__' in {};
接着是对运行环境的判断
我也从中看到了weex,毕竟weex利用vue搭建,不过分,哈哈
// Browser environment sniffing
var inBrowser = typeof window !== 'undefined';
var inWeex = typeof WXEnvironment !== 'undefined' && !!WXEnvironment.platform;
var weexPlatform = inWeex && WXEnvironment.platform.toLowerCase();
var UA = inBrowser && window.navigator.userAgent.toLowerCase();
var isIE = UA && /msie|trident/.test(UA);
var isIE9 = UA && UA.indexOf('msie 9.0') > 0;
var isEdge = UA && UA.indexOf('edge/') > 0;
var isAndroid = (UA && UA.indexOf('android') > 0) || (weexPlatform === 'android');
var isIOS = (UA && /iphone|ipad|ipod|ios/.test(UA)) || (weexPlatform === 'ios');
var isChrome = UA && /chrome\/\d+/.test(UA) && !isEdge;
看了源码我才发现 原来firefox浏览器对象原型自己有watch方法,涨了姿势
// Firefox has a "watch" function on Object.prototype...
var nativeWatch = ({}).watch;
接下来好多配置 ,,,以后慢慢写给自己理解,未完待续!!!
