VUE3的认知

目录

• 特点
• 全局挂载方法
• compositionApi
• setup
• 响应式数据
• computed计算
• watchEffect监听
• watch监听单个对象
• 声明周期
• setup（props，ctx）
• 组件传递
• 跨层穿参
• setUp中的this
• 全局配置
• 自定义set返回一个函数
• about.vue
• child.vue

特点  

• vue3基本兼容vue2

全局挂载方法 

• APP启动

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

• 全局方法

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

compositionApi 

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

   import {ref.reactive} from "vue"

    

setup 

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

响应式数据 

• ref

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

• reactive

  引用类型的数据
  
  const list = reactive([xxx,yyy])
  
  const obj = reactive({name:"nunu",age:"18"})

   

computed计算 

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

 

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

watchEffect监听

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

watch监听单个对象

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

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