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移动到对应的节点**。