前言

⭐️ 本专栏主要内容为「 Vue3官方文档 」的学习过程 ✍🏼

⭐️ 本专栏适合人群：Vue小白、学完一遍Vue的掘友 👨🏼‍💻

⭐️ 本专栏的阅读顺序和官方文档顺序相同 📖

⭐️ 英雄不问出处，这个专栏一定让你收获满满 🥳！

⭐️ 静心，思考，实操，坚持，巩固，满载而归 🥰！

⭐️ 欢迎各位掘友在评论区交流 🤡

本节内容

• data
• methods

第五章 Data 和 Methods

第一节 Data Property

什么是property？

const datas = {
  // property
  data() {
    return { count: 4 }
  }
}

const app = Vue.createApp(datas)	// 应用实例

const vm = app.mount('#app')	// 组件实例

property中的data可以通过组件实例的$data中访问到

vm.$data.count	// 4
vm.count	// 4

// 修改 vm.count 也会更新 $data.count
vm.count = 5
vm.$data.count	// 5

// 反之一样
vm.$data.count = 6
vm.count // 6

组件实例的property仅在首次创建时添加到$data中，我们可以直接将不包含在data中的新的property添加到组件实例中，但是新添加到组件实例中的property不在响应式$data对象内，所以新添加的property不具有响应式特性

我们在data函数返回的对象中，对没有提供所需值的property使用null、undefined或其他占位的值来初始化。

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

这里提到了data，那就说说为什么data是一个函数不是一个对象？这也是面试题常考的。

在多个组件实例时，避免出现状态干扰和数据污染的问题，他必须是一个函数，Vue在创建组件实例时，会判断data是否是一个函数，如果是一个函数就会返回一个全新的data，这里也采用了闭包的思想，来解决数据污染的问题，这样就实现了一个组件实例内的data，如果出现和其他组件实例的data中的变量重名，也不会出现数组污染的问题

vue根组件可以不是一个函数，但不建议这样做，因为根组件实例只有一个，不会创建多个，就不会出现数据污染的问题了，所以，根组件中的data可以不使用函数。

第二节 方法 Methods

使用methods Property 向组件实例添加方法，他应该是一个包含所需方法的对象

Vue自动为methods绑定this，以便于它始终指向组件实例。这就确保了方法在用作事件监听或回调函数时保持正确的this指向。在定义methods时应该避免使用箭头函数，因为会组织Vue绑定恰当的this指向。

methods中的方法通常当作事件监听使用。

如果要进行更改数据或触发异步进程，应该使用钩子函数来替换。

防抖和节流

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

如果组件要复用多次，可以在created钩子函数中添加防抖函数

结语

专栏同步代码：Github ⎋

掘金社区：跟我一起学Vue3

作者简介：

一个满脑子奇怪知识的小商同学，在校ing，懂点设计，懂点排版，为成为一名优秀的前端工程师而努力。