Vue3带来的惊喜
程序员文章站
2022-04-09 17:01:41
在Vue3.0发布一个以来，通过学习和工作闲余下写了这篇文章，希望可以帮到大家一起更好学习前端！在本次vue3.0的升级后，创作项目新增vite功能，体验vite更快更神速，告别龟速启动项目的鸡肋等待。（以下运行代码）$ npm init vite-app$ cd$ npm install$ npm run devVue3+Typescript新Vue的重大升级，TS划重点了，期末会考！Vuecli升级至4.5npm i -g @vue/cli@next......
在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');
复制代码date统一了
data(){
return{};
}
复制代码vue取消Filters，想使用可以用插件
移除$on,$off,$once
源码地址：
https://github.com/Acc-cxy/newvue.git
本文地址：https://blog.csdn.net/Acc13959255444/article/details/109243275