Vue学习笔记04：Data Property与方法 (methods)

Data Property

组件的data选项是一个函数，Vue会在创建新组件实例的过程中调用此函数。它应该返回一个对象，然后Vue会通过响应性系统将其包裹起来，并以$data的形式存储在组件实例中。

为方便起见，该对象的任何顶级property也会直接通过组件实例暴露出来：

const app = Vue.createApp({
  data() {
    return { count: 4 }
  }
})

const vm = app.mount('#app')

console.log(vm.$data.count) // => 4
console.log(vm.count)       // => 4

// 修改 vm.count 的值也会更新 $data.count
vm.count = 5
console.log(vm.$data.count) // => 5

// 反之亦然
vm.$data.count = 6
console.log(vm.count) // => 6

这些实例property仅在实例首次创建时被添加，所以你需要确保它们都在data函数返回的对象中。

必要时，要对尚未提供所需值的property使用null、undefined或其他占位的值。

直接将不包含在data中的新property添加到组件实例是可行的。但由于该property不在背后的响应式$data对象内，所以Vue的响应性系统不会自动跟踪它。

Vue使用$前缀通过组件实例暴露自己的内置API。它还为内部property保留_前缀。你应该避免使用这两个字符开头的顶级data property名称

方法 (methods)

我们用methods选项向组件实例添加方法，它应该是一个包含所需方法的对象：

const app = Vue.createApp({
  data() {
    return { count: 4 }
  },
  methods: {
    increment() {
      // `this` 指向该组件实例
      this.count++
    }
  }
})

const vm = app.mount('#app')

console.log(vm.count) // => 4

vm.increment()

console.log(vm.count) // => 5

Vue自动为methods绑定this，以便于它始终指向组件实例。这将确保方法在用作事件监听或回调时保持正确的this指向。

在定义methods时应避免使用箭头函数，因为这会阻止Vue绑定恰当的this指向。

这些methods和组件实例的其它所有property一样可以在组件的模板中被访问。在模板中，它们通常被当做事件监听使用：

<button @click="increment">Up vote</button>

在上面的例子中，点击<button>时，会调用increment方法。

也可以直接从模板中调用方法。通常换做计算属性会更好。但是，在计算属性不可行的情况下，使用方法可能会很有用。你可以在模板支持JavaScript表达式的任何地方调用方法：

<span :title="toTitleDate(date)">
  {{ formatDate(date) }}
</span>

如果toTitleDate或formatDate访问了任何响应式数据，则将其作为渲染依赖项进行跟踪，就像直接在模板中使用过一样。

从模板调用的方法不应该有任何副作用，比如更改数据或触发异步进程。如果你想这么做，应该使用生命周期钩子来替换。

防抖和节流

防抖函数的作用就是控制函数在一定时间内的执行次数。防抖意味着N秒内函数只会被执行一次（最后一次），如果N秒内再次被触发，则重新计算延迟时间。

节流函数的作用是规定一个单位时间，在这个单位时间内最多只能触发一次函数执行，如果这个单位时间内多次触发函数，只能有一次生效。

在JavaScript中，防抖和节流其实是一个很重要的概念。主要应用场景就是会频繁触发的事件，比如监听滚动、点赞功能，总不能点一次赞就向后台发送一次数据，这时候就要用到防抖和节流。

防抖和节流的核心就是定时器，我们要知道定时器的一个概念，就是在定时之后，在没触发之前清除定时器，这个定时器方法不会被触发。

Vue没有内置支持防抖和节流，但可以使用Lodash等库来实现。

如果某个组件仅使用一次，可以在methods中直接应用防抖：

<script src="https://unpkg.com/[email protected]/lodash.min.js"></script>
<script>
  Vue.createApp({
    methods: {
      // 用 Lodash 的防抖函数
      click: _.debounce(function() {
        // ... 响应点击 ...
      }, 500)
    }
  }).mount('#app')
</script>

但是，这种方法对于可复用组件有潜在的问题，因为它们都共享相同的防抖函数。为了使组件实例彼此独立，可以在生命周期钩子的created里添加该防抖函数:

app.component('save-button', {
  created() {
    // 使用 Lodash 实现防抖
    this.debouncedClick = _.debounce(this.click, 500)
  },
  unmounted() {
    // 移除组件时，取消定时器
    this.debouncedClick.cancel()
  },
  methods: {
    click() {
      // ... 响应点击 ...
    }
  },
  template: `
    <button @click="debouncedClick">
      Save
    </button>
  `
})