vue3.0基础知识

一、特点

vue3基本兼容vue2
语义明确
书写简洁
阅读直观，不需要通过Vue在编译
复用，低耦合性更强(没有this)
和react hooks异曲同工
vue3.0按需加载

import {ref,reactive} from 'vue'

二、全局挂载方法

1、app启动

var app = createApp(App);
app.use(store).use(touter).mount('#app')

2、全局方法

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

三、setup

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

四、响应式数据

1、ref

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

2、reactive

引用类型的数据

const list = reactive([xxx,yyy])

const obj = reactive({name:"mumu",age:18})

五、computed计算

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

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

六、监听

1、全部

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

2、单个对象

watch(num,(num,preNum)=>{

})

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

})

七、生命周期

befoteCreate
created
==
setup

onMount,onMounted,onUpdate,onUpdated,onUnmounted

和vue2生命周期是一样的，加一个on

八、setup(props,ctx)

props传递过来的属性

ctx|context上下文

ctx.attrs	属性
ctx.slots	插槽
ctx.parent	父组件
ctx.root	根组件
ctx.emit	发送事件
ctx.refs	dom节点