vue3 组合api写法
vue3写法
变量声明改变，不用在创建data函数，使用reactive声明，比如：
<template>
<div>{{state.name}}//这里直接使用</template><script>const state=reactive({name:'malunan'})//直接声明</script>emit接收方式一样，触发不一样例如
<script>import {defineEmit} from 'vue'//获取emit方法const emit=defineEmit(["myemit"])//定义事件emit('myemit')//触发emit</script>没有this，通过useContext()获取上下文
import {useContext} from 'vue'const ctx=useContext()//这里ctx就相当于vue2 的this定义输出 父组件通过ref访问
上下文中，有个方法叫expose({})接收一个对象
//子组件<script>import {useContext} from 'vue'const ctx=useContext()//这里ctx就相当于vue2 的thisctx.expose({
setMetod(){//定义事件
console.log(myMetod )}})</script>//父组件<template>
<div>
<el-button @click="cont">dj</el-button>
<Com ref="hw"></Com>//注册ref
</div></template><script setup>import Com from 'com/com.vue'import {useContext,ref} from 'vue'const hw=ref(null)//要和上面对应const ctx=useContext()const cont=()=>{
hw.value.setMetod()//调用方法}</script>ref定义变量
ref(10)==>本质 reactive(value:10)
用ref函数创建的数组不能用watch去监听 主要用来声明普通变量
import {ref} from 'vue'setup(){
let cou=ref(0)//定义了一个初始值为0 的变量cou }return {cou} //在组合api中 想要使用变量 必须要把变量/方法暴漏出去//通过 cou.value 改变值 原因:本质是reactive({value:0})reactive定义对象数组
import {reactive} from 'vue'setup(){
let cou=reactive({name:'malunan'})//定义了一个初始值为0 的变量cou }return {cou} //在组合api中 想要使用变量 必须要把变量/方法暴漏出去判断是否是ref或者是reactive类型
ref和 reactive 底层是通过 _v_ref来判断的
isRef和isReactive
通过 import {isRef,isReactive} vue 引入
isRef(变量) isRef(isReactive)
非递归监听变量创建 shallowRef 和 shallowReactive 创建 （场景：数据量比较大的时候使用）
如果是shallowRef创建的数据。那么vue 监听的是.value的变化，并不是第一层的变化
triggerRef(变量)
shallowRef数值变化 主动更新页面
vue没有提供trigerReactive方法
twRaw 获取到原始数据
import {reactive,toRaw} from 'vue'setup(){
let obj={name:'lnj',age:'18'}
let state=reactive(obj)//其实这里是被包装后的，虽然指向同一个地址，但vue监听的不一样
let obj2=toRaw(state)
obj===obj2//true
obj===state//false
//直接改变obj内的变量 不会触发视图更新
//ref创建获取原始数据
let state=ref(obj)
let obj2 =toRaw(state.value)}如果利用ref将某一个对象中的属性变化成响应式数据。
我们修改的响应式数据，是不会影响到原始数据的
let obj={name:'js'}let state=ref(obj.name)state.value='zs' //改后 obj的数据不会发生变化可以使用toRef变成响应式
toRef
let obj={name:'js'}let state=toRef(obj,'name') //这样声明，obj的数据是会发生变化，但视图不会变化state.value='zs'ref->复制
toRef->引用
toRefs
多个声明 相当于toRef简写
let obj={name:'js'}let state=toRefs(obj) //这样声明，obj的数据是会发生变化，但视图不会变化state.value='zs'makRow 禁止追踪
使用makRow()的数据，修改后的数据不会被追踪,修改视图后不会更新
customRef 创建自定义ref
接收两个参数 track用来追踪 trigger用来触发响应，更新界面
customRef((track,trigger)=>{
return {
get(){
track();//用来追踪
},
set(newValue){
//
trigger();//trigger用来触发响应，更新界面
}
}})readonly创建只读数据 shallowReadonly创建一层只读数据
let state=readonly({name:'ma'}) //创建一个只读数据let state=readonly({name:'ma'，age:{num:18}}) //创建一个只读数据,name是只读，num不受影响isReadonly 判断是否是只读数据
isReadonly(state)//返回true或false
Vue.prototype 替换为 config.globalProperties
在 Vue 2 中， Vue.prototype 通常用于添加所有组件都能访问的 property。
在 Vue 3 等同于config.globalProperties。这些 property 将被复制到应用中作为实例化组件的一部分。
// 之前 - Vue 2Vue.prototype.$http = () => {}// 之后 - Vue 3const app = createApp({})app.config.globalProperties.$http = () => {}nextTick 在vue3中使用
import { nextTick } from 'vue'nextTick(() => {
// 一些和DOM有关的东西})注册组件
// 3.ximport { h, resolveComponent } from 'vue'export default {
setup() {
const ButtonCounter = resolveComponent('button-counter')
return () => h(ButtonCounter)
}}支持绑定多个v-model
例如：
<ChildComponent v-model:title="pageTitle" v-model:content="pageContent" />
这也可以作为 .sync 修饰符的替代
.sync作用 子组件更新父组件值 this.$emit('update:title', pageTitle) 不用在父组件声明事件
vuex使用
import {useStore} from 'vuex'const store=useStore()//在使用的地方直接使用 相当于 vue2的this.storestore.state.collapse;store.commit("hadndleCollapse", !collapse);computed 计算属性使用
import {computed} from 'vue'setup(){
let username=computed(()=>{
let myname = localStorage.getItem("ms_username");
return myname ? myname : name.value;
})}相当于vue2
computed:{
username(){
let myname = localStorage.getItem("ms_username");
return myname ? myname : name.value;
}}router 使用
import {useRouter} from 'vue-router'let router=useRouter()//router 就相当于this.routerwatch监听
import {watch} from 'vue'watch(
()=>state.count,//要监听的值
(new,old)=>{
console.log(new)
console.log(old)
})多个监听
watch(
()=>[state.count,state.title],//要监听的值
([newcount,oldcount],[newtitle,oldtitle])=>{
})onBeforeRouteUpdate 监听路由 watch监听路由已被废弃
onBeforeRouteUpdate((to,from)=>{
console.log(to,from)
})
作者：写代码不如去遛狗
链接：https://www.jianshu.com/p/838645305291