Vue3带来的惊喜

·  阅读 251

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

$ npm init vite-app
$ cd
$ npm install
$ npm run dev
复制代码

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');
复制代码

date统一了

data(){
    return{};
}
复制代码

vue取消Filters,想使用可以用插件

移除on,on,off,$once

源码地址:

github.com/Acc-cxy/new…

分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改