Vue的学习之旅-part5
- 虚拟DOM的原理
- 用JS模拟DOM结构
- vue的方法、计算属性、过滤器
- computed:{} 计算属性
- computed计算属性的完全体
- computed计算属性和methods方法的区别：
- 过滤器：filters:{ 多个方法 }
- Vuex 状态管理模式
前几篇博客: Vue的学习之旅-part1
前几篇博客: Vue的学习之旅-part2
前几篇博客: Vue的学习之旅-part3
前几篇博客: Vue的学习之旅-part4
书接上回，讲完了vue中自带的指令，那这里接着从讲讲vue的虚拟DOM原理、vue的方法、计算属性、过滤器开始吧~
虚拟DOM的原理
vue先用JS来模拟DOM结构，然后去进行一系列的计算，计算出最小的变更，然后再去操作DOM（这样就最大程度上避免一些无用功的操作）
用JS模拟DOM结构
通过diff算法，找出变更的地方，只修改那里，大大减少dom的操作，提升性能
vue的方法、计算属性、过滤器
computed:{} 计算属性
Vue中的计算属性是一种依赖于响应式数据的属性，它能够在依赖的数据发生变化时自动更新。
计算属性在Vue中是非常有用的，它们可以用来处理一些复杂的逻辑，同时保持模板的简洁性。以下是计算属性的一些关键特点：
- 依赖追踪：计算属性是基于它们的依赖关系进行缓存的。只有在它的相关依赖发生变化时才会重新计算。
- 缓存机制：计算属性的值会被缓存，这意味着只要依赖的数据没有变化，多次访问计算属性会立即返回之前的计算结果，而不会再次执行计算函数。
- 响应式更新：当计算属性所依赖的响应式数据发生变化时，计算属性会重新计算，确保数据始终保持最新状态。
- 模板中使用：计算属性可以在模板中像普通数据属性一样使用，使得模板更加简洁和易于维护。
- 组合使用：计算属性可以依赖于其他计算属性或数据属性，这允许创建复杂的逻辑关系，同时保持代码的模块化和可读性。
计算属性是Vue中非常强大的一个功能，它提供了一种高效的方式来处理数据变化，并且能够自动更新视图。在实际应用中，合理利用计算属性可以极大地提高应用的性能和用户体验。
注意：因为是属性，里面的方法命名时尽量不要起名为：getCount这样有get这种动词的名字，直接叫做count就行，这样才是属性
computed计算属性的完全体
computed计算属性（一般我们用的是简写）
这种简写等价于如下写法：
computed计算属性的真正样子 （完全体） 如下：
设置set方法后的使用：
因为computed计算属性 是 属性，所以调用其set方法就是直接赋值 调用get方法则是直接app.fullName 即可调用get方法
computed计算属性和methods方法的区别：
- computed计算属性中的方法，在计算属性中会进行缓存，多次调用时，如果发现计算值没有发生变化，则会直接使用上次的结果，不再进行重复调用。
- 而methods方法调用几次就会执行击此，每次重新执行，损耗较大。
计算属性（computed）和方法（methods）在Vue中都是用于执行数据操作的，但它们在使用方式、缓存机制和参数传递上有所不同。具体如下：
- 使用方式：计算属性可以像访问对象的属性一样直接访问，而方法需要通过调用函数的方式执行。这意味着计算属性可以作为模板中的绑定表达式直接使用，而方法则需要在模板中使用括号进行调用。
- 缓存机制：计算属性具有缓存机制，只有当它所依赖的数据发生变化时才会重新计算，否则它会返回之前的计算结果，这提高了性能。而方法每次调用都会执行函数，即使返回的是相同的结果，没有缓存机制。
- 参数传递：计算属性不支持传递参数，它只能在定义时接受固定的依赖。方法则可以接收任意数量的参数，这使得方法更加灵活，适用于需要动态参数的场景。
计算属性适合用于处理复杂的数据逻辑，尤其是当依赖的数据变化不频繁时，可以利用缓存提高性能。而方法则适合用于处理需要动态参数或没有复用需求的操作。在实际开发中，应根据具体需求选择使用计算属性还是方法。
过滤器：filters:{ 多个方法 }
一般用于处理时间格式、日期格式等地方
有些地方需要重复使用某种格式的时候，可以通过使用fiters过滤器，达到复用和简便的功能。
Vuex 状态管理模式
Vuex是专为Vue.js设计的状态管理模式，用于集中管理应用的所有组件状态。
在Vue的开发中，当需要在多个组件之间共享状态时，传统的组件间传值方式可能会变得复杂且难以维护。这时，使用Vuex可以简化这个过程，因为它提供了一个中央化的存储来管理状态，从而解决了跨组件通信的问题。
以下是一些Vuex的核心概念：
- Store：它是Vuex中用来管理状态的对象，包括
state、getter、mutation和action四个主要属性。 - State：这是Vuex的数据源，用于存放应用的状态数据。任何组件都可以通过
$store.state.数据名的方式访问这些状态。 - Getter：它允许对状态进行过滤和处理，然后输出结果。这通常用于从store中的state派生出一些新的计算属性。
- Mutation：这是更改Vuex的store中的状态的唯一方法，它必须是同步的。
- Action：用于执行异步操作，例如发送HTTP请求。在操作完成后，通常会通过提交mutation来更改状态。
- Module：当store对象变得庞大时，可以将其分割成多个module，每个module都有自己的
state、getter、mutation和action。
总的来说，虽然Vuex提供了强大的状态管理功能，但并不是所有应用都需要使用它。对于小型或者简单的应用，直接使用Vue的组件间传值可能更加合适。但在开发大型SPA（单页应用）时，使用Vuex可以帮助你更好地组织代码，使得状态变化更加可预测和易于调试。
Vuex采用集中式存储的方法，管理应用的所有组件的状态
如果不打算开发大型单页应用，使用 Vuex 可能是繁琐冗余的。
如果应用够简单，应该使用简单的 store 模式
博主 DTcode7 带您 溺亖在知识的海洋里，嘿嘿嘿.~
🐒 个人主页—— DTcode7 的博客 🐒
《微信小程序相关博客》
《Vue相关博客》
《前端开发习惯与小技巧相关博客》
《AIGC相关博客》
《photoshop相关博客》
😚 吾辈才疏学浅，摹写之作，恐有瑕疵。望诸君海涵赐教。望轻喷，嘤嘤嘤 🙈
🕍 愿斯文对汝有所裨益，纵其简陋未及渊博，亦足以略尽绵薄之力。倘若尚存阙漏，敬请不吝斧正，俾便精进！
