极客惠

Appearance

我的学习笔记 ​

在这篇文章中，我将分享一些我在学习过程中的笔记和心得体会。

Vue.js 学习笔记 ​

组件通信 ​

Vue组件之间的通信方式有多种：

  1. Props 和 Events：父组件通过props向子组件传递数据，子组件通过events向父组件发送消息。
vue
<!-- 父组件 -->
<template>
  <child-component :message="parentMessage" @response="handleResponse" />
</template>

<!-- 子组件 -->
<template>
  <div>
    <p>{{ message }}</p>
    <button @click="sendResponse">回复</button>
  </div>
</template>

<script>
export default {
  props: ['message'],
  methods: {
    sendResponse() {
      this.$emit('response', '子组件的回复')
    }
  }
}
</script>

  1. Provide/Inject：适用于深层嵌套组件之间的通信。

  2. Vuex：适用于复杂的状态管理。

JavaScript 学习笔记 ​

异步编程 ​

JavaScript中处理异步操作的几种方式：

  1. 回调函数：最基本的异步处理方式，但容易导致回调地狱。
javascript
function fetchData(callback) {
  setTimeout(() => {
    callback('数据')
  }, 1000)
}

fetchData(data => {
  console.log(data)
})
  1. Promise：更优雅的异步处理方式。
javascript
function fetchData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('数据')
    }, 1000)
  })
}

fetchData()
  .then(data => {
    console.log(data)
  })
  .catch(error => {
    console.error(error)
  })
  1. Async/Await：基于Promise的语法糖，使异步代码看起来像同步代码。
javascript
async function getData() {
  try {
    const data = await fetchData()
    console.log(data)
  } catch (error) {
    console.error(error)
  }
}

getData()

学习资源 ​

以下是我推荐的一些学习资源：

持续学习是成为优秀开发者的关键。我会不断更新这篇笔记，分享我的学习心得。