超人

> css那里的em,dpi文档定向可能出了问题,去看看,就是vuepress文档里 收到，已fix, 感谢

 ## 一、思考 我们都听过知其然知其所以然这句话 那么不知道大家是否思考过`new Vue()`这个过程中究竟做了些什么？ 过程中是如何完成数据的绑定，又是如何将数据渲染到视图的等等 ## 一、分析 首先找到`vue`的构造函数 源码位置：src\core\instance\index.js ```js function Vue (options) { if (process.env.NODE_ENV !== 'production' && !(this instanceof Vue) ) { warn('Vue is a constructor...

 ## 一、作用 `v-if` 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 `true`值的时候被渲染 `v-for` 指令基于一个数组来渲染一个列表。`v-for` 指令需要使用 `item in items` 形式的特殊语法，其中 `items` 是源数据数组或者对象，而 `item` 则是被迭代的数组元素的别名 在 `v-for` 的时候，建议设置`key`值，并且保证每个`key`值是独一无二的，这便于`diff`算法进行优化 两者在用法上 ```js {{ item.label }} ``` ## 二、优先级 `v-if`与`v-for`都是`vue`模板系统中的指令 在`vue`模板编译的时候，会将指令系统转化成可执行的`render`函数...

> 3.x 版本中 v-if 总是优先于 v-for 生效。 嗯，是的哈

> list是啥 一个变量，就是一个数组。

> 你举得例子没 嗯，大概就是这个意思，先将源数据（list）处理一次，

 ## 一、从历史说起 Web是World Wide Web的简称，中文译为万维网我们可以将它规划成如下的几个时代来进行理解 - 石器时代 - 文明时代 - 工业革命时代 - 百花齐放时代 ### 石器时代 石器时代指的就是我们的静态网页，可以欣赏一下1997的Apple官网  最早的网页是没有数据库的，可以理解成就是一张可以在网络上浏览的报纸，直到CGI技术的出现通过 CGI Perl 运行一小段代码与数据库或文件系统进行交互，如当时的Google（1998年）  ### 文明时代 ASP，JSP大家应该都不会太陌生，最早出现于 2005 年左右，先后出现了微软的 ASP 和...

> > 数据驱动视图，在某些情况下比如v-model（输入框）视图也能改变数据 > > 我理解的 `v-model` 是 ”**视图抛发改变数据的特定事件去驱动数据更改**“ ，更像是双向绑定的一种“语法糖”，实际最终的数据还是由父组件传递给子组件的。 你理解的是对的，这块我们修正下，感谢指出

 ## 一、什么是双向绑定 我们先从单向绑定切入单向绑定非常简单，就是把`Model`绑定到`View`，当我们用`JavaScript`代码更新`Model`时，`View`就会自动更新双向绑定就很容易联想到了，在单向绑定的基础上，用户更新了`View`，`Model`的数据也自动被更新了，这种情况就是双向绑定举个栗子  当用户填写表单时，`View`的状态就被更新了，如果此时可以自动更新`Model`的状态，那就相当于我们把`Model`和`View`做了双向绑定关系图如下  ## 二、双向绑定的原理是什么 我们都知道 `Vue` 是数据双向绑定的框架，双向绑定由三个重要部分构成 - 数据层（Model）：应用的数据及业务逻辑 - 视图层（View）：应用的展示效果，各类UI组件 - 业务逻辑层（ViewModel）：框架封装的核心，它负责将数据与视图关联起来 而上面的这个分层的架构方案，可以用一个专业术语进行称呼：`MVVM`这里的控制层的核心功能便是 “数据双向绑定” 。自然，我们只需弄懂它是什么，便可以进一步了解数据绑定的原理 ### 理解ViewModel 它的主要职责就是： - 数据变化后更新视图 - 视图变化后更新数据 当然，它还有两个主要部分组成 -...

 ## 一、什么是首屏加载 首屏时间（First Contentful Paint），指的是浏览器从响应用户输入网址地址，到首屏内容渲染完成的时间，此时整个网页不一定要全部渲染完成，但需要展示当前视窗需要的内容 首屏加载可以说是用户体验中**最重要**的环节 ### 关于计算首屏时间 利用`performance.timing`提供的数据：  通过`DOMContentLoad`或者`performance`来计算出首屏时间 ```js // 方案一： document.addEventListener('DOMContentLoaded', (event) => { console.log('first contentful painting'); }); // 方案二： performance.getEntriesByName("first-contentful-paint")[0].startTime // performance.getEntriesByName("first-contentful-paint")[0] // 会返回一个...