Moon__T-CSDN博客

原创 Vue中的过滤器是什么

在组件的选项中定义本地的过滤器filters: {if (!if (!})new Vue({// ...})注意：当全局过滤器和局部过滤器重名时，会采用局部过滤器过滤器函数总接收表达式的值 (之前的操作链的结果) 作为第一个参数。在上述例子中，capitalize 过滤器函数将会收到 message 的值作为第一个参数在这个例子中，filterA 被定义为接收单个参数的过滤器函数，表达式 message 的值将作为参数传入到函数中。

2024-03-27 20:54:15 195

原创如何理解Vue中的keep-alive

keep-alive>是Vue.js中的一个内置组件，它的主要功能是，而不是销毁它们。当组件在<keep-alive>包裹下时，它的状态将会被保留，即组件的数据和DOM都不会被销毁和重建，从而在组件切换时能够实现高效的复用。

2024-03-27 18:35:46 407

原创关于Vue中的observable

是 Vue 提供的一种响应式数据处理机制，用于创建可观察对象（observable object）或可观察数组（observable array）。通过将对象或数组转换为可观察状态，我们可以在数据发生变化时自动触发相应的更新操作，从而实现响应式的界面更新。在 Vue.js 中，

2024-03-26 16:20:46 514

原创 Vue中的插槽slot是什么

插槽（Slot）是一种用于组件化的技术，常见于 Vue.js 和其他一些现代前端框架中。插槽允许组件使用者在其内部插入额外的内容，具体来说，插槽允许组件的作者在定义组件时，预留出一些位置或区域，然后允许组件的使用者将自己的内容插入到这些位置或区域中。在 Vue.js 中，插槽通过<slot>元素来实现。当组件使用者在组件的标签中添加内容时，这些内容会被插入到组件内部的<slot>元素所在的位置上。如果组件的使用者没有提供额外的内容，则<slot>元素中的默认内容将被显示。

2024-03-26 15:58:15 898

原创 Vue中的$nextTick

nextTick是Vue.js等前端框架中的一个重要概念，它用于在下一个“tick”或“任务”执行代码，确保在数据变化后立即更新DOM之前执行。这个机制特别重要，因为它允许开发者在DOM更新完成后立即运行某些代码，而不必担心是否正在使用旧的DOM状态。在Vue.js中，当你更改数据，视图不会立即更新。Vue异步更新DOM以提高性能。这意味着Vue会将所有数据变更放入到下一个事件循环“tick”中，一次性更新视图。nextTick允许你在这个更新过程之后运行某些代码，确保你的代码访问的是最新的DOM。

2024-03-23 15:00:38 666

原创 Vue中双向绑定及其实现原理

以Vue.js为例，它是一个流行的前端框架，采用双向绑定技术，我们可以通过Vue的工作方式来理解双向绑定的实现原理。同样，当用户在视图上做出更改时（例如，编辑了一个表单字段），这些更改会自动反映回数据模型，无需额外的代码。当数据变化时，通过数据劫持检测到变化后，会通知所有订阅了这个数据的观察者（即依赖收集阶段收集的依赖），触发它们的更新逻辑，从而导致视图的更新。当用户输入时，这些机制会更新模型中的数据，触发数据劫持机制，进而可能引发其他数据或视图的更新。例如，在Vue中，当你定义一个组件的。

2024-03-23 14:09:17 506

原创 Vue中的组件与插件

组件是用于实现局部（特定）功能效果的代码集合。这些代码集合包括HTML、CSS、JavaScript等。组件是可复用的Vue实例，可以把一些公共的模块抽取出来，然后写成单独的工具组件或页面，在需要的页面中直接引入即可，从而提高了代码的复用率。简单来说，就是一些额外的小工具或功能模块，它们可以帮助我们更好地完成网页开发或增强网页的功能。在前端开发中，这些插件通常是一些已经写好的代码，我们只需要把它们加入到我们的项目中，就可以直接使用它们提供的功能，而不需要自己从头开始写代码。

2024-03-23 10:56:44 977

原创在Vue中，如何对对象动态添加一个新的响应式属性

比如：我们定义一个p标签，通过v-for指令进行遍历然后给botton标签绑定点击事件，我们预期点击按钮时，数据新增一个属性，界面也新增一行实例化一个vue实例，定义data属性和methods方法点击按钮，发现结果不及预期，数据虽然更新了（console打印出了新属性），但页面并没有更新这是当动态给Vue的data添加一个新的属性时，Vue不会自动检测到这个变化，而且这个新的属性不会触发视图更新。

2024-03-22 11:05:43 768

原创关于vue中的el属性

el是vue中的一个重要属性，存在于根实例或者需要被挂载的父组件中，用于指定vue实例将要管理的DOM元素。这意味着当我们创建vue的根实例时，我们可以通过el属性来告诉vue哪个DOM元素应该被实例接管。

2024-03-21 17:59:39 497

原创在Vue中，.data和$data的不同

总结来说，虽然 .data 和 .$data 提供了访问 Vue 实例数据的不同方式，但在实际开发中，直接通过属性名访问数据更为常见和方便。而在某些特定场景下，比如需要操作整个数据对象时，.$data 可能会更有用。另一方面，app.$data 提供了对整个数据对象的访问。这通常在你需要操作整个数据对象，而不是单个属性时很有用。在Vue中，.data 和 .$data 的主要区别在于它们访问Vue实例的不同属性和层面。在这个例子中，data 对象包含两个属性：message 和 count。

2024-03-21 15:35:19 333 1

原创 Vue—为什么不推荐v-for和v-if一起使用

在Vue中，计算属性是基于它们的依赖进行缓存的。这意味着只要计算属性依赖的数据（在这个例子中是items数组）没有发生变化，计算属性就会返回之前缓存的结果，而不会重新计算。因此，当items数组很大时，计算属性的方式比直接在模板中使用v-for和v-if更高效，因为它避免了不必要的重复计算和DOM操作。此时效率的提高并非来自算法本身的改进（比如使用更高效的排序或搜索算法），而是通过将遍历和条件判断的逻辑从模板渲染过程中移出，放到了计算属性（computed properties）中。

2024-03-21 14:47:48 363 1

moon_zq的博客