1.vue3基本結構

vue3可以導入本地版本或者在線版本

1.1 vue3創建根組件

vue2中的vue是一個構造函數，創建根組件用new關鍵字創建

const vm = new Vue({})

vue3中vue是一個對象，創建根組件如下：

const app = Vue.createApp({})

1.2 vue3引入根標簽

app.mount(“#myApp”)

vue3使用mount()函數渲染組件模板，作用相當于vue2的el屬性

1.3 setup函數

vue3中新增了一個setup函數，相當于生命周期函數，他會在beforeCreate之前被調用，所以setup中不能使用this

setup(props) {console.log("setup", this) // window},

vue3廢除了filters過濾器，不再支持此語法

2，vue3生命周期

2.1 創建vue3代碼片段

vscode打開，文件–首選項–用戶片段—新建全局代碼片段–MyVue3，創建之后在文件中復制以下代碼即可：

{"vue3": {"scope": "html","prefix": "myVue3","body": ["<script src='https://unpkg.com/vue@next'></script>","<div id='myApp'>","\t","</div>","<script>","\tvar vm = {","\t\tsetup() {","\t\t\t","\t\t}","\t}","\tVue.createApp(vm).mount('#myApp')","</script>",],"description": "這是我的vue3結構的代碼片段"} }

2.2 vue3生命周期

vue2中的生命周期寫法，vue3可兼容。vue3中把生命周期全部放在setup函數中實現

• vue3中創建過程的兩個鉤子已經被廢除，銷毀前和銷毀后鉤子被改成onbeforeUnmount、onUnmounted
• vue3中調用生命周期鉤子用到組合式API(Hook inside)
• vue3鉤子之間不能用逗號，否則會報錯

調用生命周期鉤子如下：

setup(a,b,c) {Vue.onBeforeMount(() => {console.log("beforeMount")});Vue.onMounted(() =>{console.log("mounted")})Vue.onBeforeUpdate(() => {console.log("beforeUpdate")})Vue.onUpdated(() => {console.log("updated")})Vue.onBeforeUnmount(() => {console.log("beforeUnmount")})Vue.onUnmounted(() => {console.log("unmounted")})}

2.3 vue3定義動態數據

vue2中使用data定義數據,定義后用this調用并修改, 但是setup中不能用this, 所以vue3中的動態數據不要在data中定義了,在setup中定義

Vue.ref定義動態數據，setup中所有的變量或函數都需要在return中返回才能在模板中調用

const age = Vue.ref(0)

• 通過Vue.ref定義的數據，會被放入對象的value字段中
• 使用對象調用value字段才是動態數據
• vue3響應式數據在setup中使用Vue.ref()定義, 會包裹一層對象, 在js中使用時,調用value屬性, 模板中不需要調value

2.4 vue3定義函數

const add = ()=>{ }

總結

以上是生活随笔為你收集整理的vue3的语法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。