weixin_43867229的博客

watchEffect 接受一个函数作为参数，这个函数会立即执行，并响应式地追踪其依赖，并在其依赖变化时重新运行。总的来说，watchEffect 更适合没有特定数据源，或者需要观察多个数据源的场景，而 watch 则更适合需要访问前一个和当前值的场景。在上述代码中，watchEffect 会自动追踪 count，并在 count 变化时打印其值。在上述代码中，watch 会在 count 变化时打印新的和旧的值。，它们都用于观察响应式数据的变化，但它们的使用方式和行为有所不同。

在 Vue2 中，nextTick() 的实现会尝试使用原生的 Promise、MutationObserver 或 setImmediate，如果环境不支持，则会退化到 setTimeout(fn, 0)。，那么就创建一个新的 Promise，并将其 resolve 方法放入微任务队列。这个 Promise 在下一个事件循环中被解析时，会执行微任务队列中的所有任务。，当 Promise 被解析时，nextTick() 会从任务队列中取出并执行所有的回调函数。，它会将回调函数放入一个任务队列中。

这些转换包括将 v-if、v-for 等指令转换为 JavaScript 代码，以及将模板中的表达式转换为 JavaScript 表达式。：在 AST 被转换后，编译器会将其转换为 JavaScript 代码。这个过程是通过代码生成器完成的，代码生成器会遍历 AST，并为每个节点生成相应的 JavaScript 代码。：在代码生成阶段完成后，生成的 JavaScript 代码会在 Vue3 的运行时环境中执行。这个过程是通过解析器完成的，解析器会读取模板字符串，并将其转换为 AST。

Axios 是一个基于的，可以用于浏览器和 node.js 中。它提供了一个 API 来处理 XMLHttpRequests 和 HTTP 请求。

图片懒加载是指在网页加载时，先不加载真实的图片，只是加载一个占位图或者不加载图片。当用户滚动页面，图片已经加载完成，可以立即显示，不会出现等待加载的情况。在 Vue 项目中，如果你想要预加载一些资源，可以使用 html-webpack-plugin 和 preload-webpack-plugin 这两个 webpack 插件。请注意，预加载可能会增加服务器的带宽使用，所以你应该只预加载关键的资源，而不是所有资源。这样，当你的 Vue 应用加载时，浏览器会预加载这些 preload 链接指向的资源。

在 Vue 2 中，组件的 data 选项必须是一个函数，而不是一个对象。这个函数返回一个新的数据对象，这样每个实例可以维护一份被返回对象的独立的拷贝。如果 data 直接是一个对象，那么由于 JavaScript 中对象是引用类型，所有的组件实例将共享同一个数据对象，当在一个组件实例中改变数据，其他所有的组件实例的数据也会被改变。在上面的例子中，第一个组件的 data 是一个对象，这是错误的。第二个组件的 data 是一个函数，返回一个新的数据对象，这是正确的。

其中 UI 的状态被保存在内存中，作为一个（或者说是 JavaScript 对象），然后通过一个叫做 “对比（diffing）” 的过程来更新视图。这个模型的主要目标是，因为直接操作 DOM 通常比较慢，而在 JavaScript 中进行计算则相对较快。在 Vue.js、React 等前端框架中，虚拟 DOM 是一个核心的概念。当数据变化时，框架会创建一个新的虚拟 DOM，然后将新的虚拟 DOM 与旧的虚拟 DOM 进行对比，找出两者的差异。

双向数据绑定在 Vue 2 中，双向数据绑定是通过实现的。Vue 2 会使用为数据对象的每个属性创建和，当属性被访问或修改时，Vue 2 可以通过和捕获这些操作，从而实现数据的响应式更新。在 Vue 3 中，双向数据绑定是通过实现的。提供了更多的拦截操作，不仅可以拦截属性的访问和修改，还可以拦截删除操作、检查操作等。这使得 Vue 3 的数据响应系统更强大、更灵活。双向数据绑定的工作流程如下：当你修改数据时，Vue 会通过捕获这个操作，然后更新视图。

这意味着如果你只使用了 Vue 的一部分功能，那么你的最终打包文件只会包含你实际使用的那部分代码，未使用的代码会被移除。在 Vue 2 中，由于 Vue 的模板编译器需要支持所有可能的指令和组件选项，因此即使你的应用只使用了一部分功能，编译出的代码也需要包含所有功能的运行时代码。这种新的编译策略是 Vue 3 的一个重要优化，它使得 Vue 3 能够更好地支持 tree shaking，从而提供更优的性能。这意味着即使你只使用了 Vue 的一部分功能，你的最终打包文件仍然会包含整个 Vue 库的代码。

Vue 也有类似的解决方案，如 Weex 和 NativeScript，但它们的社区和生态系统不如 React Native。而 React 使用 JSX，它是 JavaScript 的语法扩展，允许在 JavaScript 中编写类似 HTML 的代码。：React 更倾向于函数式编程，推崇组件的纯粹性和可预测性，而 Vue 则更倾向于易用性和灵活性，提供了更多的内置特性和语法糖。：React 和 Vue 的性能都非常优秀，但在某些场景下，由于 Vue 的依赖追踪机制，可能会比 React 更快。

你也可以使用watch来观察多个响应式引用或计算属性。在这种情况下，你需要传递一个数组作为watch的第一个参数，然后回调函数的参数也会是一个数组，包含每个观察目标的新值和旧值。在这个例子中，我们创建了一个响应式引用count，然后使用watch来观察它。当count的值改变时，watch的回调函数就会被执行。在这个例子中，我们同时观察count1和count2。当观察的目标发生变化时，watch函数会执行一个。，watch的回调函数都会被执行。Vue的watch函数用于观察。

在这个例子中，我们首先创建了一个响应式对象state，然后使用toRefs将其转换为一个新的对象，然后我们从这个新对象中解构出count。这是因为解构操作实际上是在创建新的变量，这些变量只是响应式对象属性的初始值的副本，而不是响应式对象属性本身。toRefs可以将响应式对象转换为普通对象，该对象的每个属性都是一个ref，这样你就可以安全地解构这个对象，而不会失去响应性。toRefs的实现原理是遍历传入的响应式对象的每个属性，并为每个属性创建一个新的ref。，以及确保ref的值始终是响应式的。

当你传递一个普通的 JavaScript 对象给 reactive，它会返回一个新的响应式对象，这个对象与原始对象具有相同的属性和值，但是当这些属性被修改时，Vue 会自动跟踪这些更改并更新视图。当你访问或修改响应式对象的属性时，Proxy 会拦截这些操作并通知 Vue 进行相应的处理。当你传递一个值给 ref，它会返回一个具有单个属性 .value 的响应式对象，你可以通过这个属性来获取或设置值。在模板中，Vue 会自动解包 ref 的值，所以你可以直接使用 count 而不是 count.value。

在这个例子中，当输入框的值改变时，updateValue方法会被调用，然后它会触发一个update:modelValue事件，并传递新的值。这个新的值会被自动赋值给v-model绑定的变量。2.在组件内部，你可以通过props.modelValue来访问v-model绑定的值，并通过$emit(‘update:modelValue’, newValue)来更新它。这意味着v-model实际上是在传递一个名为modelValue的prop，并监听一个名为update:modelValue的事件。

浏览器缓存也称为HTTP缓存，HTTP缓存简单理解就是本地（浏览器）缓存了HTTP响应，以便后续复用，减少向服务端的请求。尤其对于一些静态资源，如图片、JS文件、CSS文件等资源，浏览器端缓存可以极大提升页面的加载速度，不用每次都都全部从服务端下载，也减轻了服务端的压力。在vite.config.js文件中，使用build.rollupOptions.output来配置分包规则。使用import.meta.glob或import.meta.globEager来动态导入模块。

1、如果要变成前往type不需要改为search。2、如果改成搜索 需要type=“search”改为搜索后input 会出现默认清除掉icon。外层form是必须的。

而Vite则采用了基于ES Module的开发服务器，只有在需要时才会编译对应的模块，大幅度提升了开发环境的响应速度。3、集成Vue.js：由于Vite是由Vue.js的作者开发的，因此在使用Vue.js开发项目时，Vite能够提供更好的支持。总的来说，Vite的开发环境启动速度和模块热更新速度相比Webpack有显著提升，而Webpack的生态系统更为丰富。Webpack的配置相对复杂，对新手不够友好；1、生产环境配置：Vite目前只提供了基本的生产环境打包功能，对于一些复杂的项目，可能需要自行配置。

vue组合式和选项式的区别

当使用二级目录后 二级目录404如： https://example.com/example 但我们是单页面应用 也有自己的路由地址 https://example.com/example/home 结果访问404。

vue3 h 函数进阶用法

vue 3.0用history路由打包后出现空白页面

如下代码：父组件传到子组件的formValue 的name 是number类型的 并未抛出错误 这种问题怎么解决。