vue3的简单介绍

特点

1. vue3基本兼容vue2

---

全局挂载方法

app启动：     

1. var app=createApp(App);       

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

全局方法

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

---

compositionApi

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

vue3.0需要按需加载 import {ref,rezctive} from 'vue'

---

setup

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

---

 响应式数据

ref

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

reactive

引用类型的数据

1. const list =reactive{[xxx,yyy]}
2. const obj=reactive({name:"mumu",age:18})

---

computed计算

1. const rmsg=computed(()=>num.value.split('').reverse().join(''))
2. const counter=computed({set:v=>num.value+=1,get:()=>num.value})

---

watch监听

const stop=watchEffect()=>{console.log(num.value)

loacalstorage.setltem("num",num.value.toString())})

---

      watch:监听单个对象

                watch（num，（num，preNum）=>{

                }）

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

                }）

---

        生命周期：

                beforeCreate

                created  ==  setup

                onMount，onMounted，onUpdate，onUpdated，onDestroy，onDestroyed

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

        setup（props，ctx）：
                props传递过来的属性

                ctx|context 上下文：

                        ctx.attrs        属性                ctx.slots        插槽

                        ctx.parent        父组件                ctx.root        根组件

                        ctx.emit        发送事件                ctx.refs        dom节点

---

        组件传递：

                父传子        props

                子传父        emit发送事件

---

        全局配置：

                app。config。globalProperties

---