Vue设计思想

本节目标：理解“Vue设计思想”的核心思路，并能把它用于实际开发或面试表达。

说明：原 OneNote 中有图片引用，但图片未包含在导出目录中；本页保留了可用的文字与代码内容。 ==拆分模块：====Vue3.0====更注重模块上的拆分。在====2.0====中无法单独使用部分模块，需要引入完整的====Vuejs(====例如只想使用使用响应式部分，但是需要引入完整的====Vuejs)====，== ==Vue3====中的模块之间耦合度低，模块可以独立使用。==

==比如只使用====reactivity====模块，或者====runtime-core====模块==

==重写====API====：====将方法也拆分出来，====V====ue2====中很多方法挂载到了实例中导致没有使用也会被打包（还有很多组件也是一样）。====vue3====通过构建工具====Tree-shaking====机制实现按需引入，减少用户打包后体积。==

==扩展更方便：====Vue3====允许自定义渲染器，扩展能力强。不会发生以前的事情，比如改写====Vue====源码改造渲染方式。==

**声明式框架**
==依然保留====Vue2====的特色；==

==命令式和声明式区别==

==早在====JQ====的时代编写的代码都是命令式的，命令式框架重要特点就是关注过程====;==

==声明式框架更加关注结果。命令式的代码封装到了====Vuejs====中，过程靠====vuejs====来实现====;==

==声明式代码更加简单，不需要关注实现，按照要求填代码就可以== ==（给上原材料就出结果）==
// 命令式编程：
let numbers = [1, 2, 3, 4, 5]
let total = 0
for (let i = 0; i < numbers.length; i++) {
  total += numbers[i] //关注了过程
}
console.log(total)
// 声明式编程：
let total2 = numbers.reduce(function (memo, current) {
  return memo + current
}, 0)
console.log(total2)

==采用虚拟====DOM====（局部更新）==
==传统更新页面，拼接一个完整的字符串====innerHTML====全部重新渲染，添加虚拟====DOM====后，可以比较新旧虚拟节点，找到变化在进行更新。虚拟====DOM====就是一个对象，用来描述真实====DOM====的==
const vnode = {
  __v_isVNode: true,
  __v_skip: true,
  type,
  props,
  key: props && normalizeKey(props),
  ref: props && normalizeRef(props),
  children,
  component: null,
  el: null,
  patchFlag,
  dynamicProps,
  dynamicChildren: null,
  appContext: null
}

==编译时和运行时==

==我们需要有一个虚拟====DOM====，调用渲染方法将虚拟====DOM====渲染成真实====DOM== ==（缺点就是虚拟====DOM====编写麻烦）==

==专门写个====编译时可以将模板编译成虚拟====DOM====，编译一般在构建工具中进行，====（在构建的时候进行编译性能更高，不需要再运行的时候进行编译，而且====vue3====在编译中做了很多优化）==

Vue设计思想 ​

Vue设计思想