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中,指令和组件的生命周期是不一致的。
vue2vue3说明
--created元素属性和事件监听被初始化后调用,vue3新增
bindbeforeMount挂载之前调用
insertMounted挂载之后调用
--beforeUpdate组件数据更新之前调用,vue3新增
update--数据更新时调用,vue3已移除
componentUpdatedupdated组件数据更新后调用
--beforeUnmount组件卸载之前调用,vue3新增
unbindunmounted组件卸载之后调用

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移动到对应的节点**。
阅读 3.2k
538 声望
6 粉丝
0 条评论
538 声望
6 粉丝
文章目录
宣传栏