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) } })

【