Vue3入门

认识Vue3

1. Vue3组合式API体验

通过 Counter 案例 体验Vue3新引入的组合式API

<script>
export default {
  data(){
    return {
      count:0	
    }
  },
  methods:{
    addCount(){
      this.count++
    }
  }
}
script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

<script setup>
import { ref } from 'vue'
const count = ref(0)
const addCount = ()=> count.value++
script>
1
2
3
4
5

特点：

1. 代码量变少
2. 分散式维护变成集中式维护

2. Vue3更多的优势

使用create-vue搭建Vue3项目

1. 认识create-vue

create-vue是Vue官方新的脚手架工具，底层切换到了 vite （下一代前端工具链），为开发提供极速响应

2. 使用create-vue创建项目

前置条件 - 已安装16.0或更高版本的Node.js

执行如下命令，这一指令将会安装并执行 create-vue

npm init vue@latest
1

熟悉项目和关键文件

组合式API - setup选项

1. setup选项的写法和执行时机

写法

<script>
  export default {
    setup(){
      
    },
    beforeCreate(){
      
    }
  }
script>
1
2
3
4
5
6
7
8
9
10

执行时机

在beforeCreate钩子之前执行

2. setup中写代码的特点

在setup函数中写的数据和方法需要在末尾以对象的方式return，才能给模版使用

<script>
  export default {
    setup(){
      const message = 'this is message'
      const logMessage = ()=>{
        console.log(message)
      }
      // 必须return才可以
      return {
        message,
        logMessage
      }
    }
  }
script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

3.