1.全局创建

app.use(createPinia()).mount()

2.全局方法

app.config.globalProperties

一个用于注册能够被应用内所有组件实例访问到的全局属性的对象。

app.config.globalProperties.$reverse = function(str){
       return str.split('').reverse().join('');
   }

3.setup

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

<script>
    // 导入ref响应数据
    import {ref} from 'vue'
    export default {
        setup(props,context){
            console.log(props,context)
            // 父组件传入的参数，context上下文 attrs属性，emit发送事件方法 expose导出 slots插槽
            // setup相当于created生命周期
            // 定义num默认值是 5
            const num = ref(5);
            // 定义更新num的方法
            const setNum =(v)=>{
                num.value=v;
            }
            // 返回num与setNum
            // 定义msg
            const msg = ref('你好msg')
            const setMsg = v=>msg.value=v;
            return {num,setNum,msg,setMsg}
        }
    }
    
</script>

响应式核心

ref 定义响应是值类型方法

reactive 引用类型

computed 从现有数据计算新的数据

4.ref

接受一个内部值，返回一个响应式的、可更改的 ref 对象，此对象只有一个指向其内部值的属性

// 导入ref响应数据
    import {ref} from 'vue'
 
// 定义num默认值是 5
    const num = ref(5);
    // 定义更新num的方法
    const setNum =(v)=>{
        num.value=v;
    }

5.reactive

返回一个对象的响应式代理。

import {reactive} from 'vue'
const list = reactive(['123','js','css'])

6.compouted 从现有数据中计算出新的数据

接受一个 getter 函数，返回一个只读的响应式 ref 对象。该 ref 通过 .value 暴露 getter 函数的返回值。它也可以接受一个带有 get 和 set 函数的对象来创建一个可写的 ref 对象。

import {computed} from 'vue'
 
const fee = computed({
    get(){  //获取fee的时候执行get
        if(n.value==1){return 7}
        else{
            var total = n.value*5+2;
            return total;
        }
    },
    set(v){//设置fee的时候执行 set方法
        n.value = Math.floor((v-2)/5)
    }
})

7.watch

侦听一个或多个响应式数据源，并在数据源变化时调用所给的回调函数。

<view>
    <view v-for="(item,index) in list" :key="item">
    {{item}}
        <button size="mini" @click="list.splice(index,1)">x</button>
    </view>
</view>
 
const list = reactive(['123','js','css'])
const stop = watch(list,(val,oldVal)=>{
        // uni.setStorageSync("list",list)
})

8.watchEffect

监听副作用（只要被这个方法引用的数据，发送变化都会触发）

watchEffect(()=>{
    uni.setStorageSync("list",list);
    uni.setStorageSync("n",n.value)
},{deep:true})

9.readonly

接受一个对象 (不论是响应式还是普通的) 或是一个 ref，返回一个原值的只读代理。

const original = reactive({ count: 0 })
 
const copy = readonly(original)
 
watchEffect(() => {
  // 用来做响应性追踪
  console.log(copy.count)
})
 
// 更改源属性会触发其依赖的侦听器
original.count++
 
// 更改该只读副本将会失败，并会得到一个警告
copy.count++ // warning!

10.生命周期

onBeforeMount()注册一个钩子，在组件被挂载之前被调用。

onMounted()注册一个回调函数，在组件挂载完成后执行。

onBeforeUpdate()注册一个钩子，在组件即将因为响应式状态变更而更新其 DOM 树之前调用。

onUpdated()注册一个回调函数，在组件因为响应式状态变更而更新其 DOM 树之后调用。

onBeforeUnmount()注册一个钩子，在组件实例被卸载之前调用。

onUnmounted()注册一个回调函数，在组件实例被卸载之后调用。

生命周期带on
可以简记为
挂载前后
更新前后
卸载前后
激活前后
setup中的生命周期，没有beforeCreate与created
setup的生命周期需要加on前缀
1、setup() : 开始创建组件之前，在 beforeCreate 和 created 之前执行，创建的是 data 和 method

2、onBeforeMount() : 组件挂载到节点上之前执行的函数；

3、onMounted() : 组件挂载完成后执行的函数；

4、onBeforeUpdate(): 组件更新之前执行的函数；

5、onUpdated(): 组件更新完成之后执行的函数；

6、onBeforeUnmount(): 组件卸载之前执行的函数；

7、onUnmounted(): 组件卸载完成后执行的函数；

8、onActivated(): 被包含在 中的组件，会多出两个生命周期钩子函数，被激活时执行；

9、onDeactivated(): 比如从 A 组件，切换到 B 组件，A 组件消失时执行；

10、onErrorCaptured(): 当捕获一个来自子孙组件的异常时激活钩子函数。

11.provide

提供一个值，可以被后代组件注入。

在父子组件传递数据时，通常使用的是 props 和 emit，父传子时，使用的是 props，如果是父组件传孙组件时，就需要先传给子组件，子组件再传给孙组件，如果多个子组件或多个孙组件使用时，就需要传很多次，会很麻烦。

像这种情况，可以使用== provide 和 inject== 解决这种问题，不论组件嵌套多深，父组件都可以为所有子组件或孙组件提供数据，父组件使用 provide 提供数据，子组件或孙组件 inject 注入数据。同时兄弟组件之间传值更方便。

<script setup>
import { ref, provide } from 'vue'
import { fooSymbol } from './injectionSymbols'
 
// 提供静态值
provide('foo', 'bar')
 
// 提供响应式的值
const count = ref(0)
provide('count', count)
 
// 提供时将 Symbol 作为 key
provide(fooSymbol, count)
</script>

inject()

<script setup>
import { inject } from 'vue'
import { fooSymbol } from './injectionSymbols'
 
// 注入值的默认方式
const foo = inject('foo')
 
// 注入响应式的值
const count = inject('count')
 
// 通过 Symbol 类型的 key 注入
const foo2 = inject(fooSymbol)
 
// 注入一个值，若为空则使用提供的默认值
const bar = inject('foo', 'default value')
 
// 注入一个值，若为空则使用提供的工厂函数
const baz = inject('foo', () => new Map())
 
// 注入时为了表明提供的默认值是个函数，需要传入第三个参数
const fn = inject('function', () => {}, false)
</script>

12.defineProps

< script setup> 中必须使用 defineProps 和 defineEmits API 来声明 props 和 emits ，它们具备完整的类型推断并且在 < script setup> 中是直接可用的：

定义props

const props = defineProps({
  foo: String
})

13.defineEmits()

发送事件：子组件向父组件事件传递

const emits = defineEmits(["update:modelValue","clear"])

14.defineExpose

defineExpose暴露一个方法让父组件可以通过ref调用

通过ref的方式调用子组件的clear方法

子组件必须暴露clear ，父组件才能调用

// 暴露一个clear方法让父组件可以通过ref调用
 defineExpose({
 clear
 })

15.v-model简写方式

:modelValue="msg"
@update:modelValue="msg=$event"

Vue3知识点总结