Vue 模板编译原理
Vue 的编译过程就是将 template 转化为 render 函数的过程 分为以下三步
- 第一步是将 模板字符串 转换成 element ASTs（解析器）
- 第二步是对 AST 进行静态节点标记，主要用来做虚拟DOM的渲染优化（优化器）
- 第三步是 使用 element ASTs 生成 render 函数代码字符串（代码生成器）
Vue的模板编译原理是将Vue的模板转换成渲染函数的过程。下面是Vue模板编译原理的简要步骤：
- 解析：模板编译开始时，会将模板字符串解析成抽象语法树（AST）。AST是一个以JavaScript对象表示的树状结构，它表示了模板中的HTML标签、属性、文本等信息。
- 优化：在AST生成之后，Vue会对其进行一些优化处理。例如，静态节点（不依赖响应式数据的节点）会被标记并被跳过，以提高渲染性能。
- 代码生成：在优化步骤之后，Vue会使用AST生成渲染函数。渲染函数是一个JavaScript函数，用于动态生成DOM节点并将其渲染到页面上。渲染函数的生成依赖于VNode（虚拟节点）的概念，VNode是Vue内部用于描述和操作DOM的对象。
- 最终渲染：
一旦渲染函数生成，Vue会将其挂载到组件实例上，并在数据发生变化时调用渲染函数重新生成VNode，并通过VNode的差异算法，将新的VNode与旧的VNode进行对比，最后更新只有变化的部分。
总的来说，Vue的模板编译原理是将模板解析成AST，然后优化AST，并生成渲染函数，最终通过渲染函数将VNode渲染到页面上。这个过程使Vue能够实现响应式的数据更新和高效的DOM渲染。
null 和 undefined 的区别？
都是基本数据类型
undefined 代表的含义是未定义，null 代表的含义是空对象。
一般变量声明了但还没有定义的时候会返回 undefined
null主要用于赋值给一些可能会返回对象的变量，作为初始化。
在JavaScript中，null和undefined都代表没有值或者缺少值，它们有一些区别：
- undefined：undefined表示一个定义了但没有被赋值的变量，或者访问对象属性时不存在的属性。例如：
let x; // 定义了但没有被赋值，值为undefined let obj = {}; console.log(obj.property); // 不存在的属性，值为undefined
- null：null表示一个被明确赋值为null的变量，它是一个空值，表示变量被清空。可以将null赋给任何变量，表示该变量为空。例如：
let x = null; // x的值被明确赋值为null let obj = null; // obj的值被明确赋值为null
主要区别包括：
- 是否被赋值：undefined表示变量未被赋值，而null表示变量被显式赋值为空。
- 类型：undefined是一个数据类型（Undefined），null是一个特殊对象类型（Null）。
在比较时，undefined和null通常被视为相等，但它们的类型不同。例如：
console.log(undefined == null); // true console.log(undefined === null); // false
如果要判断一个变量是否为undefined，可以使用typeof运算符：
let x; console.log(typeof x === 'undefined'); // true
如果要判断一个变量是否为null，可以直接使用等于运算符：
let x = null; console.log(x === null); // true
tips:Null 类型化会返回 “object”，这是一个历史遗留的问题
js 获取原型的方法
要获取一个对象的原型，JavaScript提供了几种方法：
- 使用
Object.getPrototypeOf()方法：该方法返回指定对象的原型（即[[Prototype]]）。例如：
const obj = {}; const prototype = Object.getPrototypeOf(obj); console.log(prototype);
- 使用对象的
__proto__属性：该属性指向对象的原型。例如：
const obj = {}; const prototype = obj.__proto__; console.log(prototype);
- 注意：
__proto__属性在一些新版本的JavaScript中已经被标记为过时，不推荐使用。 - 使用
Object.prototype.isPrototypeOf()方法：该方法判断一个对象是否在另一个对象的原型链上。例如：
const obj = {}; const otherObj = Object.create(obj); console.log(Object.prototype.isPrototypeOf(otherObj)); // true
这些方法都可以用来获取对象的原型。原型是JavaScript中实现继承的关键，可以通过原型链访问和继承对象的属性和方法。注意，在ES6中，也可以使用class和extends关键字来定义类和继承关系，这是更现代和推荐的方式。
说下引用类型
在JavaScript中，引用类型是一种用于存储和操作数据的复杂数据类型。
与基本类型（如字符串、数字、布尔值等）不同，引用类型是通过引用来访问和操作的，而不是直接访问数据本身。
以下是几种常见的引用类型：
1. 对象（Object）
对象是引用类型中最常见的一种。对象可以包含键值对（属性和方法），并且可以动态地添加、修改和删除这些属性和方法。
2. 数组（Array）
数组是引用类型，用于存储多个值。数组中的元素可以是任意类型（包括基本类型和其他引用类型），并且可以通过索引访问、添加和删除元素。
3. 函数（Function）
函数也是引用类型。在JavaScript中，函数可以作为对象进行传递和操作。函数可以被定义、调用，并且可以具有属性和方法。
4. 日期（Date）
日期是引用类型，用于表示日期和时间。日期对象提供了各种方法，用于获取和设置年、月、日、小时、分钟、秒等。
5. 正则表达式（RegExp）
正则表达式是用于匹配和处理字符串的模式。正则表达式对象提供了方法来执行匹配、替换等操作。
引用类型在JavaScript中采用按引用访问的方式，即变量存储的是对实际数据所在内存地址的引用。
这意味着多个变量可以引用同一个对象，对一个变量的修改会影响到其他引用该对象的变量。
需要注意的是，引用类型在进行相等比较时，比较的是引用而不是对象的内容。两个引用类型变量只有在引用同一个对象时才会相等。
const obj1 = {}; const obj2 = {}; console.log(obj1 === obj2); // false，因为obj1和obj2是不同的对象 const obj3 = obj1; console.log(obj1 === obj3); // true，因为obj3引用和obj1引用同一个对象
引用类型在JavaScript中非常常见，它们提供了丰富的功能和灵活性，使得开发人员能够更好地处理和操作数据。
Javascript 的作用域链？
JavaScript的作用域链是一种机制，用于确定在代码中如何查找变量和函数。
当在代码中【引用一个变量】或【调用一个函数】时，
JavaScript引擎会根据作用域链来确定该变量或函数的可访问性和取值。
作用域链是由一系列嵌套的作用域对象（Scope Objects）组成的，每个作用域对象表示一个执行上下文（Execution Context），并包含了当前作用域中的变量和函数。
当在某个作用域中访问一个变量时，JavaScript引擎首先会在当前作用域的变量环境中查找是否存在该变量。如果找到了，就使用该变量的值；如果没有找到，JavaScript引擎会沿着作用域链向上一级作用域查找，直到找到变量或到达全局作用域。如果在全局作用域中仍然没有找到该变量，则会抛出一个ReferenceError错误。
在函数中，每个函数在定义时会创建一个自己的作用域对象（函数作用域）。当函数被调用时，会创建一个新的执行上下文，该上下文将成为当前的活动执行上下文，函数的作用域对象将成为当前的活动作用域链的最前端。
通过函数的嵌套，JavaScript引擎可以创建多层次的作用域链。内部函数可以访问外部函数的变量，因为它们共享相同的作用域链。这种嵌套的作用域链机制被称为"词法作用域"或"静态作用域"，它通过代码的结构来确定变量的可见性和可访问性。
当在代码中创建一个新的函数时，该函数会继承它被创建时的作用域链。这意味着函数在创建时会记住它所在的作用域，无论在何处调用该函数，它都能访问到其创建时的作用域中的变量。
作用域链是JavaScript中重要的概念之一，它决定了变量和函数的可见性和可访问性，同时也影响了变量的生命周期和内存的管理。理解作用域链的机制对于编写正确和高效的JavaScript代码非常重要。
