vue3和vue2的語法有什麼區別

vue3和vue2的語法區別：1、vue2使用的是webpack形式去構建專案，而vue3使用vite構建專案；2、vue2中可以使用pototype的形式去進行操作，引入的是建構函式，而vue3中需要使用結構的形式進行操作，引入的是工廠函數。

本教學操作環境：windows10系統、Vue3版、Dell G3電腦。

vue3和vue2的語法有什麼區別

1.webpack和vite

vue2使用的是webpack形式去構建專案

webpack是一開始是入口檔案，然後分析路由，然後模組，最後進行打包，然後告訴你，伺服器準備好了可以開始幹了

vue3使用vite構建專案

先告訴你伺服器準備完成，然後等你傳送HTTP請求，然後是入口檔案，Dynamic import（動態匯入）code split point（程式碼分割）

最大的好處和區別就是為了讓專案中一些程式碼檔案多了以後去儲存更新資料時更快能夠看到實際效果，也就是所謂的（熱更新）

2.main.js檔案

vue2中我們可以使用pototype(原型)的形式去進行操作，引入的是建構函式

vue3中需要使用結構的形式進行操作，引入的是工廠函數

vue3中app元件中可以沒有根標籤

3.setup函數

setup函數必須要return 返回出去

<script>
 export default {
  name: 'appName',
  setup(){
  //變數
   let name = '打工仔'
   let age = 18
   //方法
   function say(){
    console.log(`我只是一個${name},今年${age}歲`)
   }
   //返回一個物件
   return {
    name,
    age,
    say
   }
  }
 }
</script>

你會發現當前的${name}中name不需要使用this去進行操作，this的作用只不過是取到某個作用域中變數而已，而setup函數提供了當前只在這個作用域中

這時候就很不爽了，那豈不是每次我定義的變數和方法都需要return,vue3中給我們提供了

在script標籤上新增setup 如：<script setup></script>,相當在編譯執行時放到了setup中

注：setup比beforeCreate、created生命週期更早，也就是說在當前直接用this去獲取data中的資料打出來的還是undefined

setup語法中課接收2個引數setup(props,context)

都知vue2中this.$attrs,this.$slots,this.$emit等同context中attrs，slots，emit

注：當我們只接受一個引數時，頁面會提示警告，但是不影響使用

4.指令與插槽

vue2中使用slot可以直接使用slot,而vue3中必須使用v-slot的形式

v-for與v-if在vue2中優先順序高的是v-for指令，而且不建議一起使用

vue3中v-for與v-if,只會把當前v-if當做v-for中的一個判斷語句，不會相互衝突

vue3中移除keyCode作為v-on的修飾符，當然也不支援config.keyCodes

vue3中移除v-on.native修飾符

vue3中移除過濾器filter

5.ref與reactive

ref

把資料變為響應式資料，ref把它們變成了物件，如果我們直接去操作程式碼是修改不了的，你會發現當前name和age還是通過get和set修改頁面，這時你需要使用.value，並且ref還是Refimpl

<template>
  <div class="home">
    <h1>姓名：{{name}}</h1>
    <h1>年齡：{{age}}</h1>
    <button @click="say">修改</button>
  </div>
</template>
<script>
import {ref} from 'vue'
export default {
  name: 'Home',
  setup(){
    let name = ref('中介')
    let age = ref(18)
    console.log(name)
    console.log(age)
    //方法
    function say(){
      name='波妞'
      age=18
    }
    return {
      name,
      age,
      say
    }
  }
}
</script>

這樣的話那我們在頁面上不是得{{name.value}}來做顯示，實際不用這樣的，在我們vue3中會檢測到你的ref是物件，自動會給你加上.value，如果我們自己定義的ref物件，範例會變為refimpl,這個時候用XX.value.XX進行修改

<template>
  <div class="home">
    <h1>姓名：{{name}}</h1>
    <h1>年齡：{{age}}</h1>
    <h2>職業：{{job.occupation}}</h2>
    <h2>薪資：{{job.salary}}</h2>
    <button @click="say">修改</button>
  </div>
</template>
<script>
import {ref} from 'vue'
export default {
  name: 'Home',
  setup(){
    let name = ref('中介')
    let age = ref(18)
    let job=ref({
      occupation:'程式設計師',
      salary:'10k'
    })
    console.log(name)
    console.log(age)
    //方法
    function say(){
      job.value.salary='12k'
    }
    return {
      name,
      age,
      job,
      say
    }
  }
}
</script>

這時我們列印obj.value，他已經不再是refimpl物件，變成了proxy物件，因為vue3底層是proxy物件，基本資料型別都是按Object.defineProperty裡面get和set進行資料劫持，vue3已經把reactive封裝進去了，相當於我們在呼叫ref時，會自動呼叫reactive

reactive

上面我們說ref裡面的物件會呼叫reactive，把Object轉換為Proxy，現在我們直接通過reactive變成Proxy，它進行了一個深層次的響應式

<template>
  <div class="home">
    <h1>姓名：{{name}}</h1>
    <h1>年齡：{{age}}</h1>
    <h2>職業：{{job.occupation}}<br>薪資：{{job.salary}}</h2>
    <h3>愛好：{{hobby[0]}},{{hobby[1]}},{{ hobby[2] }}</h3>
    <button @click="say">修改</button>
  </div>
</template>
<script>
import {ref,reactive} from 'vue'
export default {
  name: 'Home',
  setup(){
    let name = ref('波妞')
    let age = ref(18)
    let job=reactive({
      occupation:'程式設計師',
      salary:'10k'
    })
    let hobby=reactive(['吃飯','睡覺','打豆豆'])
    console.log(name)
    console.log(age)
    //方法
    function say(){
      job.salary='12k'
      hobby[0]='學習'
    }
    return {
      name,
      age,
      job,
      say,
      hobby
    }
  }
}
</script>

這時你肯定會覺得方法太多了，還不如使用ref提供的.value,是不是感覺爽爽爽，但是有一個問題，如果有一堆資料那不是要一直去.value，點到冒煙，這個時候你可以用模擬vue2中data的形式，就會感覺更香

<template>
  <div class="home">
    <h1>姓名：{{data.name}}</h1>
    <h1>年齡：{{data.age}}</h1>
    <h2>職業：{{data.job.occupation}}<br>薪資：{{data.job.salary}}</h2>
    <h3>愛好：{{data.hobby[0]}},{{data.hobby[1]}},{{ data.hobby[2] }}</h3>
    <button @click="say">修改</button>
  </div>
</template>
<script>
import {reactive} from 'vue'
export default {
  name: 'Home',
  setup(){
    let data=reactive({
      name:'波妞',
      age:18,
      job:{
        occupation:'程式設計師',
        salary:'10k'
      },
      hobby:['吃飯','睡覺','打豆豆']
    })
    //方法
    function say(){
      data.job.salary='12k'
      data.hobby[0]='學習'
    }
    return {
      data,
      say,
    }
  }
}
</script>

ref與reactive區別

ref定義的是基本資料型別

ref通過Object.defineProperty()的get和set實現資料劫持

ref運算元據.value，讀取時不需要。value

reactive定義物件或陣列資料型別

reactive通過Proxy實現資料劫持

reactive操作和讀取資料不需要.value

6.vue3的響應式原理

vue2的響應式原理用Object.defineProperty的get和set進行資料劫持，從而實現響應式

vue2中只有get和set方法去進行屬性的讀取和修改操作，當我們進行新增，刪除時，頁面不會實時更新

直接通過下標改陣列，頁面也不會實時更新

vue3中響應式原理使用Proxy進行代理，使用window內建物件Reflect反射，學了Es6的語法的就知道我們在使用Proxy進行代理，好比甲方公司給出需要什麼技術的前端攻城獅，讓乙方去幹招聘、面試等環節

Proxy可以攔截物件中任意的屬性變化，當然包括讀寫，新增，刪除等

Reflect對源物件屬性進行操作

const p=new Proxy(data, {
// 讀取屬性時呼叫
get (target, propName) {
return Reflect.get(target, propName)
},
//修改屬性或新增屬性時呼叫
set (target, propName, value) {
return Reflect.set(target, propName, value)
},
//刪除屬性時呼叫
deleteProperty (target, propName) {
return Reflect.deleteProperty(target, propName)
}
})

【相關推薦：《》】

以上就是vue3和vue2的語法有什麼區別的詳細內容，更多請關注TW511.COM其它相關文章！