Vue3那些实用但是你不知道的知识~

Vue3之setup组合api

01 setup组合api的特点：

1.  更加直观，接近原生js
2.  按需加载
3. 没有this，降低了耦合性，提高复用性 

02 setup（）方法

相当于created生命周期，需要 return 返回，在模板中使用。

setup编写的代码更加直观，接近原生js

03 ref 值类型 响应式数据

在setup访问count值，count.value 来访问

const count = ref(5)

可以作为dom引用

const inp  = ref(null)
<p ref="inp">
inp.value.innerText

04 reactive 引用类型 响应式

// 定义个引用类型响应式数据 默认值是[...]
const list = reactive(["Vue", "React", "Angular"])

错误做法： list = xxx  直接赋值破坏了引用
正确做法： list.push(xxx)

05 watch监听数据

watch("count",(nval,oval)=>{
   //执行回调函数
})

06 watchEffect 监听效果

只要回调引用的数据变化都会执行watchEffect回调函数

// 只有list发生变化，或者count发生变化 存储localStorege
const stop = watchEffect(()=>{
   localStorage.setItem("count",count.value)

})

stop 用来停止监听，执行stop()方法

07 computed 计算

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

//从现有的count值x2 返回
computed(“count2”,()=>count.value*2)

// 获取值得返回count的值
computed(“age”,{
   get(){ return count.value},
   set(v){count.value = v}
})

08 生命周期

setup组合api的生命周期中没有created，默认setup中相当于created，需要在原有生命周期添加on

onBeforeMount 挂载前

onMounted 挂载完毕

onBeforeUpdate 更新前

onUpdated 更新完毕

onUnMount 卸载前

onUnMounted 卸载完毕

09 全局配置

app.config.globalProperties.xxx = yyy

10 getCurrentInstance获取当前实例

非必要不推荐使用(this)

const app  =getCurrentInstace().appContext

const xxx = app.config.globalPropertites.xxx
 //获取到全局的而方法

11 setup使用vuex

import {useStore} from ‘vuex’
const store = useStore()

store.commit("user/addScore" ,v)

12 setup 使用路由

import {useRouter,useRoute} from 'vue-router'

const router = useRouter();
const route = useRoute()
//等同于this.$router 和this.$route

13 setup(props,context)参数

props 传入参数 （响应式）

context参数包含：attrs 属性，emit 事件发送器（同$emit），slots 插槽 同$slots，expose 暴露数据