vue3相比vue2寫法上的改變

vue3相比vue2的改變

除開不少文檔的最多的組合式API,在常規使用上的改變也不少。好比：

1.v-for列表渲染部分調整

v-for和vue-if的優先級問題，vue3中，v-if的優先級高於v-for,沒法使用v-for中的參數來進行判斷。這樣寫會拋出錯誤或者警告，要求開發者對v-for的對象使用計算屬性或者方法來進行過濾。
vue2在進行列表渲染時，會自動給每一個循環上加ref，vue3須要手動加入。

2.屬性繼承包含class和style

vue3在子組件繼承時。默認繼承class到子組件的根節點。若是須要達到和vue2相同的效果，須要設置子組件的`inheritAttrs:false`

3.vue3移除了$children

不能使用$children來選擇子組件，只能使用$refs.xxx的方式來選取子組件。

4.自定義指令中的生命週期發生變化

vue2和vue3指令生命週期對照表,換句話說，指令中的生命週期和組件的生命週期一致。而vue2中，指令和組件的生命週期是不一致的。

vue2	vue3	說明
--	created	元素屬性和事件監聽被初始化後調用，vue3新增
bind	beforeMount	掛載以前調用
insert	Mounted	掛載以後調用
--	beforeUpdate	組件數據更新以前調用，vue3新增
update	--	數據更新時調用，vue3已移除
componentUpdated	updated	組件數據更新後調用
--	beforeUnmount	組件卸載以前調用,vue3新增
unbind	unmounted	組件卸載以後調用

5.data及mixin的合併策略

vue3中data只能是函數，返回一個對象的方式。合併策略爲data根節點進行淺層合併。

6.過濾器被移除

vue3移除了過濾器，須要使用過濾器的場景使用計算屬性或者methods代替。

7.事件$on,$off,$once被移除。

組件的$emit依然保留，同時，組件上綁定原生事件修飾符.native被移除，能夠在子組件上直接監聽原生事件。可是有坑，設置了第二條中的`inheritAttrs:false`，會致使事件不會被觸發。

8.render函數的修改

在vue2中，render函數默認傳參createElement函數。vue3中沒有默認參數，須要從vue中引入。

vue2寫法:

render(h){
      return h('div',{...options},'默認')
  }

vue3的寫法:

```javascript
import {h} from 'vue'
// ……省略內容
render(){
    return h('div',{...options},'默認')
}
```
同時，上例中的options的寫法也有調整，vue2中本來的attrs，on等屬性都取消了。

vue2中的options大概是這樣:

```javascript
{
    staticClass: 'button',
    class: {'is-outlined': isOutlined },
    staticStyle: { color: '#34495E' },
    style: { backgroundColor: buttonColor },
    attrs: { id: 'submit' },
    domProps: { innerHTML: '' },
    on: { click: submitForm },
    key: 'submit-button'
}
```

而vue3中的options則爲這樣:

```javascript
{
    class: ['button', { 'is-outlined': isOutlined }],
    style: [{ color: '#34495E' }, { backgroundColor: buttonColor }],
    id: 'submit',
    innerHTML: '',
    onClick: submitForm,
    key: 'submit-button'
}
```

9.template規則發生變化

vue2中要求template中有惟一的根元素，而vue3中能夠有多個根元素

10.Vue.prototype被config.globalProperties取代。

拿咱們常常用的axios來舉例,vue2寫法：


```javascript
    import Vue from 'vue'
    import axios from 'axios'
    Vue.prototype.axios = axios;

```

Vue3寫法:

```javascript
    import {createApp} from 'vue';
    import axios from 'axios';
    const app = createApp();
    app.config.globalProperties.axios = axios;
```

可是這裏須要注意的是，config.globalProperties這個屬性是應用自己纔有的，而mount會返回實例，沒法實現全局掛載。因此在進行鏈式寫法的時候，**先設置congfig.globalProperties後再進行mount**，因此例子中的app若是不當心這樣寫了，是不生效的。

```javascript
    // 錯誤示範
    import {createApp} from 'vue';
    import axios from 'axios';
    const app = createApp().mount('#app');//先設置全局屬性，再進行掛載
    app.config.globalProperties.axios = axios;        

```

11.Vue3增長了teleport

teleport功能上能夠理解成react裏面的portals


```javascript
    <teleport to ="body">
    // some elements
    </teleport>
```


用途是部分元素可能有掛載或者呈現到特定結點的需求。好比常見的modal，模態對話框，一般有那種全屏顯示的需求，咱們把他放到body子級。teleport就是這個用途。須要注意的是，官方強調了，這個是**將dom移動到對應的節點**。