特点
- vue3基本兼容vue2
全局挂载方法
app启动:
-
var app=createApp(App);
-
app.use(store).use(router).mount("#app")
全局方法
app.config.globalPRoperties.$http=()=>{}
compositionApi
- 语义明确
- 书写简洁
- 阅读直观不需要通过vue再翻译
- 复用 低耦合性更强(没有this)
- 和react hooks异曲同工
vue3.0需要按需加载 import {ref,rezctive} from 'vue'
setup
- 在beforecreate之前调用
- 里面的this不是当前的实例
响应式数据
ref
- const num =ref(0)
- return{num}
- 使用:<tag>{{num}}</tag>
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})
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