vue2开发心得

1.computed

computed 是一个对象，它包含了一系列计算属性。计算属性是基于它们的依赖进行缓存的计算值。只有当依赖发生变化时，计算属性才会重新计算。这使得计算属性非常适合执行昂贵的计算或派生状态。

computed 中的属性是响应式的，这意味着当它们的依赖项发生变化时，Vue 将自动更新依赖于这些计算属性的任何 DOM。

2.Object.assign() 函数

Object.assign() 函数用于将所有可枚举的自有属性从一个或多个源对象复制到目标对象，并返回修改后的目标对象。当使用 Object.assign({}, this.defaultItem) 时，它创建了 this.defaultItem 的一个浅拷贝。在 Vue 应用程序中，这种模式经常用于处理表单数据，其中 this.defaultItem 可能是表单的初始值，而 this.editedItem 是用户输入后的数据，你可能希望基于初始值创建一个副本以进行编辑，而不直接修改原始数据。

3.indexOf 方法

indexOf 方法的调用，这个方法定义在数组的原型上，用于找出一个元素在数组中第一次出现的索引位置。如果元素在数组中不存在，则返回 -1。

以下是 indexOf 方法的一些关键点：

• this.desserts：这通常是一个 Vue 组件实例的数组数据属性，例如一个存储甜品名称的数组。

• indexOf(item) ：indexOf 方法接收一个参数 item，这是你想要在数组中查找的元素。

• 返回值 ：如果找到元素，indexOf 返回元素在数组中的索引；如果没有找到，返回 -1。indexOf 方法经常用于以下场景：

• 检查元素是否存在 ：通过检查 indexOf 方法的返回值是否为 -1 来判断元素是否在数组中。

• 获取元素位置：在需要对数组元素进行排序或重新排列时，获取元素的当前索引位置。

• 响应式更新 ：由于 indexOf 是一个响应式的方法，当数组 this.desserts 发生变化时，依赖这个方法的结果的任何计算属性或侦听器都会更新。

4.splice()

splice() 是数组的一个方法，用于添加或删除数组中的元素。this.imgs.splice(this.deleteIndex, 1); 这行代码表示从数组 this.imgs 中删除索引为 this.deleteIndex 的单个元素。

以下是 splice() 方法的一些关键点：

• this.imgs：这是当前 Vue 组件实例的一个数组数据属性，例如一个包含图片 URL 的数组。

• this.deleteIndex ：这是组件实例的一个数据属性或计算属性，表示要从 this.imgs 数组中删除元素的索引。

• splice() 方法：

  • 第一个参数是 this.deleteIndex，指定了要开始删除的位置（索引）。
  • 第二个参数是 1，表示要删除的元素数量。在这个例子中，只删除一个元素。

• 返回值 ：splice() 方法返回一个数组，包含被删除的元素。

• 原地修改 ：splice() 方法会直接修改原数组 this.imgs，不创建新的数组。

• 响应性 ：在 Vue 中，如果 splice() 方法被用于响应式数组，Vue 将自动追踪这一变化，并更新 DOM 以反映这一变化。

5. watch 选项

watch 是一个选项，允许您指定一个或多个数据属性的侦听器。当这些属性的值发生变化时，相应的侦听器函数将被调用。

• watch 对象包含键值对，其中键是您想要侦听的数据属性名称。

6.hideFooter和 perPage属性

1. hideFooter: true：这个属性用来隐藏表格的页脚（footer）。在默认情况下，<v-data-table>会在表格底部显示分页信息和每页显示条目数的选择器。如果您不希望显示这些信息，可以将hideFooter设置为true。

2. perPage：这个属性用来设置每页显示的条目数。