Vue 3.2 新特性

目录

一、模板语法

二、data数据定义以及函数的声明

三、computed、watch、watchEffect

 四、组件注册、父传子、子传父

 五、v-model

 六、slots、attrs (不常用)

七、style标签class中使用变量

八、对await的支持 

一、模板语法

<template>
  // 在Vue2中template标签中只能有一个根元素，在Vue3中没有这样限制 
</template>

<script setup> // 这里的setup是加在了script标签里 

</script>

<style scoped>
  // 支持CSS变量使用 v-bind(变量)
</style>

二、data数据定义以及函数的声明

<template>
  <div class="home">
         
    <div @click="msgClick">
     {{msg}} 
    </div>

    <div @click="stateMsgClick">
     {{state.reactive}}
    </div>
    
  </div>
</template>

<script setup>
import { reactive, ref } from "vue";

const msg = ref("声明的基本msg"); //ref声明的基本类型响应式数据
//reactive 声明复杂类型响应式数据 
const state =reactive({ 
     stateMsg:"state的msg", 
})
//箭头函数的声明
const msgClick = ()=>{
     console.log(msg.value) // 结果：声明的基本msg
    /* 
    如果修改ref声明的数据时 可以用数据.value来进行赋值操作修改  
    例如： msg.value = "想要修改成的值" 即可
    */
}
// function 关键字声明的函数
function  stateMsgClick (){
     console.log(state.stateMsg) // 结果: state的msg 
    /* 
    如果修改reactive声明的数据时 可以直接进行赋值操作修改  
    例如： state.stateMsg = "想要修改成的值" 即可
    */
}

</script>

三、computed、watch、watchEffect

 computed:

<script setup>
import { reactive,computed} from "vue";
   
 const state = reactive({
    count: 1
  })

const computedCount = computed(()=>state.count) 
//会自动计算state的count值  切记computed的值不能更改


watchEffect(() => console.log(state.count))


 setTimeout(() => {
   state.count++
 }, 1000)

</script>

  watchEffect:

<script setup>
import { reactive,watchEffect } from "vue";
   
 const state = reactive({
    count: 1
  })


watchEffect(() => console.log(state.count))


 setTimeout(() => {
   state.count++
 }, 1000)

</script>

   Watch:

<script setup>
import { reactive,watch } from "vue";
   
 const state = reactive({
    count: 1
  })


  // 监听count
  watch(
    () => state.count,
    (newVal, oldVal) => {
      console.log(state.count)
      console.log(`watch监听变化前的数据：${oldVal}`)
      console.log(`watch监听变化后的数据：${newVal}`)
    },
    {
      immediate: true, // 立即执行
      deep: true // 深度监听
    }
  )

 setTimeout(() => {
   state.count++
 }, 1000)

</script>

 四、组件注册、父传子、子传父

  组件注册：

<template>
  <div class="parent">
    <child></child>  
  </div>
</template>

<script setup>
// 这是引入的组件 路径是我本地的路径  
// 直接在template模板中使用即可
import child from "@/components/child"; 

</script>

  父传子:

<!-- 父组件 -->
<template>
  <div class="parent">
    <child :msg="msg"></child>  
  </div>
</template>

<script setup>
import { ref } from "vue"
// 这是引入的组件 路径是我本地的路径  
// 直接在template模板中使用即可
import child from "@/components/child"; 

const msg=ref("这是父的msg")

</script>

<!-- 子组件 -->
<template>
  <div class="child">
        {{msg}} 
  </div>
</template>

<script setup>
import { defineProps } from "vue"
// 这样就可以直接在template中使用
const props = defineProps({
  msg: String,
});
 
    

</script>

  子传父: 

<!-- 子组件 -->
<template>
  <div class="child" @click="childCk">
          点击进行父传子
  </div>
</template>

<script setup>
import { defineEmits,defineExpose } from "vue"
 // 可以声明父组件使用子组件时挂载的函数
 const emits = defineEmits(["childEmitFn"]);
 
 const childExport = ref("这是当前抛出去的数据")

 const childMsg  = ref("组件通过emit调用函数来进行子传父 ")
 const childCk = () =>{
      emits("childEmitFn",childMsg.value);
 }

// 这是导出当前组件定义的数据或者是函数方法等等内容  可以通过ref来获取
defineExpose({
   // childExport:childExport 下面是简写 
   childExport 
})
  

</script>

<!-- 父组件 -->
<template>
  <div class="parent">
    <child @childEmitFn="childEmitFn"></child>  
  </div>
</template>

<script setup>
import { ref } from "vue"
// 这是引入的组件 路径是我本地的路径  
// 直接在template模板中使用即可
import child from "@/components/child"; 

const childEmitFn = (value)=>{
     console.log(value); //结果: 子组件通过emit调用函数来进行子传父 
}


</script>

 五、v-model

<!-- 父组件 -->
<template>
  <div class="parent">
    <child v-model:msg="msg" v-model="modelVal"></child>  
  </div>
</template>

<script setup>
import { ref } from "vue"
// 这是引入的组件 路径是我本地的路径  
// 直接在template模板中使用即可
import child from "@/components/child"; 

const msg= ref("这是父的msg")
const modelVal =ref("普通的v-model")

</script>

<!-- 子组件 -->
<template>
  <div class="child">
        {{msg}} 
  </div>
   <button @click="changeParentMsg">改变父的msg</button>
</template>

<script setup>
import { defineProps,defineEmits } from "vue"
// 这样就可以直接在template中使用
const props = defineProps({
  msg: String,
  modelValue: String, //如果是直接在组件上使用v-model 这个key就是对应的props键值
});

const emits = defineEmits(['update:msg','update:modelValue'])

const changeParentMsg = () =>{
      emits('update:msg','子组件把父组件msg更改了')
}
 

    

</script>

 六、slots、attrs (不常用)

<!-- 父组件 -->
<template>
  <div class="home">
    <child
      :msg="msg"
      :status="status"
    >
      <template #title="props">
        <div>{{ props }}标题</div>
      </template>
      
    </child>
  </div>
</template>

<script setup>
import { ref, toRefs } from "vue";
import child from "@/components/child";

const msg = ref("父的值");
const status = ref(200);

</script>

<!-- 子组件 -->
<template>
  <div class="" >
    {{ msg }}  
    <slot> </slot>
    <slot name="title" title="这是子传过来的东西"></slot>   
  </div>
</template>
<script setup>
import {
  defineProps,
  ref,
  useSlots,
  useAttrs,
} from "vue";

// props 现在props里就声明了msg这个参数 可以看到父组件还传了一个status属性这里没有声明
const props = defineProps({
  msg: String,
});
const attrs = useAttrs();  // 那么就可以用attrs来接收父组件传的属性未在props中声明的 
console.log(attrs); 
const slots = useSlots();  // 这个是可以查看该组件被调用时用了哪些插槽
console.log(slots);
console.log(slots.title());

</script>

七、style标签class中使用变量

<template>
  <span>class使用变量</span>  
</template>

<script setup>
  import { reactive } from 'vue'

  const styleState = reactive({
    color: 'blue'
  })
</script>
  
<style scoped>
  span {
    // v-bind使用styleState中的变量
    color: v-bind('styleState.color');
  }  
</style>

八、对await的支持 :  

<script setup> 
//无需再使用async 可以直接用 await 因为用了这个之后 组件的setup就会自动变成 async setup
  const GET = await axios('/api').then(() => {})
</script>