vue常见问题 - 技术栈

因为Vue组件可以同时存在多个实例，如果直接使用对象形式的data选项，那么所有的实例将会共享同一个data对象，这样就会造成数据互相干扰的问题。

作用：主要用在Vue 的虚拟DOM 算法，在新旧nodes 对比时辨识VNodes，在源码中使用的是 === 来判断的两个DOM元素是否相同，所以不能设置非基本类型。

为什么不能用Index？：

源码中：

js 复制代码

export function isSameVNodeType(n1: VNode, n2: VNode): boolean {
  return n1.type === n2.type && n1.key === n2.key
}

render: h => h(App) ：表示 Vue 实例选项对象的 render 方法作为一个函数，接受传入的参数 h函数，返回 h(App) 的函数调用结果。

h函数：是 hyperscript 的简称------意思是"能生成 HTML (超文本标记语言) 的 JavaScript"。这个名字来源于许多虚拟 DOM 实现默认形成的约定。一个更准确的名称应该是 createVnode()，类似vue2的createElement()

接受三个参数，返回vNode节点：

render和template都是Vue中定义组件的方式，但它们有一些不同之处：

template是一种类HTML的语法，它定义了组件的结构和展示，包括HTML标签、属性、事件和插值等。Vue将template编译成render函数，最终将render函数渲染成虚拟DOM，并将其渲染到页面上。
render函数则是一个函数式组件，它的参数是一个createElement函数和上下文对象。render函数用代码方式描述组件的结构和展示，并返回一个虚拟DOM节点，最终也会被渲染到页面上。

相对于template，render函数更加灵活和强大，可以更精细地控制组件的展示。同时，由于render函数是JavaScript代码，因此它可以被更好地集成到其他代码中。template则更加容易编写和理解，但可能会受到HTML标签和属性的限制。

在实际开发中，我们可以选择使用template或render函数来定义组件，具体取决于组件的需求和开发者的习惯。如果组件需要较为复杂的展示逻辑和动态交互，可以使用render函数来实现。如果组件比较简单，可以使用template来编写。

Vue.js在解析和编译模板时，会经过以下过程：

解析模板：Vue.js使用自定义的HTML解析器将模板解析成抽象语法树（AST）。解析器会分析模板中的HTML标记、指令、表达式和事件等内容，并构建出一颗表示模板结构的AST。
静态优化：在生成AST的过程中，Vue.js会对静态内容进行优化。静态内容是指在编译过程中不会发生变化的部分，例如纯文本内容。Vue.js会将静态内容标记为静态节点，以在后续更新过程中跳过对其的处理，提高性能。
编译为渲染函数：Vue.js将AST编译为渲染函数。渲染函数是一个JavaScript函数，它接收数据作为参数，并返回一个虚拟DOM（VNode）树，用于渲染组件的视图。
渲染视图：当组件的数据发生变化时，渲染函数会被调用，生成新的虚拟DOM树。Vue.js会通过比较新旧虚拟DOM树的差异，计算出需要更新的部分，并将其应用到实际的DOM上，从而更新组件的视图。

在上述过程中，模板会被转换成一个渲染函数。渲染函数可以是以下几种形式之一：

使用render方法编写的渲染函数：在组件中定义了一个render方法，该方法返回一个虚拟DOM树。

使用单文件组件（.vue文件）：Vue.js提供了单文件组件的支持，其中的部分就是模板，通过编译转换为渲染函数。

使用Vue.js的模板语法：在Vue组件的template选项中使用Vue.js的模板语法，也会被编译为渲染函数。

总之，Vue.js将模板解析为AST，然后根据AST生成渲染函数，最终通过渲染函数来渲染组件的视图。这个过程使得Vue.js能够高效地根据数据动态更新视图。

父子关系：选择 props 与 $emit进行传递，也可选择ref

兄弟关系：选择$bus，其次可以选择$parent进行传递

祖先与后代：选择attrs与listeners或者 Provide与 Inject

复杂关系的组件：通过vuex存放共享的变量