Vue3带来的惊喜

最新推荐文章于 2024-07-02 10:58:10 发布

林情感博主

最新推荐文章于 2024-07-02 10:58:10 发布

阅读量282

点赞数

分类专栏： Vue.js 文章标签： javascript vue.js typescript

本文链接：https://blog.csdn.net/Acc13959255444/article/details/109243275

版权

Vue.js 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

在Vue3.0发布一个以来，通过学习和工作闲余下写了这篇文章，希望可以帮到大家一起更好学习前端！

在本次vue3.0的升级后，创作项目新增vite功能，体验vite更快更神速，告别龟速启动项目的鸡肋等待。（以下运行代码）

$ npm init vite-app

$ cd

$ npm install

$ npm run dev

Vue3+Typescript

新Vue的重大升级，TS划重点了，期末会考！

Vuecli升级至4.5

npm i -g @vue/cli@next

在Vue3也重磅推出一些新特性的使用

Composition API

让计算逻辑更加流畅

<template>
 <div>
   <p>counter: {{counter}}</p>
   <p>doubleCounter: {{doubleCounter}}</p>
   <p ref="desc"></p>
 </div>
</template>

<script>
import {
 reactive,
 computed,
 watch,
 ref,
 toRefs,
 onMounted,
 onUnmounted,
} from "vue";

export default {
 setup() {
   const data = reactive({
     counter: 10,
     doubleCounter: computed(() => data.counter * 2),
  });

   let timer

   onMounted(() => {
     timer = setInterval(() => {
       data.counter--
    }, 1000);
  })

   onUnmounted(() => {
     clearInterval(timer)
  })

   const desc = ref(null)

   watch(()=>data.counter, (val,oldVal)=>{
     desc.value.textContent = `counter change from ${oldVal} to ${val}`
     if(val == 0){
       clearInterval(timer)
       alert('新年快乐')
     }
  })

   return {...toRefs(data), desc};
},
};
</script>

2.Teleport 传送门 ps:与根#app评级

<template>
  <button @click="modalOpen = true">
    点击弹出Teleport</button>

  <teleport to="body">
    <div v-if="modalOpen" class="modal">
      <div>
        这是一个模态窗口!
        我的父元素是"body"！
        <button @click="modalOpen = false">关闭</button>
      </div>
    </div>
  </teleport>
</template>
<script>
export default {
  data() {
    return {
      modalOpen: false
    }
  },
};
</script>
复制代码

3.Vue3组件可支持多个根

<template>
    <head></head>
    <connet></connet>
    <footer></footer>
</template>
复制代码

4.router升级至4.0

$ npm install vue-router@next
复制代码

实例当中Vue2.X与Vue.3的区别

// vue2.X
import Vue from 'vue'
import App from './App.vue'
new Vue({
  render: h => h(App),
}).$mount('#app')

//vue3
import {createApp} from 'vue';
import App from './App.vue'
createApp(App).mounte('#app');
复制代码