Vue3小结

Vue3的特点是基本兼容Vue2的代码

优点：

• 按需引入
• 组合式api；更加接近原生JS，更加直观
• setup没有this，更有效地降低了代码的耦合性

全局挂载方法

app启动

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

全局方法定义

app.config.globalProperties.$run = function(){}

compositionApi

• 语义明确，书写简洁
• 阅读直观，不需要通过Vue在编译
• 低耦合性更强，复用
• 和react hooks有异曲同工之妙

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

import {ref,reactive} from 'vue'
set(){
    const num = ref(3);
    const list = reactive(["vue","react","angular"])
    return {num,list}
}

响应式数据

ref：定义值类型数据

const num = ref(0)
return {num}

使用方式：<tag>{{num}}</tag>

reactive：定义引用类型的数据

const list = reactive([xxx,zzz])

const obj = reactive({name:"zhanglong",age:35})

computed计算

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

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

watch监听单个对象

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


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

watchEffect监听

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