英语lifecycle怎么翻译?

Vue框架已日臻成熟,生命周期也算是老生常谈了。网路上也有很多对Vue生命周期的讲解。

此处是补充上自己的理解,再次总结一下。

生命周期在计算机语言里,生命周期一般是指一个对象的创建(生)到销毁(死)的阶段。

对于Vue的生命周期,就是其组件的生命周期。具体可以看下图(相对官方文档的图,已补充翻译):

从图中可以直观注意到,Vue的生命周期可以划分为四个阶段:

mount 阶段: vue实例被挂载到真是的DOM节点;

update 阶段:当vue实例里面的data数据变化时,触发组件的重新渲染;

上面的四个阶段,每个阶段分为开始前和开始后,这样就衍生出了9个方法:

——也就是所谓的钩子函数。

接下来我们一个阶段一个阶段来分析它们的触发条件及表征。

(1)一个最简单的Vue实例化代码如下:

我们主要关心着这个实例化里的属性:元素el什么时候有值(挂载上了?)、data什么时候有数据?、message又是什么时候有数据呢?

于是,我们在每个回调里面去打印下这三个值看看。

(2)为了更直观去理解Vue实例的变化,我们引用了一段实验代码(该源码来源于参考文章1):

// 更新前和更新后的,打印数据均是新数据 ?? 这点和想象的不太一致。

// 销毁前和销毁后,数据依旧存在?? 这点也和想象的不太一致。不过这个时候再去改变message值,vue不会再响应(也不会去执行beforeUpdate / updated 钩子)

下面我们来分别分析每个阶段:

从生命周期图可以看出,在这个阶段主要做两件事:

而在created时,因为已开始监控Data数据,所以data,message都有值。至于初始化内部事件是什么,我们此处暂不表,后续补充。

在这个阶段,做的事情就比较多了。

先判断是否有el选项(我们的上方示例代码中有该选项,即el: '#app',);

如果有el选项,接着判断是否有template选项(此处我们的示例代码中并没有该选项);

如果有template选项,编译该模板并导入到渲染函数;如果没有template选项,就把实例模板el指向的DOM的outerHTML(上方示例代码即为

创建vm.$el,并用上面编译好的模板(html内容)替换el指向的DOM。

从控制台打印数据就可以看出:

,看起来似乎有值了,但又不太对劲——因为message的值没有代入进入。其实此处有点像虚拟DOM的效果:也就是我的vm.$el虽然不是完整的,但也先准备着。(所以,在其他版本的浏览器中,此处也可能是打印出undefined。)

挂载结束就不一样了,三个数据项都就绪了。vm.$el也成为了完美的

以上的结果是按照有el选项,没有template选项的情况执行的。接下来我们看看其他种情况下,会发生点什么?

结果:只进行了create阶段,没有进行mount阶段。

原因分析:这个好理解,因为没有了el选项,就无从挂载起了。生命周期也就结束了。

如果此时想进行挂载,可以手动去调用vm.$mount(el)。

结果:进行了create阶段后,也进行了mount阶段。

之前的实例代码是没有template选项的情况表现,此处我们看下若有template选项,会发生点什么呢?

结果: vm.$el变成了template选项的内容;DOM节点#app也替换成template选项的内容了。其实挂载后,vm.$el是什么,DOM节点#app也对应是什么,它们是等价的。

分析: 此处验证了前面生命周期图:若有template选项,就编译它并导入到渲染函数;若没有template选项,就取#app的outerHTML作为模板。

Vue实例里还有render()方法可以提供模板,我们看下如果存在render()方法,会发生什么?

结果: vm.$el变成了render返回的模板内容。

以上就是挂载阶段的一序列可能性变化。接下来我们看下更新阶段。

更新阶段的前提是:“when data changes”也就是说当data选项里的数据有变化时触发。

让数据改变有很多操作方式,此处我们简单的在控制台对message字段进行改写。

此处在控制台打印出来的数据和预想的有出入:beforeUpdate本应该输出的旧数据(message: Hello Vue~),但此处更新前后的数据却显示一样。

在参考文章2里面,说这是打印出来的是虚拟DOM,都已更新,但真实DOM还没有改变。但我个人觉得不一定是这样。我尝试过在各个钩子函数补充打印出DOM元素(如下代码),但结果更新前后也都是更新后的数据。

我个人更倾向于是因为控制台本身原因。在beforeUpdate时可能确实是旧数据,只不过往下执行updated时候,更新新数据时,也改写了beforeUpdate部分的数据。(待进一步探讨研究补充。)

销毁阶段,需要执行vm.$destroy()才会进入。

同样的,我们在控制台执行销毁方法,得到如下结果:

可以看出,销毁前后的数据是一样的,但实际上,销毁后Vue实例会接触所有绑定,所有事件被移除,子组件被销毁。比如我们此处更新 data 数据项 vm.message,可以发现,不会在触发update阶段了。

我们对上面的分析结果做个小结,此处的表格会多考虑两个方法(当有组件时,生命周期会多出现一个activate阶段)。

组件实例创建前(或者说刚被创建),啥也没有。

组件实例创建完成。属性已绑定,但DOM还未产生。

“虚拟”的dom节点被真实的dom节点替换,并将其插入到dom树中。此时可以获取到$el为真实的dom元素。

$el、data 的值都为新数据。

$el、data 的值都为新数据。

组件销毁前嗲用。此时实例仍可用。

$el、data 都有值。实例绑定的事件还存在。

$el、data 虽然都有值。但实例绑定的事件和子组件都没有了。

3 了解生命周期的作用

我们去关注声明周期,是为了能更好的判断在不同的生命周期钩子函数里面做些什么操作和处理。比如:

mounted - 根据请求数据,对页面DOM做些什么操作

具体每个阶段的做些什么,还是要根据实际场景来设定咯~

}

install之前执行prepubish脚本,因为这做法便于准备package环境(几种用法如本段下面描述)。但事实证明这让人非常困惑。所以在npm@4.0.0后,新增来一种事件prepare来替代上述功能。另外一种新事件prepublishOnly作为替代策略,让用户避免以往npm版本的混乱行为。prepublishOnly 只在npm publish前执行(例如,publish前最后执行一次测试,以确保无误)

,这里对此变更有过漫长的争论可作参考。

如果你需要在使用package之前执行某些操作,而不依赖于目标系统的操作系统或目录结构,请使用prepublish脚本。例如以下任务:

  • 获取你的package所需的远程资源

在publish时做这些事情的好处是,它们可以在同一处完成,从而降低复杂性和差异性。另外,这意味着:

  • 你不需要在包中包含min版本,以节省空间

  • 你的用户的电脑上不必具有curl或wget或其他系统工具

如果使用root权限调用npm,那么它会将uid更改为用户配置指定的uid,默认为nobody。设置unsafe-perm以使用root权限运行脚本。

如果你依赖的模块(如测试模块)定义了可执行脚本,那么这些可执行文件将被添加到PATH中执行。所以,如果你的package.json有这样的依赖:

使用npm_config_前缀将配置参数放在环境中。例如你可以通过检查npm_config_root环境变量来查看目前生效的root配置。

那么用户可以这样覆写port变量:

最后,npm_lifecycle_event环境变量代表当前执行循环的哪个阶段。所以,你可以使用单个脚本用于根据当前正在发生的事件切换的进程的不同部分。

对象按照层级以下划线连接,如果您的package.json中有

如果你想要运行make命令也没问题,这样写:

npm脚本是通过将该行作为脚本参数传给sh来运行的。

如果脚本不是以退出码0退出,则会中止该进程。

请注意,这些脚本文件不必是nodejs甚至是javascript程序。他们只需要一些可执行文件。

如果要为所有package在某生命周期事件中运行某脚本,则可以使用钩子脚本。

Hook脚本的运行方式与package.json里的脚本完全相同。也就是说,它们与上述env在一个单独的子进程中。

  • 不要以0以外的错误码退出,除非你真的想这样做。因为这将导致npm操作失败(install脚本除外),并可能会回滚。如果这个错误无关紧要或只会阻断一些小功能,那么最好只是输出一个警告,让线程成功退出。

  • 尽量不要使用npm脚本来做npm本身就可以做的事情。通读package.json文件,你可以学到所有通过简单、合适的配置来具体描述你的package。这通常更健壮和通用。

  • 通过检查env来决定把东西装在哪。例如,如果npm_config_binroot环境变量设置为/home/user/bin,那么不要尝试将可执行文件安装到/usr/local/bin中。用户可能因为某种原因设置了这种方式。

  • 不要在脚本命令里加sudo前缀。如果由于某些原因需要root权限,否则会报错;那么用户应该考虑以sudo运行npm命令。

  • 不要使用install脚本。使用.gyp文件进行编译,其他情况则使用prepublish。你最好永远不要自定义preinstallinstall脚本。如果你要这样做,请优先考虑是否有其他办法。installpreinstall脚本的唯一正确使用场景是用作设置那些编译的目标目录。

}

我要回帖

更多关于 lifecycle公司 的文章

更多推荐

版权声明:文章内容来源于网络,版权归原作者所有,如有侵权请点击这里与我们联系,我们将及时删除。

点击添加站长微信