快速上手vue3.0_vue3.0 import-CSDN博客

本文链接：https://blog.csdn.net/weixin_41819098/article/details/108706770

vue3.0

环境安装

安装最新vue脚手架
```
npm i @vue/cli -g
```
通过脚手架创建项目，并选择3.0
```
vue create vue-next
```
运行项目
```
npm run serve
```

vue3.0 组合式api

vue2.0采用的叫做选项式api：

例如我们想实现某一个功能，关于这个功能的数据我们会定义在data中，事件函数定义在methods中，计算属性定义在computed中…,

实际上我们想实现一个功能会把我们代码拆分写到不同的模块中，这样我们很难区分，哪个数据和哪个逻辑是一一对应的，而且想实现这个功能也要在data、methods、computed中跳来跳去。

Vue3.0的组合式（composition-api）api：

我们会把同一功能的逻辑写在一起，写到一个函数中

setup

setup是composition-api的入口函数
在声明周期beforeCreate事件之前被调用；

可以返回一个对象，这个对象的属性被合并到渲染上下文，并可以在模板中直接使用；

直接返回的不是一个响应式数据

setup () {
    return {
      msg: 1
    }
  }

<template>
  <div>
    {{ msg }}
    <button @click="msg++">修改数据</button>
  </div>
</template>

接收props对象作为第一个参数，接收来的props对象，可以通过watchEffect监视其变化。
接受context对象作为第二个参数，这个对象包含attrs，slots，emit三个属性。

定义响应式数据

reactive

引入reactive

import { reactive } from 'vue'

通过reactive定义响应式数据

setup () {
  const state = reactive({
    msg: 123
  })
  return state
}

ref

引入ref

import { ref } from 'vue'

通过ref定义响应式数据

setup () {
  const msg = ref(123)
  return {
    msg
  }
}

ref&reactive共用

setup () {
  const state = reactive({
    num: 123
  })
  const msg = ref('hello vue3.0')
  return {
    msg,
    ...state
  }
}

定义方法

定义方法修改reactive数据

定义方法

setup () {
    const state = reactive({
      num: 123
    })
    const msg = ref('hello vue3.0')
    // 定义addNum
    const addNum = () => {
      state.num++
    }
    return {
      msg,
      ...state,
      addNum
    }
  }

通过…展开的reactive定义的数据不能响应，需要转换为ref方式

import { reactive, ref, toRefs } from 'vue'

setup () {
    const state = reactive({
      num: 123
    })
    const msg = ref('hello vue3.0')
    const addNum = () => {
      state.num++
    }
    return {
      msg,
      ...toRefs(state),
      addNum
    }
  }

定义方法修改ref数据

const addNum = () => {
  msg.value = 'hello'
}

computed

引入computed

直接在setup内部定义

setup () {
    const doubleNum = computed(() => {
      return state.num * 2
    })
    return {
      doubleNum
    }
  }

在state中定义

const state = reactive({
  num: 123,
  doubleNum: computed(() => {
    return state.num * 2
  })
})

watch

watch(() => state.num, (newValue, oldValue) => {
  console.log('num变化了', newValue, oldValue)
})

生命周期函数

可以直接导入 onXXX 一族的函数来注册生命周期钩子：

import { onUpdated, onUnmounted } from 'vue'

setup () {
  onMounted(() => {
    console.log('mounted!')
  })
  onUpdated(() => {
    console.log('updated!')
  })
  onUnmounted(() => {
    console.log('unmounted!')
  })
}

与 2.x 版本生命周期相对应的组合式 API

beforeCreate -> 使用 setup()
created -> 使用 setup()
beforeMount -> onBeforeMount
mounted -> onMounted
beforeUpdate -> onBeforeUpdate
updated -> onUpdated
beforeDestroy -> onBeforeUnmount
destroyed -> onUnmounted
errorCaptured -> onErrorCaptured

依赖注入

依赖注入并不是vue3.0新增的特性，2.0就开始支持，只不过使用方式有所区别

引入provide进行提供数据

import { provide } from 'vue'

setup () {
  const state = reactive({
    msg: 'hello'
  })
  provide('num', state.msg)
}

子组建通过inject进行接收

import { inject } from 'vue'
export default {
  setup () {
    const num = inject('num')
    console.log(num)
  }
}

路由

vue3中的路由使用方式变成了导入方法，进行路由的使用

import { createRouter, createWebHistory } from 'vue-router'

const routes = [
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

export default router

createRouter: 用来创建路由对象

createWebHistory：用来使用history模式的路由

createWebHashHistory：用来使用hash模式的路由

useRouter

使用useRouter进行编程式导航

import { useRouter } from 'vue-router'
setup () {
  const router = useRouter()

  const goHome = () => {
    router.push('/home')
  }
}

useRoute

通过useRoute获取当前路由信息,path、query、params

import { useRoute } from 'vue-router'
setup () {
  const route = useRoute()
  console.log(route.path)
}