vue3-升级哪些功能

vue3升级哪些功能

• createApp
• emits属性
• 生命周期
• 多事件
• Fragment
• 移除.sync
• 异步组件的写法
• 移除filter
• Teleport
• Suspense
• Composition API

createApp

---

// vue 2.x
const app = new Vue({...})
Vue.use(...)
Vue.mixin(...)
Vue.component(...)
Vue.direactive(...)

// vue3.x
const app = Vue.createApp({...})
app.use(...)
app.mixin(...)
app.component(...)
app.direactive(...)

emits属性

---

Parent

<template>
    <div>
        <Children  @onSayHello="sayHello" />
    </div>
</template>
 
<script  lang="ts">
import Children from './Children.vue';
export default {
    name:'Parent',
    components:{
        Children
    },
    methods:{
        sayHello(val:string){
            console.log('sayHello', val);
        }
    }
}
</script>
<style>
</style>

Children

<template>
</template>
<script lang="ts">
export default {
    name: 'Children',
    props: {
        msg: String
    },
    emits: ['onSayHello'],
    setup(props:any, { emit }) {
        emit('onSayHello', '触发了msg更新')
    },
   
}
</script>
<style>
</style>

多事件 -- 事件加()

<script setup lang="ts">
const handleClick1 = () => {
  console.log('事件handleClick1 执行');
}
const handleClick2 = () => {
  console.log('事件handleClick2 执行');
}
</script>
<template>
  <button @click="handleClick1($event), handleClick2($event)">按钮</button>
</template>

<style scoped>

</style>

Fragment

// vue2.x  单一节点
<template>
  <div>
      <span></span>
      <p></p>
      <div></div>
  </div>
</template>

// vue3.x 多个节点
<template>
  <div></div>
  <span></span>
  <p></p>
  <div></div>
</template>

移除.sync

父组件传属性给子组件，子组件修改这个属性，修改的时候能同步到父组件

// vue2.x  
this.$emit('update:title', newValue)
<ChildComponent :title="pageTitle" @update:title="pageTitle = $event" />
// 简化
<ChildComponent :title.sync="pageTitle" />

<!-- vue3.x  父组件 -->
<template>
    <div>
        {{ name }} -- {{ age }}
        <Children v-model:name="name" v-model:age="age" />
    </div>
</template>
 
<script  lang="ts">
import Children from './Children.vue';
import { reactive, toRefs } from 'vue';
export default {
    name: 'Parent',
    components: {
        Children
    },
    setup() {
        const state = reactive({
            name: 'zhangsan',
            age: 20
        })
        return toRefs(state)
    }
}
</script>
<style>
</style>

<!--  vue3.x 子组件 -->
<template>
    <div>
        <button @click="handleClickName">更新name</button>
        <button @click="handleClickAge">更新age</button>
    </div>
</template>
<script lang="ts">
export default {
    name: 'Children',
    props: {
        name: String,
        age: Number
    },
    setup(props:any,context:any) {
        const handleClickName = () => {
            context.emit('update:name', 'ddd')
        }
        const handleClickAge = () => {
            context.emit('update:age', 30)
        }
        return {
            handleClickName,
            handleClickAge
        }
    },
}
</script>
<style>
</style>

异步组件的写法

// vue2.x  


// vue3.x 

移除filter

<!-- 在花括号中 -->
{{ price | filterPrice }}


<!-- 在v-bind中 -->

<div :data=" price | filterPrice "></div>

Teleport

<script setup lang="ts">
import { ref } from 'vue';
let isShow = ref<boolean>(false)
</script>

<template>
  <button @click="isShow = true">弹出</button>
  <teleport to="body">
      <div v-if="isShow" class="box">
          <div>
             <p>这是teleport 弹框</p>
             <button @click="isShow = false">关闭</button>

          </div>
      </div>
  </teleport>
</template>

<style scoped>
.box{
  position: fixed;
  width: 200px;
  height: 200px;
  margin: auto;
  background-color: #f1f1f1;
  padding: 20px;
}
</style>

Suspense

<script setup lang="ts">
</script>

<template>
  <Suspense>
    <template #default>
       <!-- 异步请求组件 -->
    </template>
    <template #fallback>
      Loading...
    </template>
  </Suspense>
</template>

<style scoped>

</style>