vue2.X和vue3.X的區別

一、默認進行懶觀察（lazy observation）
　　在 2.x 版本里，不管數據多大，都會在一開始就為其創建觀察者。當數據很大時，這可能會在頁面載入時造成明顯的性能壓力。3.x 版本，只會對「被用於渲染初始可見部分的數據」創建觀察者，而且 3.x 的觀察者更高效。

二、更精准的變更通知。
　　舉例來說：2.x 版本中，使用 Vue.set 來給對象新增一個屬性時，這個對象的所有 watcher 都會重新運行；3.x 版本中，只有依賴那個屬性的 watcher 才會重新運行。

三、3.0 新加入了 TypeScript 以及 PWA 的支持

四、部分命令發生了變化：
　　1.下載安裝 npm install -g vue@cli
　　2.刪除了vue list
　　3.創建項目 vue create
　　4.啟動項目 npm run serve

五、默認項目目錄結構也發生了變化：
　　移除了配置文件目錄，config 和 build 文件夾
　　移除了 static 文件夾，新增 public 文件夾，並且 index.html 移動到 public 中
　　在 src 文件夾中新增了 views 文件夾，用於分類 視圖組件 和 公共組件

六、使用上的變化

1.Data

export default {
  data(){
    return{

    }
  }
},
///////////////////////
取而代之是使用以下的方式去初始化數據:
<template>
  <div class="hello">
    123
  </div>
  <div>{{name.name}}</div>
</template>
import {reactive} from 'vue' 
export default {
 setup(){
   const name = reactive({
     name:'hello 番茄'
   })
   return {name}
 }  
}

tip:在新版當中setup等效於之前2.0版本當中得到beforeCreate,和created，它是在組件初始化的時候執行，甚至是比created更早執行。值得注意的是,在3.0當中如果你要想使用setup里的數據，你需要將用到值return出來，返回出來的值在模板當中都是可以使用的。
假設如果你不return出來，而直接去使用的話瀏覽器是會提醒你：

runtime-core.esm-bundler.js?5c40:37 [Vue warn]: Property "name" was accessed during render but is not defined on instance. at <Anonymous> at <Anonymous> (Root)

這個也是3.0當中需要注意的地方。細心的朋友應該已經發現，我在模板里放入2個子節點,其實這個在2.0里是不被允許的,這也是3.0的一項小的改變 reactive是3.0提供的一個數據響應的方式，它主要是對對象進行數據響應，接下來會介紹另一種數據響應的方式ref。

2.Method

  <div class="hello">
    <div>{{name.name}}</div>
    <div>{{count}}</div>
    <button @click="increamt">button</button>
  </div>
  
</template>

<script>
import {reactive,ref} from 'vue'
export default {
 setup(){
   const name = reactive({
     name:'王'
   })
   const count=ref(0)
   const increamt=()=>{
     count.value++
   }
   return {name,count,increamt}
 }  
}

　　在介紹Method的代碼中，我引用了vue提供的ref新函數，它的作用是用來創建一個引用值，它主要是對String,Number,Boolean的數據響應作引用。也許有人會問，為什么不直接給count賦值，而是采用ref(0)這樣的方式來創建呢，按我的理解就是，如果直接給count賦值就是等於把這個值直接拋出去了，就很難在找到它，而采用ref這種方法等於你在向外拋出去值的是同時，你還在它身上牽了一根繩子，方便去追蹤它。
　　需要注意的時，在ref的函數中，如何你要去改變或者去引用它的值，ref的這個方法提供了一個value的返回值，對值進行操作。

　　

3.LifeCycle(Hooks) 3.0當中的生命周期與2.0的生命周期出現了很大的不同：

　　beforeCreate -> 請使用 setup()

　　created -> 請使用 setup()

　　beforeMount -> onBeforeMount

　　mounted -> onMounted

　　beforeUpdate -> onBeforeUpdate

　　updated -> onUpdated

　　beforeDestroy -> onBeforeUnmount

　　destroyed -> onUnmounted

　　errorCaptured -> onErrorCaptured

如果要想在頁面中使用生命周期函數的，根據以往2.0的操作是直接在頁面中寫入生命周期，而現在是需要去引用的，這就是為什么3.0能夠將代碼壓縮到更低的原因。

import {reactive, ref, onMounted} from 'vue' export default { setup(){ const name = reactive({ name:'王' }) const count=ref(0) const increamt=()=>{ count.value++ } onMounted(()=>{ console.log('123') }) return {name,count,increamt} } 

4.computed

<template> <div class="hello"> <div>{{name.name}}</div> <div>{{count}}</div> <div>計算屬性{{computeCount}}</div> <button @click="increamt">button</button> </div> </template> <script> import {reactive, ref, onMounted,computed} from 'vue' export default { setup(){ const name = reactive({ name:'王' }) const count=ref(0) const increamt=()=>{ count.value++ } const computeCount=computed(()=>count.value*10)//使用computed記得需要引入，這也是剛接觸3.0容易忘記的事情 onMounted(()=>{ console.log('123') }) return {name,count,increamt,computeCount} } } </script>

5.組件使用上的區別

在開始介紹3.0組件的用法之前，我們可以先回顧一下2.0使用組件的方式。 在2.0當中，哪個頁面需要使用組件就在哪個頁面里引入該組件，同時在頁面注冊這個組件。在傳遞參數時，父組件傳遞參數給子組件，子組件就會接收父組件傳遞過來的參數。

舉個栗子：

<template>
  <div id="app">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>

子組件
<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  data(){
    return{
      
    }
  },
  method:{
    handleClick(){
      this.$emit('childclick','123')
    }
  }
}
</script>
以上是最常見的父子組件之間的調用，但是在vue3.0中就存在差異。
父組件：

<template> <div class="hello"> <div>123</div> <NewComp :name="name" @childClick="parentClick"/> </div> </template> <script> import {reactive} from 'vue' import NewComp from './newComp.vue' export default { components:{ NewComp }, setup(){ const name=reactive({ name:'hello 番茄' }) const parentClick=(e)=>{ console.log(e) console.log('123') } return {name,parentClick} } } </script>
子組件：

<template> <div> <button @click="handleClick">組件</button> </div> </template> <script> export default { setup(props,{emit} ){ const handleClick=()=>{ emit('childClick','hello') } return { props, handleClick } } } </script>

　　通過上面的vue3.0父子組件之間的調用,我們不難發現,父組件當中在調用子組件時，基本與2.0相同，而在子組件當中,要想獲取到父組件傳遞過來的參數,我們是直接在setup()中直接獲取到props值和emit事件。這是因為setup為我們提供了props以及context這兩個屬性，而在context中又包含了emit等事件。
　　為什么不用this.$emit的方法來向外觸發子組件事件，因為在3.0當中已經不在使用this關鍵詞。