8. Vue3中的数据（data）和方法（methods）两个属性的使用

本文参考官网文档链接

声明一下，这个文章是根据 Vue3的官方文档写出来的自己的理解的文章
希望各位评论是Vue2的时候，看一下上边的Vue3的官网的这个链接
如果我的表述上有问题，欢迎各位指出，我也乐意改正

数据 data

组件的 data 选项是一个函数。Vue 在创建新组件实例的过程中调用此函数。它应该返回一个对象。
这个属性在前边也有用到过，应该都还记得吧：

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

data中的数据会在第一次创建这个实例的时候被添加进来，所以需要确保需要的数据都在 data函数中。必要的时候，可以使用null这些值用来占位。
注意：

• Vue中有些内置属性使用$ 和 _开头，所以我们自己的数据应该避免使用$ 和 _ 开头，避免和系统属性发生冲突

方法 methods

这个内容应该在前边也有使用过：

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

注意：

• Vue自动为methods绑定this，方便它指向组件示例。所以我们在些方法的时候，应该保持正确的this指向。
• 箭头函数会改变this的指向，所以在Vue的方法中，不要使用箭头函数。避免出现意想不到的现象。

防抖和节流

在进行窗口的resize、scroll，输入框内容校验等操作时，如果事件处理函数调用的频率无限制，会加重浏览器的负担，导致用户体验非常糟糕。此时我们可以采用debounce（防抖）和throttle（节流）的方式来减少调用频率，同时又不影响实际效果。

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