limy-blog

Appearance

第一章：权衡的艺术 ​

命令式和声明式 ​

javascript
// 命令式
$('#app') // 获取 div
  .text('hello') // 设置文本内容
  .on('click', () => alert('ok')); // 注册事件

// 声明式
<div @click="() => alert('ok')"> hello </div>
实现方式代表特点
命令式关注过程原生 js、jQuery性能好，维护成本高
声明式关注结果Vue性能不错、代码更加直观、维护成本低

声明式的更新消耗 = 找出差异的消耗 + 命令式修改的消耗

TIP

  1. Vue.js 的内部实现是命令式的，而暴露给用户的却更加声明式
  2. Vue.js 理念：保证可维护性的同时最大程度的保证性能

编译时和运行时 ​

运行时

javascript
// 输入
const obj = {
  tag: 'div',
  children: [{ tag: 'span', children: 'hello world' }]
};
// 将对象渲染到 body
render(obj, document.body);

编译时 + 运行时

js
// 输入
<div>
  <span> hello world </span>
</div>;
// 编译成 obj
const obj = {
  tag: 'div',
  children: [{ tag: 'span', children: 'hello world' }]
};
// 将对象渲染到 body
render(obj, document.body);

编译时

js
// 输入
<div>
  <span> hello world </span>
</div>;

// 直接转换成代码
const div = document.createElement('div');
const span = document.createElement('span');
span.innerText = 'hello world';
div.appChild(span);
document.body.appChild(div);

TIP

Svelte 就是纯编译时框架，编译时框架性能会更好，但是不够灵活。