07月06, 2025

对Vue框架中一些相关概念的理解和总结

最近公司的项目在用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构造器中的静态或半静态链接

本文链接:https://901web.com/post/vue-understanding-and-summarizing.html

-- EOF --

Comments

请在后台配置评论类型和相关的值。