vue和js常识

• 计算属性computed是Vue.js中一种方便的属性类型，用于在模板中进行复杂计算和逻辑处理。它们的特点是具有缓存机制，只有在相关依赖发生改变时才会重新计算，避免不必要的重复计算。

• Vue.js 中的基础单位是组件。Vue.js的应用通常由一个个组件构成，每个组件都封装了特定的功能或界面元素。.vue 文件是一种用来定义 Vue 组件的文件格式，其中包含了组件的模板（template）、脚本（script）、和样式（style）。

• Vue.js 允许你在一个组件的模板中使用其他组件，从而创建嵌套的组件结构。这种嵌套的组件关系使得你可以构建出复杂的应用界面，其中一个组件的模板中包含其他组件。

• 组件的数据应该是私有的，只有组件自身可以直接访问和修改它。其他组件应该通过通信的方式来进行数据传递，以确保组件之间的解耦和灵活性。

• 在Vue.js中，组件之间是可以进行通信的，有多种方式可以实现这种通信。以下是一些常见的通信方式：
  Props（父子组件通信）： 通过在父组件中使用属性（props）向子组件传递数据。这是一种单向数据流，父组件可以将数据传递给子组件，但子组件不能直接修改父组件的数据。
  Custom Events（子父组件通信）： 子组件可以通过触发自定义事件向父组件发送消息。父组件可以监听这些事件并做出相应的响应。这也是一种单向数据流，但是是从子组件到父组件的。
  Vuex（全局状态管理）： Vuex 是Vue.js官方提供的状态管理库，用于在不同组件之间共享状态。通过在Vuex中定义状态和使用 mutations 来改变状态，多个组件可以共享和响应这些状态的变化。
  $refs（父组件访问子组件）： 父组件可以通过 ref 访问子组件实例，从而直接调用子组件的方法或访问子组件的数据。
  Event Bus（兄弟组件通信）： 可以使用事件总线（Event Bus）模式，通过一个中央的事件触发器来进行组件间的通信。这适用于兄弟组件之间的通信。

• Vue.js 组件的生命周期钩子函数是在组件不同阶段执行的函数，它们允许你在组件的生命周期中执行特定的代码。这些生命周期钩子函数包括：
  beforeCreate: 在实例被创建之初，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。
  created: 在实例已经创建完成时被调用，此时实例已完成以下的配置：数据观测 (data observer)、属性和方法的运算、watch/event 事件回调。
  beforeMount: 在挂载开始之前被调用：相关的 render 函数首次被调用。
  mounted: el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。
  beforeUpdate: 数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。
  updated: 由于数据更改导致的虚拟 DOM 重新渲染和打补丁后调用。
  beforeDestroy: 在实例销毁之前调用。在这一步，实例仍然完全可用。
  destroyed: 在实例销毁之后调用。该钩子被调用后，Vue 实例的所有指令都被解绑，所有的事件监听器被移除，所有的子实例也被销毁。

• watch 是 Vue.js 中用于监视数据变化并执行相应逻辑的选项。你可以使用 watch 来监听数据的变化，然后执行自定义的回调函数。

• setup 函数是 Composition API 的一部分，它负责设置组件的响应式状态、计算属性、方法等。在 setup 中定义的变量和方法，确实会被暴露给模板，但有一些规则和约定需要注意。在模板中，你可以直接访问 setup 返回的对象中的属性和方法。

• Vue.js 应用程序的用户最终获得的通常是一个交互性的 HTML 页面。这个页面是通过 Vue 组件、模板和数据驱动动态生成的。
  具体而言，用户会在浏览器中加载一个 HTML 文件，该文件中包含了应用程序的入口点，例如一个根组件。这个根组件可能包含其他嵌套的组件、数据、模板以及业务逻辑。这些组件会在浏览器中动态渲染，用户可以与这个生成的页面进行交互，响应用户的操作。
  此外，如果应用使用了 Vuex 或其他状态管理工具，用户的浏览器还会加载一个状态存储（store），其中包含了应用的全局状态。这可以确保不同组件之间可以共享和管理相同的状态，使得数据的变化能够在整个应用中同步。
  综合起来，用户获得的是一个动态生成的 HTML 页面，其中包含了 Vue 组件和数据。这个页面的生成和更新是通过 Vue.js 提供的响应式数据绑定和组件系统实现的。

• 快速开发服务器： Vite 提供了一个内置的开发服务器，支持快速的热更新和模块热替换（HMR），可以在开发过程中实现秒级的热更新，大大提高了开发效率。

• 在 Vue.js 中，"状态"通常指的是应用程序的数据状态，即应用程序的当前数据情况。Vue.js 强调了响应式数据驱动的概念，其中状态是被监视的数据，当状态发生变化时，相关的视图会自动更新。状态可以是任何形式的数据，包括简单的原始值（比如数字、字符串）、对象、数组，甚至是复杂的嵌套结构。这些数据可以被 Vue 实例的 data 选项管理，也可以通过 Vuex 等状态管理工具来进行全局状态的管理。

• 在 Vue.js 中，全局状态通常是指应用程序中多个组件之间需要共享的数据。这样的数据需要在整个应用中保持一致，以确保不同组件之间的通信和协作。为了管理全局状态，通常使用状态管理工具，其中 Vuex 是 Vue.js 的官方状态管理库。

• Vuex 是 Vue.js 官方的首选状态管理库，它被广泛使用，特别适用于大型应用。
  Pinia 提供了一种更轻量和灵活的选择，特别适用于小型应用或者更喜欢分布式状态管理模式的开发者。
  看起来，他们都是通过定义一个js文件，其他vue组件来访问这个文件
  无论是 Vuex 还是 Pinia，它们都采用了集中式的状态管理模式，通常需要定义一个JavaScript 文件来创建和导出状态管理实例，供整个应用程序中的各个组件访问。

• 使用 export 在 JavaScript 文件中暴露全局变量确实是一种方法，但使用状态管理库（如 Pinia、Vuex）有一些优势和便利：
  响应式： 状态管理库通常提供了响应式的数据管理，这意味着当状态发生变化时，相关的组件会自动更新。这是通过内部使用 Vue 的响应式系统实现的。手动通过 export 暴露变量时，你需要自行处理数据的监听和更新。
  集中管理： 状态管理库允许你集中管理应用的状态，而不是将它们散布在全局对象中。这使得状态变化更易于追踪和调试。在大型应用中，集中管理状态通常更有组织性。

• store变量被watch或者computed监视，那么也能获得响应

• 在 JavaScript 中，函数（functions）被认为是第一等公民（first-class citizens）。

• 在 JavaScript 中，export 和 import 是 ECMAScript 模块系统的一部分，它们提供了一种方式来在不同的 JavaScript 文件之间共享和使用代码。

• Vue.js 通常被用于构建单页应用（Single Page Applications，SPA）。在单页应用中，整个应用程序加载一次，然后在用户与应用程序交互时，动态地更新视图，而不是通过每次页面请求重新加载整个页面。

• 在 Vue.js 单页应用中，通常有一个根组件（root component），它包含应用程序的整体结构，并且通过 Vue Router 等工具实现不同视图之间的切换，而不需要重新加载整个页面。

• Vue Router 切换视图是基于根组件的路由配置进行的。在单页应用中，通常有一个根组件，它负责承载整个应用的结构和布局。Vue Router 的路由配置就是在这个根组件上进行的，它定义了不同路径对应的组件以及如何切换这些组件。

• store 是 Vue.js 中的概念，而不是 JavaScript 的。在 Vue.js 应用中，store 通常指的是 Vuex，这是 Vue.js 官方的状态管理库。Vuex 是 Vue.js 的官方状态管理库，用于集中管理应用的状态。它提供了一种在组件之间共享状态的方法，以及一系列工具来管理状态的变化。主要包括以下核心概念：
  State（状态）: 用于存储应用级别的状态，可以通过 this.$store.state 在组件中访问。
  Getter（获取器）: 允许组件从 store 中获取状态，类似于计算属性。
  Mutation（突变）: 是唯一更改状态的方法，确保所有状态变更都经过预定的方式。
  Action（动作）: 类似于 Mutation，但是可以包含任意异步操作。Actions 提交 Mutations 来实现状态的变更。
  Module（模块）: 允许将 store 分割成模块，每个模块拥有自己的 state、getters、mutations 和 actions。

• Vuex 的 store 提供了一个全局共享的状态容器，可以在应用的任何组件中访问和修改这些状态。这种全局共享的特性使得在不同组件之间共享数据变得更加容易，而不必通过层层传递 props 或使用其他手段。

• 通过 Vuex，你可以将应用的状态抽象成一个单一的数据源，使得状态的变化变得可追踪、可管理，同时提供了一套规范的方式来进行状态的修改和异步操作。

• const main4 = ref(null);
  然后在模板中，你使用了这些ref引用作为组件的ref属性，例如：
  /</div class=“main_container” id=“m4” ref=“main4”/>
  这样一来，当组件渲染到DOM中时，main1、main2、main3、main4 这四个ref引用将会被设置为对应的组件实例或 DOM 元素。之后，你可以通过这些ref引用来访问组件的属性、方法或者 DOM 元素，执行一些操作，比如获取位置信息，监听事 件，或者直接操作 DOM 元素。

• /</div class=“main_container” id=“m4” ref=“main4”/>在Vue.js中，ref属性用于在组件中存储对DOM元素或子组件实例的引用。

• Vue 中通常使用 $ 前缀来命名全局属性，特别是那些与 Vue 实例直接关联的全局属性。
  一般来说，以下几种情况下会使用 $ 前缀：

Vue 实例属性： 将全局对象或工具挂载到 Vue 实例的原型上时，常常使用 $ 前缀。例如：$http、$router、$store 等。

Vue 组件属性： 在 Vue 组件中使用 $ 前缀来访问全局属性或 Vue 实例内置属性。例如：$refs、$emit、$watch 等。

插件属性： 开发 Vue 插件时，通常会将插件的 API 方法挂载到 Vue 实例上，并使用 $ 前缀。例如：$http、$notify 等。

Vue 原型属性： 将全局对象或工具挂载到 Vue 原型上时，也常常使用 $ 前缀。例如：Vue.prototype.$http。