【VUE3】 - 技术栈

Vue 3 是当下最流行的前端框架之一，其主要特点是性能更好、体积更小、更易于维护。下面是 Vue 3 的一些重要知识点和代码示例：

创建 Vue 实例

import { createApp } from 'vue'

const app = createApp({
data() {
return {
message: 'Hello, Vue 3!'
}
}
})

app.mount('#app')

2.组件

复制代码

import { defineComponent } from 'vue'

export default defineComponent({
  props: {
    title: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      message: 'Hello, Vue 3!'
    }
  },
  methods: {
    handleClick() {
      console.log('Button clicked')
    }
  },
  template: `
    <div>
      <h1>{{ title }}</h1>
      <p>{{ message }}</p>
      <button @click="handleClick">Click me</button>
    </div>
  `
})

3.生命周期钩子函数

复制代码

import { onMounted, onUpdated, onUnmounted } from 'vue'

export default {
  setup() {
    onMounted(() => {
      console.log('Component mounted')
    })

    onUpdated(() => {
      console.log('Component updated')
    })

    onUnmounted(() => {
      console.log('Component unmounted')
    })
  }
}

4.模板引用和插槽

复制代码

<template>
  <div>
    <h1 ref="titleRef">{{ title }}</h1>
    <slot></slot>
  </div>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      required: true
    }
  },
  mounted() {
    // 操作模板引用
    console.log(this.$refs.titleRef)
  }
}
</script>

5.响应式数据

复制代码

import { reactive } from 'vue'

export default {
  setup() {
    const state = reactive({
      message: 'Hello, Vue 3!'
    })

    return {
      state
    }
  }
}

6.生命周期函数

复制代码

import { onMounted, onUpdated, onUnmounted } from 'vue'

export default {
  setup() {
    onMounted(() => {
      console.log('Component mounted')
    })

    onUpdated(() => {
      console.log('Component updated')
    })

    onUnmounted(() => {
      console.log('Component unmounted')
    })
  }
}

7.组件通信

复制代码

// 父组件
<template>
  <div>
    <child :message="message" @update-message="updateMessage" />
  </div>
</template>

<script>
import Child from './Child.vue'

export default {
  components: {
    Child
  },
  data() {
    return {
      message: 'Hello, Vue 3!'
    }
  },
  methods: {
    updateMessage(newMessage) {
      this.message = newMessage
    }
  }
}
</script>

// 子组件
<template>
  <div>
    <p>{{ message }}</p>
    <button @click="handleClick">Update message</button>
  </div>
</template>

<script>
import { defineEmits, defineProps } from 'vue'

export default {
  props: defineProps({
    message: {
      type: String,
      required: true
    }
  }),
  emits: defineEmits(['update-message']),
  methods: {
    handleClick() {
      this.$emit('update-message', 'New message')
    }
  }
}
</script>

这些是 Vue 3 的一些重要知识点和代码示例，但不仅限于此。作为一个全面的前端框架，Vue 3 还有许多其他功能和工具，可以让您编写出更好的 Web 应用程序。