Vue.js 核心系列 - 编译

发表于 2020-03-12 | 分类于笔记随笔 | 阅读次数

从模板到真实 DOM 渲染的过程，中间有一个环节是把模板编译成 render 函数，这个过程我们把它称作编译。

Vue.js 提供了 2 个版本，一个是 Runtime + Compiler 的，一个是 Runtime only 的，前者是包含编译代码的，可以把编译过程放在运行时做，后者是不包含编译代码的，需要借助 webpack 的 vue-loader 事先把模板编译成 render 函数。

对编译过程的了解会让我们对 Vue 的指令、内置组件等有更好的理解。不过由于编译的过程是一个相对复杂的过程，我们只要求理解整体的流程、输入和输出即可，对于细节我们不必抠太细。

核心编译流程

我们将整个 Vue 的编译流程简化为如下三个核心步骤，分别是：

parse -> optimize -> codeGen

Parse 的目标是把 template 模板字符串转换成 AST 树（它是一种用 JavaScript 对象的形式来描述整个模板）。整个 parse 的过程是利用正则表达式顺序解析模板，当解析到开始标签、闭合标签、文本的时候都会分别执行对应的回调函数，来达到构造 AST 树的目的。

阅读全文 »

Vue.js 核心系列 - 响应式原理

发表于 2020-02-18 | 分类于笔记随笔 | 阅读次数

想对 Vue 有一个较深的了解，就必须要深入内核，看清楚当我们数据发生变化或触发动作时，Vue 是如何帮助我们更新视图的。

首先让我们来看一下“栗子”：

模板：

1
2
3

<div id="app" @click="changeMsg">
  {{ message }}
</div>

脚本：

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  },
  methods: {
    changeMsg() {
      this.message = 'Hello World!'
    }
  }
})

这里我们可以看到，当我们触发 changeMsg 事件时，模板中的 message 会被更新，并且我们的视图也会随之更新，那么这里发生了什么呢？

我们来看一下下面这张图：

阅读全文 »

实用的 CSS — 动画性能对比

发表于 2017-07-18 | 分类于笔记随笔 | 阅读次数

前言

在现代浏览器中，渲染页面所要负责的线程主要有两个：主线程和排版线程。

主线程

运行 JS
计算 HTML 元素的 CSS 样式
布局页面
把页面元素绘制成一个或多个位图
把这些位图移交给排版线程

在浏览器开始渲染页面，或者长时间执行某个 JS 时，主线程会一直在忙碌状态，此时对于用户的任何输入或是操作都不会有所响应。

排版线程

通过 GPU 渲染位图，并显示在屏幕上
向主线程请求更新位图的可见部分或即将可见的部分
判断出当前页面处于可见的部分
判断出即将通过页面滚动而可见的部分
随着用户滚动页面来移动这些部分

排版线程对于用户的操作保持快速的响应，普遍的效率时每秒 60 帧的速度去刷新显示。

Transtion

下面我们在网页中实现一个元素的高度变化的动画，鼠标悬浮在元素上动画启动，直至完成：

<style>
#foo {
  height: 100px;
  width: 100px;
  background: red;
  transition: height 1s linear;
}
#foo:hover {
  height: 200px;
}
</style>
<body>
  <div id="foo"></div>
</body>

阅读全文 »

理解闭包

发表于 2017-06-15 | 分类于笔记随笔 | 阅读次数

闭包是指可以包含自由（未绑定到特定对象）变量的代码块；这些变量不是在这个代码块内或者任何全局上下文中定义的，而是在定义代码块的环境中定义（局部变量）。“闭包” 一词来源于以下两者的结合：要执行的代码块（由于自由变量被包含在代码块中，这些自由变量以及它们引用的对象没有被释放）和为自由变量提供绑定的计算环境（作用域）。

作用域

闭包的一个重点在于作用域，在 JavaScript 中变量的作用域分两种：全局变量与局部变量，首先让我们来了解一下：

var _global = 1;  // 全局变量

function print() {
  var _internal = 2;  // 局部变量

  console.log(_global); // 1
  console.log(_internal); // 2
  return _internal;
}

print();
console.log(_global); // 1
console.log(_internal); // ReferenceError: _internal is not defined

此时我们可以看到，在函数内部是可以直接读取全局变量的。但当我们在外部想访问内部变量时，就会报错，因为在函数体外部时无法访问函数内部的变量的。

需要注意的是，当在函数内部定义变量时没用使用 var 等声明变量，那么它实际上会成为一个全局变量：

function print() {
  _internal = 2;
}

console.log(_internal); // 2

从内存中解释，变量的声明都存在栈中，而在 JavaScript 中存在垃圾回收机制（garbage collection），当一个函数执行完返回之后，它的内存会被自动回收，此时函数内部的变量都会被销毁。

那么我们有什么方法可以保存这一内存，并且在外部访问函数内部的变量呢 —— 闭包。

阅读全文 »

实用的 CSS — 贝塞尔曲线(cubic-bezier)

发表于 2016-03-16 | 分类于笔记随笔 | 阅读次数

前言

在了解 cubic-bezier 之前，你需要对 CSS3 中的动画效果有所认识，它是 animation-timing-function 和 transition-timing-function 中一个重要的内容。

本体

简介

cubic-bezier 又称三次贝塞尔，主要是为 animation 生成速度曲线的函数，规定是 cubic-bezier(<x1>, <y1>, <x2>, <y2>)。

我们可以从下图中简要理解一下 cubic-bezier：

从上图我们需要知道的是 cubic-bezier 的取值范围:

P0：默认值 (0, 0)
P1：动态取值 (x1, y1)
P2：动态取值 (x2, y2)
P3：默认值 (1, 1)

阅读全文 »