04、Vue.js 3 —— Data Property 和 方法

Data Property

组件的 data 选项是一个函数。Vue 会在创建新组件实例的过程中调用此函数。它应该返回一个对象，然后 Vue 会通过响应性系统将其包裹起来，并以 $data 的形式存储在组件实例中。为方便起见，该对象(即：createApp的参数)的任何顶级 property 也会直接通过 组件实例 暴露出来：

const app = Vue.createApp({
  data() {           // 这个data是个函数
    return { count: 4 }         // 这个data函数返回的是一个对象
  }
})

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

console.log(vm.$data.count) // => 4           // data被存储在 根组件实例 中
console.log(vm.count)       // => 4           // 通过 根组件实例 暴露出data里面的 property

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

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

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

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

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

 

方法 methods

用 methods 选项向组件实例添加方法：

<!-- 点击 <button> 时，会调用 increment 方法 -->
<button @click="increment">Up vote</button>

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 ：

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

上面例子，通常换做 计算属性 会更好。

 

防抖和节流

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

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

<script src="https://unpkg.com/lodash@4.17.20/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>
  `
})

 

下一章：计算属性 和 侦听器