本地搭建vue3 + ts + vite项目(二 vue3.x API + Vue Router4笔记)本地搭建vue

- 官网vue3API分为以下类目：（放在开头有个整体概念）

1635384542(1).png

1.应用配置

每个Vue应用都会暴露出一个config对象
const app= createApp({})

app.config.globalProperties.foo = 'bar'
相当于vue2.x中
Vue.prototype.foo = 'bar'

2.应用API

应用API是改变全局VUE行为的一些API，vue3中由createApp方法创建应用实例，使用方法链式.,包括：component config directive mixin mount provide unmount use version。
import { createApp } from 'vue'
const app = createApp({})

3.全局API

3.1defineComponent

具有组件选项的对象
import {defineComponent} from 'vue'

const MyComponent = defineComponent({
    data(){
        return {count :1}
    },
    methods: {
        increment(){
            this.count++
        }
    }
})

或者是一个setup函数，函数名称将作为组件名称使用

import {defineComponent} from 'vue'

const Hello = defineComponent(function Hello(){
    const count = ref(0)
    return {count}
})

4.选项

data props watch computed methods emits
expose示例
export default {
    expose:['increment'],
    data(){
        return {
            count:0
        }
    },
    menthods:{
        increment(){
            this.count++
        }
    }

}

生命周期

1638929359(1).png 1638168147(1).png

1634714245(1).png

activated被keep-alive缓存的组件激活时调用，该钩子在服务器端渲染期间不被调用

deactivated被keep-alive缓存的组件失活时调用，该钩子在服务器端渲染期间不被调用

renderTriggered当虚拟DOM重新渲染被触发时调用，此事件告诉你是什么操作触发了重新渲染，以及该操作的目标对象和键。

5.指令

v-memo新增 v-is弃用

在原生元素上使用vue组件
<table>
    <tr is="vue:my-row-component"></tr>
</table>

6.响应性API

6.1响应性基础 API

6.1.1 reactive

返回对象的响应式副本
const obj = reactive({count:0})
响应式转换是“深层”的——它影响所有嵌套property。
类型声明：
function reactive<T extends object>(target: T):UnwrapNestedRefs<T>

6.1.2 readonly

接受一个对象（响应式或纯对象）或ref并返回原始对象的只读代理

const original = reactive({count:0})
const copy = readonly(original)

watchEffect(()=>{
    console.log(copy.count) // 用于响应性追踪
})

original.count++ //变更riginal 会出发依赖于副本的监听器
copy.count++ // 变更副本将失败并导致警告

6.1.3 isProxy 检查对象是否由reactive或readonly创建的proxy
6.1.4 isReactive 检查对象是否由reactive创建的响应式代理
6.1.5 isReadyonly 检查对象是否由readonly创建的只读代理
6.1.6 toRow 返回reactive或readonly代理的原始对象
6.1.7 markRaw 标记一个对象，使其永远不会转换为proxy。返回对象本身

6.2 Refs

6.2.1 ref接受一个内部值并返回一个响应式且可变的ref对象。ref对象具有指定内部值的单个property(.value)

示例：
const count=ref(0)
console.log(count.value)  // 0

count.value++
console.log(count.value)  // 1
如果将对象分配为ref值，则通过reactive函数使该对象具有高度的响应式。

类型声明：
interface Ref<T> {
    value: T
}

fuction ref<T>(value:T):Ref<T>

ref内部值指定复杂类型，示例：
const foo = ref<string | number>("foo")
foo.value = '123'

6.2.2 unref 如果参数试一个ref则返回内部值，否则返回参数本身

function useFoo(x:number | Ref<number>){
    const unwrapped = unref(x)
}

6.2.3 toRef 可以用来为源响应对象上的某个property新创建一个ref。然后，ref可以被传递

const state = reactive({
    foo : 1,
    bar : 2
})
const fooRef = toRef(state, 'foo')

fooRef.value++

7. 单文件组件

语言块

<tempalte>最多一个
<script>最多一个
<script setup>每个.vue文件最多包含一个，该脚本会被预处理并作为组件的setup()函数使用，即它会在每个组件实例中执行。
<style>可多个

Vue Router 4大部分API无变化

1.router定义及引用

/**
 1.写法变化：new Router 变成 createRouter，以前是 import Router from 'vue-router'
 2.history配置取代mode
*/
import { createRouter, createWebHistory } from 'vue-router'
export const constantRoutes = [
    {
        path: '/login',
        component: () => import('@/views/login/index.vue'),
        meta: {
          title: '登录'
        },
        hidden: true
      }
];
const router = createRouter({
  history: createWebHistory(),
  routes: constantRoutes
})

export default router;

app.use(router).use(store).mount('#app')

本地搭建vue3 + ts + vite项目(二 vue3.x API + Vue Router4笔记)