快速上手vue3.0

比眉伴天荒 2022-12-09 02:19 186阅读 0赞

## vue3.0 ##

### 环境安装 ###

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

### vue3.0 组合式api ###

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

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

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

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

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

### setup ###

1.  setup是composition-api的入口函数
2.  在声明周期beforeCreate事件之前被调用；
3.  可以返回一个对象，这个对象的属性被合并到渲染上下文，并可以在模板中直接使用；
    
    **直接返回的不是一个响应式数据**
    
        setup () { 
            return { 
              msg: 1
            }
          }
    
        <template>
          <div>
            {
             { msg }}
            <button @click="msg++">修改数据</button>
          </div>
        </template>
4.  接收props对象作为第一个参数，接收来的props对象，可以通过watchEffect监视其变化。
5.  接受context对象作为第二个参数，这个对象包含attrs，slots，emit三个属性。

### 定义响应式数据 ###

#### reactive ####

1.  引入reactive

import {  reactive } from 'vue'

1.  通过reactive定义响应式数据

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

#### ref ####

1.  引入ref

import {  ref } from 'vue'

1.  通过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数据 ####

1.  定义方法

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

1.  通过…展开的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

1.  直接在setup内部定义

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

1.  在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就开始支持，只不过使用方式有所区别

1.  引入provide进行提供数据

import {  provide } from 'vue'

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

1.  子组建通过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)
    }