computed原理

computed是Vue.js中的一个计算属性，它实际上就是一个函数，用于根据已有的属性计算出一个新的属性值。当计算属性所依赖的属性发生变化时，计算属性也会重新计算。相对于直接在模板中写一些逻辑计算，使用计算属性可以使代码更加清晰和简洁。

computed原理其实很简单，就是利用了Vue.js对JavaScript对象getter的拦截。当我们在Vue实例中定义了一个计算属性时，Vue会将该计算属性的getter函数注册到该计算属性所依赖的所有属性的getter函数中。这样当计算属性所依赖的任何一个属性被访问时，就会触发该计算属性的getter函数，从而重新计算计算属性的值。

相关问题

vue中computed原理

vue中的computed原理是通过定义计算属性来实现对数据的处理和监听。计算属性是一种根据已有数据计算得出的属性，它会根据依赖的数据进行自动更新。在vue中，我们可以通过computed属性来定义计算属性。

computed属性是一个对象，其中的每一个属性对应一个计算属性。在计算属性中，我们可以编写一个函数，该函数返回的值就是计算属性的最终值。计算属性会自动根据它所依赖的数据进行缓存，只有依赖的数据发生变化时，才会重新计算。

当计算属性所依赖的数据发生变化时，computed会自动触发重新计算，并将计算结果缓存起来。这样，当其他地方需要使用计算属性时，直接获取缓存的值，不需要每次都重新计算，从而提高了性能。

一个计算属性可以依赖多个数据，当其中任意一个数据变化时，计算属性会重新计算。Vue会建立计算属性与数据之间的依赖关系，并在依赖的数据发生变化时，自动通知计算属性进行重新计算。

通过computed属性，我们可以将一些复杂的数据处理逻辑封装成函数，让代码更加清晰和易读。另外，在模板中使用计算属性的值时，直接通过计算属性的名称引用即可，不需要手动调用函数。

综上所述，computed原理是通过定义计算属性实现对数据的处理和监听，它会自动根据依赖的数据进行缓存和更新。这样可以提高性能，并使数据处理的逻辑更加清晰和易读。

computed原理的dirty

在Vue中，computed是一种用于计算属性的特殊函数。当计算属性中依赖的数据发生变化时，computed会自动更新它的值。dirty是computed原理中的一个关键概念，它表示计算属性的值是否已经过期，即是否需要重新计算。

当一个计算属性被访问时，computed函数会被执行，这时它会判断该计算属性依赖的数据是否发生变化，如果发生了变化，则会将dirty标记为true，表示该计算属性已经过期需要重新计算。当下次访问该计算属性时，如果dirty标记为true，则会重新计算该属性的值，并将dirty标记为false，表示该计算属性已经是最新的值了。

需要注意的是，dirty机制只适用于依赖响应式数据的情况，如果计算属性依赖的数据不是响应式的，则dirty机制无效。