认识Vue3

为什么要学Vue3

1. 框架层面
   1. 响应式底层API的变化 Proxy 数组下标的修改 对象动态添加属性
   2. Vue2 对ts支持弱 Vue3增强了对TS的支持
   3. Vue3增加对于组合式API 增强了对于逻辑组合的能力
   4. 配套的工程化工具也进行了更新 Vue-cli - create-vue Vuex - pinia
2. 市场层面
   1. 市场在扩大 Vue2最新到2.7

使用create-vue搭建Vue3项目

快速上手 | Vue.js

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

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

npm init vue@latest

注意：避免在中文目录下创建项目

更改Vetur工具为Volar

启用最新的Volar工具，禁用原本的Vetur工具

熟悉项目和关键文件

create-vue

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

关键文件

Vue3组合式API体验

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

<script>
export default {
  data(){
    return {
      count:0
    }
  },
  methods:{
    addCount(){
      this.count++
    }
  }
}
</script>
<template>
  <!-- 不再限制唯一根元素 -->
  <div><button @click="setCount">{{ count }}</button></div>
</template>

<script>
 import { ref } from 'vue'
 export default {
  setup () {
    // 在这里写组合式API
    // 响应式数据
    const count = ref(0)
    // 修改数据的方法
    const setCount = () => {
      count.value++
    }
    // 模版中用哪些数据和方法 以对象的写法return
    return {
      count,
      setCount
    }
  }
}
</script>

<template>
  <!-- 不再限制唯一根元素 -->
  <div><button @click="setCount">{{ count }}</button></div>
</template>

#

组合式API - setup选项

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

写法

<script>
  export default {
    setup(){

    },
    beforeCreate(){

    }
  }
</script>

执行时机

在beforeCreate钩子之前执行

2. setup中写代码的特点

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

<script>
  export default {
    setup(){
      const message = 'this is message'
      const logMessage = ()=>{
        console.log(message)
      }
      // 必须return才可以
      return {
        message,
        logMessage
      }
    }
  }
</script>

3.