這篇文章主要介紹“vue3和vue2的語法有哪些區(qū)別”的相關(guān)知識(shí)，小編通過實(shí)際案例向大家展示操作過程，操作方法簡單快捷，實(shí)用性強(qiáng)，希望這篇“vue3和vue2的語法有哪些區(qū)別”文章能幫助大家解決問題。

公司主營業(yè)務(wù)：成都網(wǎng)站設(shè)計(jì)、成都網(wǎng)站建設(shè)、外貿(mào)網(wǎng)站建設(shè)、移動(dòng)網(wǎng)站開發(fā)等業(yè)務(wù)。幫助企業(yè)客戶真正實(shí)現(xiàn)互聯(lián)網(wǎng)宣傳，提高企業(yè)的競爭能力。成都創(chuàng)新互聯(lián)公司是一支青春激揚(yáng)、勤奮敬業(yè)、活力青春激揚(yáng)、勤奮敬業(yè)、活力澎湃、和諧高效的團(tuán)隊(duì)。公司秉承以“開放、自由、嚴(yán)謹(jǐn)、自律”為核心的企業(yè)文化，感謝他們對我們的高要求，感謝他們從不同領(lǐng)域給我們帶來的挑戰(zhàn)，讓我們激情的團(tuán)隊(duì)有機(jī)會(huì)用頭腦與智慧不斷的給客戶帶來驚喜。成都創(chuàng)新互聯(lián)公司推出靖州免費(fèi)做網(wǎng)站回饋大家。

vue3和vue2的語法區(qū)別：1、vue2使用的是webpack形式去構(gòu)建項(xiàng)目，而vue3使用vite構(gòu)建項(xiàng)目；2、vue2中可以使用pototype的形式去進(jìn)行操作，引入的是構(gòu)造函數(shù)，而vue3中需要使用結(jié)構(gòu)的形式進(jìn)行操作，引入的是工廠函數(shù)。

本教程操作環(huán)境：windows10系統(tǒng)、Vue3版、Dell G3電腦。

vue3和vue2的語法區(qū)別

1.webpack和vite

vue2使用的是webpack形式去構(gòu)建項(xiàng)目

webpack是一開始是入口文件，然后分析路由，然后模塊，最后進(jìn)行打包，然后告訴你，服務(wù)器準(zhǔn)備好了可以開始干了

vue3使用vite構(gòu)建項(xiàng)目

先告訴你服務(wù)器準(zhǔn)備完成，然后等你發(fā)送HTTP請求，然后是入口文件，Dynamic import（動(dòng)態(tài)導(dǎo)入）code split point（代碼分割）

最大的好處和區(qū)別就是為了讓項(xiàng)目中一些代碼文件多了以后去保存更新數(shù)據(jù)時(shí)更快能夠看到實(shí)際效果，也就是所謂的（熱更新）

2.main.js文件

vue2中我們可以使用pototype(原型)的形式去進(jìn)行操作，引入的是構(gòu)造函數(shù)

vue3中需要使用結(jié)構(gòu)的形式進(jìn)行操作，引入的是工廠函數(shù)

vue3中app組件中可以沒有根標(biāo)簽

3.setup函數(shù)

setup函數(shù)必須要return 返回出去

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

你會(huì)發(fā)現(xiàn)當(dāng)前的${name}中name不需要使用this去進(jìn)行操作，this的作用只不過是取到某個(gè)作用域中變量而已，而setup函數(shù)提供了當(dāng)前只在這個(gè)作用域中

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

在script標(biāo)簽上添加setup 如：<script setup></script>,相當(dāng)在編譯運(yùn)行時(shí)放到了setup中

注：setup比beforeCreate、created生命周期更早，也就是說在當(dāng)前直接用this去獲取data中的數(shù)據(jù)打出來的還是undefined

setup語法中課接收2個(gè)參數(shù)setup(props,context)

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

注：當(dāng)我們只接受一個(gè)參數(shù)時(shí)，頁面會(huì)提示警告，但是不影響使用

4.指令與插槽

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

v-for與v-if在vue2中優(yōu)先級(jí)高的是v-for指令，而且不建議一起使用

vue3中v-for與v-if,只會(huì)把當(dāng)前v-if當(dāng)做v-for中的一個(gè)判斷語句，不會(huì)相互沖突

vue3中移除keyCode作為v-on的修飾符，當(dāng)然也不支持config.keyCodes

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

vue3中移除過濾器filter

5.ref與reactive

ref

把數(shù)據(jù)變?yōu)轫憫?yīng)式數(shù)據(jù)，ref把它們變成了對象，如果我們直接去操作代碼是修改不了的，你會(huì)發(fā)現(xiàn)當(dāng)前name和age還是通過get和set修改頁面，這時(shí)你需要使用.value，并且ref還是Refimpl

<template>
  <div class="home">
    <h2>姓名：{{name}}</h2>
    <h2>年齡：{{age}}</h2>
    <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}}來做顯示，實(shí)際不用這樣的，在我們vue3中會(huì)檢測到你的ref是對象，自動(dòng)會(huì)給你加上.value，如果我們自己定義的ref對象，實(shí)例會(huì)變?yōu)閞efimpl,這個(gè)時(shí)候用XX.value.XX進(jìn)行修改

<template>
  <div class="home">
    <h2>姓名：{{name}}</h2>
    <h2>年齡：{{age}}</h2>
    <h3>職業(yè)：{{job.occupation}}</h3>
    <h3>薪資：{{job.salary}}</h3>
    <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>

這時(shí)我們打印obj.value，他已經(jīng)不再是refimpl對象，變成了proxy對象，因?yàn)関ue3底層是proxy對象，基本數(shù)據(jù)類型都是按Object.defineProperty里面get和set進(jìn)行數(shù)據(jù)劫持，vue3已經(jīng)把reactive封裝進(jìn)去了，相當(dāng)于我們在調(diào)用ref時(shí)，會(huì)自動(dòng)調(diào)用reactive

reactive

上面我們說ref里面的對象會(huì)調(diào)用reactive，把Object轉(zhuǎn)換為Proxy，現(xiàn)在我們直接通過reactive變成Proxy，它進(jìn)行了一個(gè)深層次的響應(yīng)式

<template>
  <div class="home">
    <h2>姓名：{{name}}</h2>
    <h2>年齡：{{age}}</h2>
    <h3>職業(yè)：{{job.occupation}}<br>薪資：{{job.salary}}</h3>
    <h4>愛好：{{hobby[0]}},{{hobby[1]}},{{ hobby[2] }}</h4>
    <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]='學(xué)習(xí)'
    }
    return {
      name,
      age,
      job,
      say,
      hobby
    }
  }
}
</script>

這時(shí)你肯定會(huì)覺得方法太多了，還不如使用ref提供的.value,是不是感覺爽爽爽，但是有一個(gè)問題，如果有一堆數(shù)據(jù)那不是要一直去.value，點(diǎn)到冒煙，這個(gè)時(shí)候你可以用模擬vue2中data的形式，就會(huì)感覺更香

<template>
  <div class="home">
    <h2>姓名：{{data.name}}</h2>
    <h2>年齡：{{data.age}}</h2>
    <h3>職業(yè)：{{data.job.occupation}}<br>薪資：{{data.job.salary}}</h3>
    <h4>愛好：{{data.hobby[0]}},{{data.hobby[1]}},{{ data.hobby[2] }}</h4>
    <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]='學(xué)習(xí)'
    }
    return {
      data,
      say,
    }
  }
}
</script>

ref與reactive區(qū)別

ref定義的是基本數(shù)據(jù)類型

ref通過Object.defineProperty()的get和set實(shí)現(xiàn)數(shù)據(jù)劫持

ref操作數(shù)據(jù).value，讀取時(shí)不需要。value

reactive定義對象或數(shù)組數(shù)據(jù)類型

reactive通過Proxy實(shí)現(xiàn)數(shù)據(jù)劫持

reactive操作和讀取數(shù)據(jù)不需要.value

6.vue3的響應(yīng)式原理

vue2的響應(yīng)式原理用Object.defineProperty的get和set進(jìn)行數(shù)據(jù)劫持，從而實(shí)現(xiàn)響應(yīng)式

vue2中只有g(shù)et和set方法去進(jìn)行屬性的讀取和修改操作，當(dāng)我們進(jìn)行新增，刪除時(shí)，頁面不會(huì)實(shí)時(shí)更新

直接通過下標(biāo)改數(shù)組，頁面也不會(huì)實(shí)時(shí)更新

vue3中響應(yīng)式原理使用Proxy進(jìn)行代理，使用window內(nèi)置對象Reflect反射，學(xué)了Es6的語法的就知道我們在使用Proxy進(jìn)行代理，好比甲方公司給出需要什么技術(shù)的前端攻城獅，讓乙方去干招聘、面試等環(huán)節(jié)

Proxy可以攔截對象中任意的屬性變化，當(dāng)然包括讀寫，添加，刪除等

Reflect對源對象屬性進(jìn)行操作

const p=new Proxy(data, {
// 讀取屬性時(shí)調(diào)用
get (target, propName) {
return Reflect.get(target, propName)
},
//修改屬性或添加屬性時(shí)調(diào)用
set (target, propName, value) {
return Reflect.set(target, propName, value)
},
//刪除屬性時(shí)調(diào)用
deleteProperty (target, propName) {
return Reflect.deleteProperty(target, propName)
}
})

關(guān)于“vue3和vue2的語法有哪些區(qū)別”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)，可以關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，小編每天都會(huì)為大家更新不同的知識(shí)點(diǎn)。

當(dāng)前名稱：vue3和vue2的語法有哪些區(qū)別
文章地址：http://www.chinadenli.net/article2/jcosic.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供微信公眾號(hào)、全網(wǎng)營銷推廣、商城網(wǎng)站、云服務(wù)器、手機(jī)網(wǎng)站建設(shè)、ChatGPT

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)