Vue3基础

特点

vue3基本兼容vue2

全局挂载方法

APP启动

> var app = createApp(App);

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

全局方法

app.config.globalProperties.$http=function()=>{}

compositionApi

1. 语义明确
2. 书写简洁
3. 阅读直观，
4. 不需要通过vue在编译 服用，低耦合性更强（没有this）
5. 和react hooks 异曲同工
6. vue按需加载

import {ref.reactive} from "vue"

setup

1. 在beforecreated之前调用
2. 里面的this不是当前的实例

响应式数据

• ref

const num = ref(0)
 
return {num}
 
使用：<tag>{{num}}</tag>

• reactive

引用类型的数据
 
const list = reactive([xxx,yyy])
 
const obj = reactive({name:"nunu",age:"18"})
 

computed计算

const rmsg = computed(()=>num.value.split("").reverse().join(""))

const counter = computed({
set:v=>num.value+=1;
get:()=>num.value
})

watchEffect监听

const stop = watchEffect(()=>{
console.log(num.value)
localstorage.setltem("num",num.value,toString())
})

watch监听单个对象

watch(num,(num,preNum)=>{})
watch(()=>list[0],(value,preValue)=>{})