最近公司的项目在用Vue3做相关的开发,之前也接触过Vue2的版本,现在重新温故了一下vue相关的知识点,对一些相关概念的理解做下自己的总结

vue 模版为什么必须是单根的?

注意:这是因为虚拟节点树必须是单根的,所以模版必须是单根的.

对vue中模版语法理解

1. 模版语法
2. template -> HTML字符串 -> Vue特性 -> 表达式/属性/指令
3. Vue的模版都是基于HTML
4. 模版中直接写HTML都是能够被HTML解析器解析的
5. Vue -> 表达式/自定义属性/指令
6. Vue有一套自己的模版编译系统
7. 开发者写的template -> 分析 HTML 字符串 -> AST语法树 -> 表达式/自定义属性/指令 -> 虚拟DOM树 -> 解析真实DOM -> render

对vue3中定义响应式数据(ref和reactive)的理解

如果你直接对整个reactive定义的对象进行赋值改变，确实不会触发视图的更新。这是因为reactive函数只会将对象的属性转换为响应式，而不会将整个对象转换为响应式。

如果你想要实现整个对象的动态变化并触发视图更新，可以使用ref函数将整个对象转换为响应式。然后，你可以通过修改value属性来改变整个对象。

在Vue 3中，使用ref函数将一个值转换为响应式对象时，会返回一个包装对象，该对象具有一个.value属性来访问原始值。

这是因为Vue 3中引入了新的响应式系统，将响应式对象的访问和修改分离开来，以提高性能。

vue computed的回调什么时候执行?

必须满足以下两个条件:

1. 读取到计算属性
2. 当前计算属性是脏数据 (isDirty)
   • 2-1 初始化后 isDirty = true
   • 2-2 读取后 isDirty = false
   • 2-3 计算属性依赖的数据变化 (isDirty = true)

响应式系统的核心是什么?

就是: 函数和数据的关联,当数据发生改变,函数重新执行.

静态资源的动态访问(Vite打包构建项目)

依赖分析: (编译时态),并没有运行代码,无法知道变量的值是多少.

自动依赖发现

1. 多媒体元素的静态链接
2. 样式中的静态链接
3. 动态导入语句中的静态或半静态链接
4. URL构造器中的静态或半静态链接