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: &#39;appName&#39;,
  setup(){
  //变量
   let name = &#39;打工仔&#39;
   let age = 18
   //方法
   function say(){
    console.log(`我只是一个${name},今年${age}岁`)
   }
   //返回一个对象
   return {
    name,
    age,
    say
   }
  }
 }
</script>

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

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

在script標籤上新增setup 如：5101c0cdbdc49998c642c71f6b6410a82cacc6d41bbb37262a98f745aa00fbf0,相當在編譯運行時放到了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把它們變成了對象，如果我們直接去操作代碼是修改不了的，你會發現當前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 &#39;vue&#39;
export default {
  name: &#39;Home&#39;,
  setup(){
    let name = ref(&#39;中介&#39;)
    let age = ref(18)
    console.log(name)
    console.log(age)
    //方法
    function say(){
      name=&#39;波妞&#39;
      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 &#39;vue&#39;
export default {
  name: &#39;Home&#39;,
  setup(){
    let name = ref(&#39;中介&#39;)
    let age = ref(18)
    let job=ref({
      occupation:&#39;程序员&#39;,
      salary:&#39;10k&#39;
    })
    console.log(name)
    console.log(age)
    //方法
    function say(){
      job.value.salary=&#39;12k&#39;
    }
    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 &#39;vue&#39;
export default {
  name: &#39;Home&#39;,
  setup(){
    let name = ref(&#39;波妞&#39;)
    let age = ref(18)
    let job=reactive({
      occupation:&#39;程序员&#39;,
      salary:&#39;10k&#39;
    })
    let hobby=reactive([&#39;吃饭&#39;,&#39;睡觉&#39;,&#39;打豆豆&#39;])
    console.log(name)
    console.log(age)
    //方法
    function say(){
      job.salary=&#39;12k&#39;
      hobby[0]=&#39;学习&#39;
    }
    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 &#39;vue&#39;
export default {
  name: &#39;Home&#39;,
  setup(){
    let data=reactive({
      name:&#39;波妞&#39;,
      age:18,
      job:{
        occupation:&#39;程序员&#39;,
        salary:&#39;10k&#39;
      },
      hobby:[&#39;吃饭&#39;,&#39;睡觉&#39;,&#39;打豆豆&#39;]
    })
    //方法
    function say(){
      data.job.salary=&#39;12k&#39;
      data.hobby[0]=&#39;学习&#39;
    }
    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)
}
})

【相关推荐：《vue.js教程》】

以上是vue3和vue2的語法有什麼差別的詳細內容。更多資訊請關注PHP中文網其他相關文章！