Vue: 生命周期解析

关于Vue生命周期

所有的生命周期钩子自动绑定 this 上下文到实例中,因此你可以访问数据,对属性和方法进行运算。这意味着你不能使用箭头函数来定义一个生命周期方法 (例如 created: () => this.fetchTodos())。这是因为箭头函数绑定了父上下文,因此 this 与你期待的 Vue 实例不同,this.fetchTodos 的行为未定义。

(可以在浏览器F12控制台中查看相关记录)启动顺序:

  1. beforeCreate
  2. created
  3. beforeMount
  4. mounted

更新属性值的事件流程:

  1. beforeUpdate
  2. updated

Vue销毁流程:

  1. beforeDestroy
  2. destroyed

在属性值更新之后(更新属性值是异步操作),要执行DOM操作可以在下面的代码中执行.

Vue 实例生命周期
image-2799

示例

示例中的销毁Vue实例,因为会执行消息提示到页面,所以会执行更新属性值的事件!

Vue: 动态给属性赋值

介绍

有时候我们会需要动态赋值给vue中已经定义的变量,比如,在批量加载字典数据的时候,就可以使用了.

正好,vue提供了类似的方法.

API

这个方法来自vue的api,下面是来自官方文档的引用:

Vue 实例的数据对象。Vue 将会递归将 data 的属性转换为 getter/setter,从而让 data 的属性能够响应数据变化。对象必须是纯粹的对象 (含有零个或多个的 key/value 对):浏览器 API 创建的原生对象,原型上的属性会被忽略。大概来说,data 应该只能是数据 – 不推荐观察拥有状态行为的对象。

一旦观察过,不需要再次在数据对象上添加响应式属性。因此推荐在创建实例之前,就声明所有的根级响应式属性。

实例创建之后,可以通过 vm.$data 访问原始数据对象。Vue 实例也代理了 data 对象上所有的属性,因此访问 vm.a 等价于访问 vm.$data.a。

以 _ 或 $ 开头的属性 不会 被 Vue 实例代理,因为它们可能和 Vue 内置的属性、API 方法冲突。你可以使用例如 vm.$data._property 的方式访问这些属性。

当一个组件被定义,data 必须声明为返回一个初始数据对象的函数,因为组件可能被用来创建多个实例。如果 data 仍然是一个纯粹的对象,则所有的实例将共享引用同一个数据对象!通过提供 data 函数,每次创建一个新实例后,我们能够调用 data 函数,从而返回初始数据的一个全新副本数据对象。

如果需要,可以通过将 vm.$data 传入 JSON.parse(JSON.stringify(…)) 得到深拷贝的原始数据对象。

详细可以参考: https://cn.vuejs.org/v2/api/#data

其中提到了,vue的实例是一个浅拷贝的对象.任何修改都会在同一个data上体现,如果需要深拷贝的对象,只能通过JSON.parse(JSON.stringify(vm.$data))来获得深拷贝的对象.

vuejs logo
image-2795

示例

JavaScript: TypeScript 3.7发布

关于TypeScript

TypeScript是一种由微软开发的自由和开源的编程语言。它是JavaScript的一个严格超集,并添加了可选的静态类型和使用看起来像基于类的面向对象编程语法操作 Prototype。C#的首席架构师以及Delphi和Turbo Pascal的创始人安德斯·海尔斯伯格参与了TypeScript的开发。[4][5][6][7]

TypeScript设计目标是开发大型应用,然后转译成JavaScript。[8]由于TypeScript是JavaScript的严格超集,任何现有的JavaScript程序都是合法的TypeScript程序。

TypeScript支持为现存JavaScript库添加类型信息的定义文件,方便其他程序像使用静态类型的值一样使用现有库中的值。当前有第三方提供常用库如jQuery、MongoDB、Node.js和D3.js的定义文件。

TypeScript编译器本身也是用TypeScript编写,并被转译为JavaScript,以Apache License 2发布。 — 维基百科

image-2789

关于TypeScript中文网的提示

www.tslang.cn 是TypeScript中文网,上面的文档有些滞后,目前仍停留在3.1版本.不过作为入门学习还是可以的,但建议参考官网最新文档.

发布3.7版本

主要更新内容:

  1. Optional Chaining
  2. Nullish Coalescing
  3. Assertion Functions
  4. Better Support for never-Returning Functions
  5. (More) Recursive Type Aliases
  6. –declaration and –allowJs
  7. The useDefineForClassFields Flag and The declare Property Modifier
  8. Build-Free Editing with Project References
  9. Uncalled Function Checks
  10. // @ts-nocheck in TypeScript Files
  11. Semicolon Formatter Option

详细更新内容: https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-7.html

Optional Chaining

这是个很有用的功能,可以在编码时减少判断.

示例:

其实在JavaScript官方中也定义了类似的,但目前没有任何浏览器支持.相关文档可以参考: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/%E5%8F%AF%E9%80%89%E9%93%BE

其余特性请参考官方更新日志.

WordPress:更新到5.3

  1. 安装:参考WordPress
  2. 更新:登录你的仪表盘.

5.3扩展和完善了WordPress 5.0中引入的块编辑器,其中包含一个新块,更直观的交互功能以及改进的可访问性。编辑器中的新功能增加了设计自由度,提供了更多的布局选项和样式变化,使设计师可以完全控制站点的外观。此版本还引入了 Twenty主题,为用户提供了更多的设计灵活性以及与块编辑器的集成。创建漂亮的网页和高级布局从未如此简单。

块编辑器的改进

这个以增强为重点的更新引入了150多项新功能和可用性改进,包括改进的大图像支持,用于上传从智能手机或其他高质量相机拍摄的未经优化的高分辨率图片。结合使用更大的默认图像尺寸,图片始终呈现最佳状态。

可访问性改进包括在管理界面中集成了块编辑器样式。这些改进的样式解决了许多可访问性问题:表单字段和按钮上的颜色对比,编辑器和管理界面之间的一致性,新的小吃栏通知,标准化为默认的WordPress配色方案以及Motion的引入,以使与您的块的交互变得快速自然。对于使用键盘导航仪表板的用户,块编辑器现在具有“导航”模式。这使您可以从一个块跳到另一个块,而无需浏览块控件的每个部分。

扩展的设计灵活性

WordPress 5.3添加了更强大的工具来创建惊人的设计。

新的“组”块使您可以轻松地将页面分为彩色部分
列块现在支持固定的列宽
新的预定义布局使您可以轻松地将内容安排到高级设计中
标题栏现在提供文本颜色的控件
其他样式选项使您可以为支持此功能的任何块设置首选样式

wordpress logo
image-2785

服务所有人的改进

自动图像旋转

上传后,根据嵌入的方向数据可以正确旋转图像。此功能最初是在9年前提出的,而在许多敬业的贡献者的支持下,此功能才得以实现。

现场健康检查

5.3中引入的改进使发现问题变得更加容易。扩展的建议从“运行状况检查”屏幕突出显示了可能需要在您的站点上进行故障排除的区域。

管理员电子邮件验证

现在,当您以管理员身份登录时,系统会定期要求您确认您的管理员电子邮件地址是最新的。如果您更改电子邮件地址,这将减少被锁定在站点之外的机会。

对于开发人员

日期/时间组件修复

开发人员现在可以以更可靠的方式处理日期和时区。日期和时间功能已收到许多用于统一时区检索和PHP互操作性的新API函数,以及许多错误修复程序。

PHP 7.4兼容性

WordPress 5.3旨在完全支持PHP 7.4。此版本包含多项更改,以删除不推荐使用的功能并确保兼容性。 WordPress继续鼓励所有用户运行最新最好的PHP版本。