一、特点
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节点 |