1. vue實例化方法改變

vue2通過new Vue()，手動生成。vue3通過createApp實例化

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

2、 全局API改變

vue2中全局API掛在Vue上，vue3掛在vue實例上 app；

比如定義全局組件：

// vue2 import Vue from 'vue'； Vue.component('loading', {}) // vue3 import { createApp } from 'vue' let app = createApp(App); app.component('loading', {})

vue官網：

3. 取消filter

在 3.x 中，過濾器已移除，且不再支持。取而代之的是，我們建議用方法調用或計算屬性來替換它們。

4. v-model改變

// vue2 v-model = :value + @input // vue3 // html組件 v-model = :value + @input// 自定義組件 v-model = :modelValue + @update:modelValue<ChildComponent v-model="pageTitle" />// ChildComponent.vue export default {props: {modelValue: String // 以前是`value：String`},emits: ['update:modelValue'],methods: {changePageTitle(title) {this.$emit('update:modelValue', title) // 以前是 `this.$emit('input', title)`}} }

5. 函數組件寫法改變 - h

在 2.x 中，render 函數會自動接收 h 函數

// vue2 Vue.component('loading', {render(h) {return h('div', {title: 'ass'}, ['這是內容'])}, })

在 3.x 中，h 函數現在是全局導入的，而不是作為參數自動傳遞。

// vue3 import { h } from 'vue' app.component('loading', {render(props, context) {return h('div', {title: 'ass'}, ['這是內容'])}, })

6. data統一寫法

在 2.x 中，開發者可以通過 object 或者是 function 定義 data 選項。
在 3.x 中，data 選項已標準化為只接受返回 object 的 function。

7. 異步組件寫法改變

// vue2 const asyncModal = () => import('./Modal.vue') // vue3 import { defineAsyncComponent } from 'vue' const asyncModal = defineAsyncComponent(() => import('./Modal.vue'))

8. 事件簡化

$on，$off 和 $once 實例方法已被移除，組件實例不再實現事件觸發接口。
$emit 仍然包含于現有的 API 中，因為它用于觸發由父組件聲明式添加的事件處理函數

9. 自定義指令

---

vue3新增

1. composition API

出現的原因：

幫助更好的重用組件的特征。
vue2中將數據、方法、computed、watch等注入都一個組件中；組件中代碼特別多、特別亂，重用比較麻煩。

composition組合式把（數據、方法、computed、生命周期函數…）注入組件一個地方-setup，方便重用。

執行時機：

setup是在組件創建的過程中執行。返回值會被注冊到組件當中。
執行時機在beforeCreate與created之間執行。

beforeCreate，
setup
created

setup中this為undefined，所以不能在setup中使用組件的其他東西（data/computed/methods…）,不要在setup使用this。
setup執行過程中，組件中其他東西都沒被創建。

• 在 setup 中你應該避免使用 this，因為它不會找到組件實例。setup 的調用發生在 data property、computed property 或 methods 被解析之前，所以它們無法在 setup 中被獲取。
• setup必須是同步的（不能有aynsc）。

export default {setup() {const a = 12;const fn = () => {console.log(a);}return {a, // 數據放入datafn // 方法放入methods}} }

最后會把解析為：

export default {data() {return {a: 12}},methods: {fn() {console.log(this.a);}} }

可響應數據

普通變量無法完成響應式（檢測到數據變化，重新渲染組件）。
普通變量在setup時會出現數據更新，視圖未更新。

<template><div>a = {{a}}</div><button @click="add">+</button> </template><script> export default {setup() {let a = 12const add = () => {a++console.log('a:', a)}return {a,add}} } </script>

結果如下圖：

解決響應式

reactive

reactive({}|[])

• 必須是對象或數組
• 如果是其他對象（Date、RegExp…），不能直接修改已有的數據，可以創建一個新的對象

<template><div>a = {{a.count}}</div><button @click="add">+</button> </template><script> import { reactive } from 'vue' export default {setup() {const a = reactive({ count: 12 }) console.log(a); // Proxy {count: 12}const add = () => {a.count++console.log('a:', a.count)}return {a,add}} } </script>

ref

可以直接封裝基本類型數據
本質：reactive({value: xxx});
template里面使用ref不需要加.value,在js里需要

<template><div>a = {{a}}</div><button @click="add">+</button> </template><script> import { ref } from 'vue' export default {setup() {const a = ref(12)console.log(a); // {"_shallow":false,"__v_isRef":true,"_rawValue":12,"_value":12}const add = () => {a.value++console.log('a:', a.value)}return {a,add}} } </script> 與50位技術專家面對面20年技術見證，附贈技術全景圖

總結

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

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