一、项目配置

1.安装vue npm install vue -g

2.安装脚手架命令行创建vue create demo

3.安装naive ui样式组件 npm i -D naive-ui

4.使用 unplugin-auto-import **
unplugin-auto-import**：为 Vite、Webpack、Rollup 和 esbuild 按需自动导入 API。支持 TypeScript，在vite.config.ts文件中配置

5.使用unplugin-vue-componentsVue 的按需组件自动导入。

二、vue2与vue3的不同

1. 启动方式

import Vue from 'vue'
new Vue({
    store,
    router, 
    render:h=>h(App)
}).$mount("#app")

import {createApp} from 'vue'
createApp(App).use(router).use(store).mount("#app")

2.生命周期不同

三、组合式api

setup函数

setup()钩子是在组件中使用组合式API的入口

（1） $\color{red}ref$

创建值类型响应式数据的方法
在seup内部需要 .value 来访问设置值

（2） $\color{red}reactive$

 创建引用类型响应式数据方法

（3） $\color{red}defineProps$

 定义组件的传参

（4） $\color{red}defineEmits$

 定义组件发送的事件

（5） $\color{red}watch$

  监听一个数据的变化

（6） $\color{red}watchEffect$

 监听多个数据

（7） $\color{red}生命周期$

 setup中的声明周期没有created和beforeCreate
 setup的生命周期需要加on前缀

<script setup>
import { ref, onUpdated } from 'vue'
const count = ref(0)
onUpdated(() => { // 文本内容应该与当前的 `count.value` 一致 
    console.log(document.getElementById('count').textContent)
})

四、选项式API

选项状态： $\color{red}data$

该函数应当返回一个普通 JavaScript 对象，Vue 会将它转换为响应式对象。实例创建后，可以通过 this.$data 访问该响应式对象。组件实例也代理了该数据对象上所有的属性，因此 this.a 等价于 this.$data.a

$\color{red}props$

用于声明一个组件的 props

export default {
props: { // 类型检查 
    height: Number, // 类型检查 + 其他验证
    age: { 
        type: Number, 
        default: 0, 
        required: true, 
        validator: (value) => { return value >= 0 }
        }
    } 
}

$\color{red}computed$

用于声明要在组件实例上暴露的计算属性。

$\color{red}methods$

用于声明要混入到组件实例中的方法

$\color{red}watch$

用于声明在数据更改时调用的侦听回调。

$\color{red}emits$

用于声明由组件触发的自定义事件。

$\color{red}expose$

用于声明当组件实例被父组件通过模板引用访问时暴露的公共属性

五、vue-router

vue2.x中，可以通过this.$router或者this.$route来获取或者操作路由。

在vue3.0中，引入了Composition-api。在setup函数中无法使用this获取组件实例。新版本的vue-router也提供了支持Composition-api的hooks，例如useRouter，useRoute函数

export default {
  setup() {
    const router = useRouter()
    const route = useRoute()

    function pushWithQuery(query) {
      router.push({
        name: 'search',
        query: {
          ...route.query,
        },
      })
    }
  },
}

vue-router还提供了支持的Composition-api的两个路由守卫：update and leave

import { onBeforeRouteLeave, onBeforeRouteUpdate } from 'vue-router'

export default {
  setup() {
    onBeforeRouteLeave((to, from) => {
      const answer = window.confirm(
        '确认离开？'
      )
      if (!answer) return false
    })

    const userData = ref()

    onBeforeRouteUpdate(async (to, from) => {
      if (to.params.id !== from.params.id) {
        userData.value = await fetchUser(to.params.id)
      }
    })
  },
}

VUE3相关

一、项目配置

二、vue2与vue3的不同

三、组合式api

四、选项式API

五、vue-router