zzzmh

zzzmh 查看完整档案

上海编辑  |  填写毕业院校  |  填写所在公司/组织 zzzmh.cn 编辑
编辑

喜欢编程,乐此不疲
线上项目
博客: https://zzzmh.cn
壁纸: https://bz.zzzmh.cn
插件: https://chrome.zzzmh.cn

个人动态

zzzmh 发布了文章 · 3月3日

优秀浏览器插件盘点! 必装浏览器插件推荐!

image

前言

(本文推荐的浏览器插件适用于所有Chromium/Chrome内核的浏览器,包括Chrome浏览器、最新版Edge浏览器、QQ浏览器、360浏览器等等)

下载插件: 极简插件
安装教程: Chrome 扩展插件安装方法汇总,解决各种安装问题

正文

目前国内90%以上的用户的浏览器都是Chrome (Chromium)内核,Chrome 除了内核开源、速度快、功能强大以外。最重要的是他还有一个强大的扩展插件商店,无数绝顶聪明的官方或民间工程师为其开发了海量的扩展插件程序。使用了插件后可彻底颠覆浏览器的用户使用体验,今天就来盘点Chrome最优秀的一些插件。


广告过滤类型

广告过滤拦截类插件可以说是提升用户体验最有效率的插件,可以有效拦截95%以上的网页广告。获得更加快速、整洁的浏览体验。


Adblock Plus 广告拦截
地址: https://chrome.zzzmh.cn/info?token=cfhdojbkjhnklbpkdaibdccddilifddb
Adblock Plus 是最受欢迎的广告拦截插件之一、可以拦截绝大部分国内外网站的一些不顺眼的横幅广告、弹窗广告、内容嵌入式广告等等,全部安排的明明白白。打开以后网页瞬间干干净净。
image



uBlock Origin 广告拦截
地址: https://chrome.zzzmh.cn/info?token=cjpalhdlnbpafiamejdnhcphjbkeiagm
uBlock Origin 是一款注重更低CPU使用率、更高过滤效率的广告拦截插件,开启以后几乎感受不到延迟,不知不觉让广告去无踪。
image


语言翻译类

翻译类可以说是访问外语网站的必备插件,学习外语或是查阅资料效率提升200%



Saladict 沙拉查词
https://chrome.zzzmh.cn/info?token=cdonnmffkdaoajfknoeeecmchibpmkmg
Saladict 沙拉查词是一款专业划词翻译扩展。大量权威词典涵盖中英日韩法德西语,支持复杂的划词操作、网页翻译、生词本、PDF,以及 Vimium 全键盘操作。只需要鼠标选中需要翻译的文本、自动出现多种词典在线翻译。还可以进行整个页面的谷歌、有道翻译。轻松无障碍访问各种外语网站。
image



达达划词翻译
https://chrome.zzzmh.cn/info?token=cajhcjfcodjoalmhjekljnfkgjlkeajl
达达划词翻译是一个非常好看的划词翻译扩展插件。划词自动显示一个小卡片显示翻译、例句等,点击可以听英式美式读音。他对原本网站内容的影响非常小,小巧美观且功能强大。
image



彩云小译 - 网页翻译插件
https://chrome.zzzmh.cn/info?token=jmpepeebcbihafjjadogphmbgiffiajh
彩云小译是一款非常强大的双语对照网页翻译插件。他的重点在于“双语对照”,在保留了原文的基础上显示中文翻译。可以让用户不是完全依赖AI,而是在一边使用的过程中,一边可以学习,不知不觉快速提升外语水平。
image


外观美化类



Infinity 新标签页 (Pro)
https://chrome.zzzmh.cn/info?token=nnnkddnnlpamobajfibfdgfnbcnkgngh
Infinity 新标签页是一个追求极简美学和一站式服务的新标签页类插件。可以提供更优雅、轻松的上网体验。海量的背景图片,提供各种自定义的链接图标显示方式。让用户从乱七八糟的主页中解脱出来。
image



MONKNOW 新标签页
https://chrome.zzzmh.cn/info?token=lnbjajkbekhkgablenknhapphbdbldeh
MONKNOW 是一个相当年轻的新标签页,实力却不容小觑。他主打的是高度可定制化,功能强大包括云同步、分组管理、黑暗模式自定义图标等。
image


工具类

可以说工具类插件才是浏览器插件的存在的意义,让浏览器宛如是一台手机,可以安装不同插件来实现各种神奇的功能,例如股票行情、邮件提醒、快递收发、汇率计算等等,就不一一列举,这里挑选一些特别出彩而且实用程度很高的工具类插件推荐。



集装箱
https://chrome.zzzmh.cn/info?token=kbgigmcnifmaklccibmlepmahpfdhjch
集装箱是一个非常简单粗暴的工具类插件,正如该插件作者对他的描述,“一个插件 提供一揽子功能” ,核心功能包括: 谷歌访问助手、网盘自动密码、购物优惠券信息、下载页面净化等等
image



写作猫
https://chrome.zzzmh.cn/info?token=giijkmholjmdmpojlmmoieghkilnhkhb
写作猫可以说是文字工作者和学生党们的福音,核心功能是自动检测文字输入中可能存在的语义语病错别字等问题,由于加入AI智能判断,效率比人工核查强大10倍以上。
image



Online Download Manager 下载管理器
https://chrome.zzzmh.cn/info?token=opjjpmhoiojifppkkcdabiobhakljdgm
与之前的chrono类似,Online Download Manager 插件也是一款接管浏览器默认的下载器的下载类插件,相信有不少小伙伴发现Chrome自带浏览器功能单一、界面简陋,于是诞生出了一大批下载类插件,丰富下载界面体验。而本插件就是其中的佼佼者之一。
image



哔哩哔哩助手_bilibili helper
https://chrome.zzzmh.cn/info?token=kpbnombpnpcffllnianjibmpadjolanh
人气极高的一个辅助类插件,针对B站的功能辅助类插件,核心功能包括:弹幕追踪、视频下载、夜间模式、播放器切换、自动定位、自动抽奖等等
image



京价保
https://chrome.zzzmh.cn/info?token=gfgkebiommjpiaomalcbfefimhhanlfd
京价保是专门针对京东网站访问做的辅助类插件,自动签到领京东豆、自动提醒价格保护、自动领券、自动计算最优惠购买方案、以及自动显示历史价格走势等等
image

END

下载插件地址:https://chrome.zzzmh.cn
插件安装教程:https://chrome.zzzmh.cn/help?token=setup

另外适用的浏览器包括且不限于:Chrome、新版Edge、QQ浏览器、360浏览器、搜狗浏览器、UC浏览器 等等 , 所有的Chrome (Chromium)内核的浏览器都可以适用

也欢迎来我的小站看看
个人博客:https://zzzmh.cn/
技术笔记:https://leanote.zzzmh.cn/
极简壁纸:https://bz.zzzmh.cn/
极简插件:https://chrome.zzzmh.cn/

查看原文

赞 1 收藏 1 评论 0

zzzmh 发布了文章 · 2019-04-21

盘点一些惊世骇俗的壁纸网站!多年珍藏干货!

前言

首先承认一下,我自己就是其中一个壁纸站站长。
自建站至今,阅览壁纸网站无数,收藏列表满满一堆优质的壁纸站。
今天就来一波商业互吹,看看在9102年哪些壁纸站可以清新脱俗。

正文

PS:排名不分先后

一、极简壁纸

  • 官网:https://bz.zzzmh.cn
  • 分类:精选、小姐姐、二次元、4K超清、更多分类
  • 说明:图片种类丰富,分辨率1~8K,图片来源wallhaven
  • 推荐:★ ★ ★ ★ ☆

极简壁纸

二、必应壁纸

  • 官网:https://bing.ioliu.cn
  • 分类:首页、下载榜
  • 说明:出自前端大神之手,以假乱真的设计。界面干净漂亮,图片来源必应每日图片。
  • 推荐:★ ★ ★ ★ ★

必应壁纸

三、千叶网

  • 官网:http://qianye88.com
  • 分类:4k动漫、4k美女、4k风景、4k游戏 等太多不一一举例
  • 说明:设计好看、功能全面,分辨率高。
  • 推荐:★ ★ ★ ★ ★

千叶网

四、pexels

  • 官网:https://www.pexels.com
  • 分类:摄影为主
  • 说明:据说是全球顶尖高清摄影图片分享网站,免费授权商用
  • 推荐:★ ★ ★ ★ ★

pexels

五、unsplash

  • 官网:https://unsplash.com
  • 分类:各种都有
  • 说明:纯粹、简单、优雅,高质量无版权图片分享圣地
  • 推荐:★ ★ ★ ★ ★

unsplash

六、pixabay

  • 官网:https://pixabay.com
  • 分类:摄影为主
  • 说明:提供海量免费高清图片、插画、矢量素材,图片超美,支持中文好评!
  • 推荐:★ ★ ★ ★ ★

pixabay

查看原文

赞 9 收藏 7 评论 0

zzzmh 发布了文章 · 2019-04-21

盘点一些惊世骇俗的壁纸网站!多年珍藏干货!

前言

首先承认一下,我自己就是其中一个壁纸站站长。
自建站至今,阅览壁纸网站无数,收藏列表满满一堆优质的壁纸站。
今天就来一波商业互吹,看看在9102年哪些壁纸站可以清新脱俗。

正文

PS:排名不分先后

一、极简壁纸

  • 官网:https://bz.zzzmh.cn
  • 分类:精选、小姐姐、二次元、4K超清、更多分类
  • 说明:图片种类丰富,分辨率1~8K,图片来源wallhaven
  • 推荐:★ ★ ★ ★ ☆

极简壁纸

二、必应壁纸

  • 官网:https://bing.ioliu.cn
  • 分类:首页、下载榜
  • 说明:出自前端大神之手,以假乱真的设计。界面干净漂亮,图片来源必应每日图片。
  • 推荐:★ ★ ★ ★ ★

必应壁纸

三、千叶网

  • 官网:http://qianye88.com
  • 分类:4k动漫、4k美女、4k风景、4k游戏 等太多不一一举例
  • 说明:设计好看、功能全面,分辨率高。
  • 推荐:★ ★ ★ ★ ★

千叶网

四、pexels

  • 官网:https://www.pexels.com
  • 分类:摄影为主
  • 说明:据说是全球顶尖高清摄影图片分享网站,免费授权商用
  • 推荐:★ ★ ★ ★ ★

pexels

五、unsplash

  • 官网:https://unsplash.com
  • 分类:各种都有
  • 说明:纯粹、简单、优雅,高质量无版权图片分享圣地
  • 推荐:★ ★ ★ ★ ★

unsplash

六、pixabay

  • 官网:https://pixabay.com
  • 分类:摄影为主
  • 说明:提供海量免费高清图片、插画、矢量素材,图片超美,支持中文好评!
  • 推荐:★ ★ ★ ★ ★

pixabay

查看原文

赞 9 收藏 7 评论 0

zzzmh 发布了文章 · 2019-04-18

盘点一些惊世骇俗的壁纸网站!多年珍藏干货!

前言

首先承认一下,我自己就是其中一个壁纸站站长。
自建站至今,阅览壁纸网站无数,收藏列表满满一堆优质的壁纸站。
今天就来一波商业互吹,看看在9102年哪些壁纸站可以清新脱俗。

正文

PS:排名不分先后

一、极简壁纸

  • 官网:https://bz.zzzmh.cn
  • 分类:精选、小姐姐、二次元、4K超清、更多分类
  • 说明:图片种类丰富,分辨率1~8K,图片来源wallhaven
  • 推荐:★ ★ ★ ★ ☆

极简壁纸

二、必应壁纸

  • 官网:https://bing.ioliu.cn
  • 分类:首页、下载榜
  • 说明:出自前端大神之手,以假乱真的设计。界面干净漂亮,图片来源必应每日图片。
  • 推荐:★ ★ ★ ★ ★

必应壁纸

三、千叶网

  • 官网:http://qianye88.com
  • 分类:4k动漫、4k美女、4k风景、4k游戏 等太多不一一举例
  • 说明:设计好看、功能全面,分辨率高。
  • 推荐:★ ★ ★ ★ ★

千叶网

四、pexels

  • 官网:https://www.pexels.com
  • 分类:摄影为主
  • 说明:据说是全球顶尖高清摄影图片分享网站,免费授权商用
  • 推荐:★ ★ ★ ★ ★

pexels

五、unsplash

  • 官网:https://unsplash.com
  • 分类:各种都有
  • 说明:纯粹、简单、优雅,高质量无版权图片分享圣地
  • 推荐:★ ★ ★ ★ ★

unsplash

六、pixabay

  • 官网:https://pixabay.com
  • 分类:摄影为主
  • 说明:提供海量免费高清图片、插画、矢量素材,图片超美,支持中文好评!
  • 推荐:★ ★ ★ ★ ★

pixabay

查看原文

赞 9 收藏 7 评论 0

zzzmh 发布了文章 · 2019-04-18

盘点一些惊世骇俗的壁纸网站!多年珍藏干货!

前言

首先承认一下,我自己就是其中一个壁纸站站长。
自建站至今,阅览壁纸网站无数,收藏列表满满一堆优质的壁纸站。
今天就来一波商业互吹,看看在9102年哪些壁纸站可以清新脱俗。

正文

PS:排名不分先后

一、极简壁纸

  • 官网:https://bz.zzzmh.cn
  • 分类:精选、小姐姐、二次元、4K超清、更多分类
  • 说明:图片种类丰富,分辨率1~8K,图片来源wallhaven
  • 推荐:★ ★ ★ ★ ☆

极简壁纸

二、必应壁纸

  • 官网:https://bing.ioliu.cn
  • 分类:首页、下载榜
  • 说明:出自前端大神之手,以假乱真的设计。界面干净漂亮,图片来源必应每日图片。
  • 推荐:★ ★ ★ ★ ★

必应壁纸

三、千叶网

  • 官网:http://qianye88.com
  • 分类:4k动漫、4k美女、4k风景、4k游戏 等太多不一一举例
  • 说明:设计好看、功能全面,分辨率高。
  • 推荐:★ ★ ★ ★ ★

千叶网

四、pexels

  • 官网:https://www.pexels.com
  • 分类:摄影为主
  • 说明:据说是全球顶尖高清摄影图片分享网站,免费授权商用
  • 推荐:★ ★ ★ ★ ★

pexels

五、unsplash

  • 官网:https://unsplash.com
  • 分类:各种都有
  • 说明:纯粹、简单、优雅,高质量无版权图片分享圣地
  • 推荐:★ ★ ★ ★ ★

unsplash

六、pixabay

  • 官网:https://pixabay.com
  • 分类:摄影为主
  • 说明:提供海量免费高清图片、插画、矢量素材,图片超美,支持中文好评!
  • 推荐:★ ★ ★ ★ ★

pixabay

查看原文

赞 9 收藏 7 评论 0

zzzmh 赞了回答 · 2019-04-11

解决使用javamail发送邮件的时候如何阻止附件内容输出到控制台

session.setDebug(true);这句去掉

关注 5 回答 4

zzzmh 评论了文章 · 2019-03-25

一个比Spring Boot快44倍的Java框架!

最近栈长看到一个框架,官方号称可以比 Spring Boot 快 44 倍,居然这么牛逼,有这么神奇吗?今天带大家来认识一下。

这个框架名叫:light-4j

官网简介:A fast, lightweight and more productive microservices framework

很简单,翻译过来就是:一个快速、轻量级和更高效的微服务框架。

为什么叫light-4j?

全称应该是:Light for Java,意味着轻量级,并以闪电般的速度来使用 Java 编程。

这个框架有什么用?

1、降低成本

为什么说它能降低成本,因为它速度非常快,占用内存也非常小。

重点来了,它比类似 Spring Boot 这种内嵌 Tomcat 式的主流微服务框架平台要快 44 倍,并且只需要用其 1/5 内存,听起来是不是很牛逼,确实是节约了不少内存空间。

这里有一份 benchmark 的测试报告,它与 Spring Boot 及其他微服务平台作了一个比较:

详细报告:https://github.com/networknt/...

很强大,性能与 Go 语言并肩,并且拥有更低的平均延迟。

这里还有一份与其他 web 框架的对比:

详细报告:https://www.techempower.com/b...

性能表现非常靠前,吊打 Spring 等各种框架!

2、丰富的特性

  • 带有启动/关闭钩子和各种中间件的插件架构
  • 分布式OAuth2 JWT安全验证作为框架的一部分
  • 基于OpenAPI规范进行请求和响应验证
  • 收集测量指标并支持服务和客户端在控制台显示
  • 全局运行时异常处理,如API异常及其他受检查异常
  • 在日志输出前加密敏感数据,如:信用卡、SIN号等
  • 为请求参数、请求头、BODY清除跨站攻击脚本
  • 重要信息或整个请求/响应的审计
  • 请求体支持各种类型的content-type
  • 配置标准化响应码及响应消息
  • 支持外部配置化Docker环境所有模块
  • 来自其他域名的跨域处理
  • 支持对外提供的服务限速处理
  • 服务发现与注册支持直连、Consul和Zookeeper
  • 客户端侧发现和负载平衡,消除代理层
  • 与Light-OAuth2紧密集成并支持可跟踪性

栈长先介绍到这,大家感兴趣的可以去 Github 捣鼓……

Github地址:https://github.com/networknt/...

栈长有话说

看完你可能觉得呵呵了,有人用吗?

这个栈长我目前没有可靠数据,但这个框架的性能表现和内存消耗真的非常惊人,以及它的各种功能特性都值得借鉴。

至于比 Spring Boot 框架要快 44 倍,这个大家也不用太纠结,Spring 发展到今天,经过国外各种大神的打磨,可以说是非常精湛。

Spring 日益宠大的同时,其内部依赖集成了太多东西,在性能这方面没其他框架强,确实能够理解,但 Spring 的生态圈是没有任何框架可以比拟的。在追求性能的同时,它肯定也会牺牲很多东西,所以,我觉得一个生态繁荣的技术平台比追求性能更重要。

最后,你们有公司用过这个框架吗?你对这个框架怎么看,欢迎留言讨论~

关注Java技术栈微信公众号,在后台回复:boot,获取栈长整理的更多的 Spring Boot 技术文章,都是实战干货,以下仅为部分预览。

  • Spring Boot 2.x 启动全过程源码分析
  • Spring Boot 自定义日志详解
  • Spring Boot 核心配置文件详解
  • Spring Boot 最核心的 25 个注解!
  • Spring Boot 集成Mybatis实现双数据源
  • ……
本文原创首发于微信公众号:Java技术栈(id:javastack),关注公众号在后台回复 "工具" 可获取更多,转载请原样保留本信息。

查看原文

zzzmh 评论了文章 · 2019-03-15

三分钟学会 SegmentFault 格子广告投放

了解格子广告

Q1: 什么是格子广告?

不同的用户对广告的预算不同,我们将原本 255*255px 大小的广告位分成横纵各 15 等分的小方块,每个方块大小 17*17px(如下图所示)。小方块按个数卖,你可以根据自己的预算购买单个或多个连续的小方块。

clipboard.png

Q2: SegmentFault 广告的有什么优势?

  1. SegmentFault 是面向开发者的社区,这里汇聚了互联网上最具创造力和活力的人群;
  2. 我们的月均网页浏览量常年保持在 3000 万以上;
  3. 格子广告低至 10 元/天(原价 30 元/天),性价比远超同类网站;
  4. 您的广告展示会产生巨大的商业价值;

此广告将在【首页】【问题/专栏/头条的列表页】【问题/专栏/头条的详情页】侧边栏展现,覆盖 90% 以上的访客页面。

clipboard.png

Q3: 我可以投放哪些类型的广告?

你可以在这里宣传你的产品,寻找志同道合的伙伴,介绍你的活动等等。我们愿意将有价值的商业伙伴推荐给我们的用户。

clipboard.png

投放格子广告

第 1 步:购买广告位

访问广告 购买页面,选则广告位并购买。广告的投放时长以周为单位,1 周起投。

clipboard.png

第 2 步:上传广告素材

广告位购买后,购买页面的下方将展示你购买的广告位,点击【添加素材】上传广告图片、文案及链接。提交后运营人员将审核广告素材是否合规。

clipboard.png

第 3 步:投放成功

广告审核通过后,你就可以等待指定的时间段查看自己投放的广告了。

clipboard.png

接下来,开始投放你的第一个广告吧 前往投放→

FAQ

Q: 广告审核不通过怎么办?
A: 审核不通过时,你可以编辑素材重新提交审核。如未提交,2 天后将视作放弃该广告位,系统自动删除并将广告款退回到你的个人账户。

Q: 审核通过时间晚于提示的预期时间怎么办?
A:广告实际的投放时间少部分情况下会因审核导致延期,投放时间段将根据实际情况顺延。

Q: 如何统计广告点击数?
A:你可以在目标网站加入第三方统计工具。如果你的网站是 https 的,那么可以直接在从统计看到来自 segmentfault.com 的流量。你也可以在提交的广告链接结尾加入诸如 Google 统计的 ?utm_source=sf 语法参数进行精确统计。

查看原文

zzzmh 评论了文章 · 2019-03-15

Vue渲染过程浅析

Vue 推荐在绝大多数情况下使用 template 来创建你的 HTML。但是模板毕竟是模板,不是真实的dom节点。从模板到真实dom节点还需要经过一些步骤

  1. 把模板编译为render函数
  2. 实例进行挂载, 根据根节点render函数的调用,递归的生成虚拟dom
  3. 对比虚拟dom,渲染到真实dom
  4. 组件内部data发生变化,组件和子组件引用data作为props重新调用render函数,生成虚拟dom, 返回到步骤3

第一步: 模板到render

在我们使用Vue的组件化进行开发应用的时候, 如果仔细的查看我们要引入的组件, 例子如下

// App.vue 
<template>
    <div>
        hello word
    </div>
</template>

<script>

export default {
}

</script>

<style>

</style>

在我们的主入口main.js

import Vue from 'vue'
import App from './App'

console.log(App)

new Vue({
  render: h => h(App)
}).$mount('#app')

clipboard.png

我们能够看到在我们引入的App这个模块,里面是一个对象,对象里面存在一个方法叫做render。在说render函数之前,我们可以想一想,每一次加载一个组件,然后对模板进行解析,解析完后,生成Dom,挂载到页面上。这样会导致效率很低效。而使用Vue-cli进行组件化开发,在我们引入组件的后,其实会有一个解析器(vue-loader)对此模板进行了解析,生成了render函数。当然,如果没有通过解析器解析为render函数,也没有关系,在组件第一次挂载的时候,Vue会自己进行解析。源码请参考: https://github.com/vuejs/vue/...
这样,能保证组件每次调用的都是render函数,使用render函数生成VNode。

第二步:虚拟节点VNode

我们把Vue的实例挂载到#app, 会调用实例里面的render方法,生成虚拟DOM。来看看什么是虚拟节点,把例子修改一下。

new Vue({
  render: h => {
    let root = h(App)
    console.log('root:', root)
    return root
  }
}).$mount('#app')

clipboard.png

上面生成的VNode就是虚拟节点,虚拟节点里面有一个属性elm, 这个属性指向真实的DOM节点。因为VNode指向了真实的DOM节点,那么虚拟节点经过对比后,生成的DOM节点就可以直接进行替换。
这样有什么好处呢?
一个组件对象,如果内部的data发生变化,触发了render函数,重新生成了VNode节点。那么就可以直接找到所对应的节点,然后直接替换。那么这个过程只会在本组件内发生,不会影响其他的组件。于是组件与组件是隔离的。
例子如下:

// main.js
const root = new Vue({
  data: {
    state: true
  },
  mounted() {
    setTimeout(() => {
      console.log(this)
      this.state = false
    }, 1000)
  },
  render: function(h) {
    const { state } = this // state 变化重新触发render
    let root = h(App)
    console.log('root:', root)
    return root
  }
}).$mount('#app')
// App.vue
<script>
export default {
  render: (h) => {
    let app = h('h1', ['hello world'])
    console.log('app:', app)
    return app
  }
}
</script>

clipboard.png
我们可以看到,当main.js中重新触发render函数的时候,render方法里面有引用App.vue这个子组件。但是并没有触发App.vue组件的的render函数。

在一个组件内,什么情况会触发render?

如何才能触发组件的render

数据劫持是Vue的一大特色,原理官方已经讲的很多了深入响应式原理。在我们给组件的data的属性进行的赋值的时候(set),此属性如果在组件内部初次渲染过程被引用(data的属性被访问,也就是数据劫持的get), 包括生命周期方法或者render方法。于是会触发组件的update(beforeUpdate -> render -> updated)。

注: 为了防止data被多次set从而触发多次update, Vue把update存放到异步队列中。这样就能保证多次data的set只会触发一次update。

当props会触发组件的重新渲染是怎么发生的呢?

把父组件的data通过props传递给子组件的时候,子组件在初次渲染的时候生命周期或者render方法,有调用data相关的props的属性, 这样子组件也被添加到父组件的data的相关属性依赖中,这样父组件的data在set的时候,就相当于触发自身和子组件的update。
例子如下:

// main.vue
import Vue from 'vue'
import App from './App'

const root = new Vue({
  data: {
    state: false
  },
  mounted() {
    setTimeout(() => {
      this.state = true
    }, 1000)
  },
  render: function(h) {
    const { state } = this // state 变化重新触发render
    let root = h(App, { props: { status: state } })
    console.log('root:', root)
    return root
  }
}).$mount('#app')

window.root = root
// App.vue
<script>
export default {
  props: {
    status: Boolean
  },
  render: function (h){
    const { status } = this
    let app = h('h1', ['hello world'])
    console.log('app:', app)
    return app
  }
}
</script>

截图如下:

clipboard.png
main.js state 状态发生了变化,由false => true, 触发了自身子组件的render方法。

补充

上面的内容是本人的一些使用心得,由于水平有限, 内容有些错误或者表达不当。多欢迎大神来指导

查看原文

zzzmh 赞了文章 · 2019-03-15

Vue渲染过程浅析

Vue 推荐在绝大多数情况下使用 template 来创建你的 HTML。但是模板毕竟是模板,不是真实的dom节点。从模板到真实dom节点还需要经过一些步骤

  1. 把模板编译为render函数
  2. 实例进行挂载, 根据根节点render函数的调用,递归的生成虚拟dom
  3. 对比虚拟dom,渲染到真实dom
  4. 组件内部data发生变化,组件和子组件引用data作为props重新调用render函数,生成虚拟dom, 返回到步骤3

第一步: 模板到render

在我们使用Vue的组件化进行开发应用的时候, 如果仔细的查看我们要引入的组件, 例子如下

// App.vue 
<template>
    <div>
        hello word
    </div>
</template>

<script>

export default {
}

</script>

<style>

</style>

在我们的主入口main.js

import Vue from 'vue'
import App from './App'

console.log(App)

new Vue({
  render: h => h(App)
}).$mount('#app')

clipboard.png

我们能够看到在我们引入的App这个模块,里面是一个对象,对象里面存在一个方法叫做render。在说render函数之前,我们可以想一想,每一次加载一个组件,然后对模板进行解析,解析完后,生成Dom,挂载到页面上。这样会导致效率很低效。而使用Vue-cli进行组件化开发,在我们引入组件的后,其实会有一个解析器(vue-loader)对此模板进行了解析,生成了render函数。当然,如果没有通过解析器解析为render函数,也没有关系,在组件第一次挂载的时候,Vue会自己进行解析。源码请参考: https://github.com/vuejs/vue/...
这样,能保证组件每次调用的都是render函数,使用render函数生成VNode。

第二步:虚拟节点VNode

我们把Vue的实例挂载到#app, 会调用实例里面的render方法,生成虚拟DOM。来看看什么是虚拟节点,把例子修改一下。

new Vue({
  render: h => {
    let root = h(App)
    console.log('root:', root)
    return root
  }
}).$mount('#app')

clipboard.png

上面生成的VNode就是虚拟节点,虚拟节点里面有一个属性elm, 这个属性指向真实的DOM节点。因为VNode指向了真实的DOM节点,那么虚拟节点经过对比后,生成的DOM节点就可以直接进行替换。
这样有什么好处呢?
一个组件对象,如果内部的data发生变化,触发了render函数,重新生成了VNode节点。那么就可以直接找到所对应的节点,然后直接替换。那么这个过程只会在本组件内发生,不会影响其他的组件。于是组件与组件是隔离的。
例子如下:

// main.js
const root = new Vue({
  data: {
    state: true
  },
  mounted() {
    setTimeout(() => {
      console.log(this)
      this.state = false
    }, 1000)
  },
  render: function(h) {
    const { state } = this // state 变化重新触发render
    let root = h(App)
    console.log('root:', root)
    return root
  }
}).$mount('#app')
// App.vue
<script>
export default {
  render: (h) => {
    let app = h('h1', ['hello world'])
    console.log('app:', app)
    return app
  }
}
</script>

clipboard.png
我们可以看到,当main.js中重新触发render函数的时候,render方法里面有引用App.vue这个子组件。但是并没有触发App.vue组件的的render函数。

在一个组件内,什么情况会触发render?

如何才能触发组件的render

数据劫持是Vue的一大特色,原理官方已经讲的很多了深入响应式原理。在我们给组件的data的属性进行的赋值的时候(set),此属性如果在组件内部初次渲染过程被引用(data的属性被访问,也就是数据劫持的get), 包括生命周期方法或者render方法。于是会触发组件的update(beforeUpdate -> render -> updated)。

注: 为了防止data被多次set从而触发多次update, Vue把update存放到异步队列中。这样就能保证多次data的set只会触发一次update。

当props会触发组件的重新渲染是怎么发生的呢?

把父组件的data通过props传递给子组件的时候,子组件在初次渲染的时候生命周期或者render方法,有调用data相关的props的属性, 这样子组件也被添加到父组件的data的相关属性依赖中,这样父组件的data在set的时候,就相当于触发自身和子组件的update。
例子如下:

// main.vue
import Vue from 'vue'
import App from './App'

const root = new Vue({
  data: {
    state: false
  },
  mounted() {
    setTimeout(() => {
      this.state = true
    }, 1000)
  },
  render: function(h) {
    const { state } = this // state 变化重新触发render
    let root = h(App, { props: { status: state } })
    console.log('root:', root)
    return root
  }
}).$mount('#app')

window.root = root
// App.vue
<script>
export default {
  props: {
    status: Boolean
  },
  render: function (h){
    const { status } = this
    let app = h('h1', ['hello world'])
    console.log('app:', app)
    return app
  }
}
</script>

截图如下:

clipboard.png
main.js state 状态发生了变化,由false => true, 触发了自身子组件的render方法。

补充

上面的内容是本人的一些使用心得,由于水平有限, 内容有些错误或者表达不当。多欢迎大神来指导

查看原文

赞 37 收藏 23 评论 5

认证与成就

  • 获得 34 次点赞
  • 获得 6 枚徽章 获得 0 枚金徽章, 获得 0 枚银徽章, 获得 6 枚铜徽章

擅长技能
编辑

开源项目 & 著作
编辑

注册于 2019-01-17
个人主页被 562 人浏览