vue3 “用后感”

时间:2021-1-8 作者:admin

vue3的源码已经开放很久了,官网也火速出了新文档。但奈何我的速度总是能和蜗牛相比。正好,最近有做到vue3的项目。那我来写一篇 “用后感” 吧!把项目中学习到的关于vue3的理解分享给大家。

这里做一个简单的归纳,个人认为vue3中值得大家注意的点:

  • 1、数据拦截机制的变更
  • 2、组合API的引入
  • 3、setup函数带来的一系列惊喜
  • 4、响应式API的宽泛应用

一、数据拦截机制的变更

vue2 通过 Object.defineProperty() 方式来截持数据的变更。而在升级为 vue3 之后,作者不再借助 Object.defineProperty 来劫持数据,而是通过 es6 的新特性 proxy 来劫持数据。因为在 vue2 中,响应式数据需要通过 data() 初始化预先定义好,但是在 vue3 之后,data 中的数据不再进行响应式追踪,而是将它转化为proxy 代理再进行追踪更新。

注意: 在vue3中,它将任何在data()函数中定义的数据,会使用getter或setter遍历所有的property,将其转化成proxy代理。

二、组合API的引入

vue3中最大的改变还是compositionApi的引入,这是vue3中的最核心的部分。

包括以下几方面:

  • a、setup函数

下一节有详细介绍,这里就不赘述了。

  • b、生命周期钩子

vue3抛出了全局的API,通过引入 onX 的形式,使setup函数中支持钩子函数的调用。

  • c、provide/Inject

vue3 中也支持在 setup 函数中使用 provide和inject,只要在对应的位置引入即可:

import { provide } from 'vue';
setup(){
    provide(name, 'hello!');
}

import {inject} from 'vue';
setup(){
    inject('name', [default-value]: string);
}
  • d、getCurrentInstance

支持在setup函数中访问自己的实例

import { getCurrentInstance } from 'vue';
setup() {
    const internalInstance = getCurrentInstance();
}

三、setup函数带来的一系列惊喜

在vue3中,setup函数的引入,这种函数式的开发方式,很好地将代码整合到一起。

  • 在vue2中,data数据需要在使用的时候调用this访问,现在vue3中使用reactive,ref来设置响应式数据。
data() {
    return {
        name: 'aaa',
    };
}

=>

const name = ref('aaa');  
就像简单的定义变量一样,使用ref就可以为变量初始化
  • setup函数取代了methods的函数定义方式,我们可以选择性地对外暴露我们定义的函数。在methods的函数,都绑定到了this上,this得有多累啊 (> 3 >),很好地保护了我们自己定义的私有变量。
methods: {
    function unkouwnFunc() {
        console.log(3333);
    }
},

=>

setup () {
    function unkownFunc() {
        console.log(3333);
    }

    return {
        unkownFunc, // return之后,该函数绑定到了组件实例上,可以在模版中直接使用
    };
}
  • 关于setup函数中使用emit事件
import { SetupContext } from 'vue';

emits: ['eventName'],
setup(props, ctx: SetupContext){
    ctx.emit('event-name', value);
}

  • 另外作者为了支持setup函数,向外抛出了全局的生命周期钩子,只在setup函数中使用有效。
import { onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted } from 'vue';

setup() {
    onBeforeMount() {
        your code
    }
    onMounted () {
        your code
    }
    onBeforeUpdate() {
        your code
    }
    onUpdated() {
        your code
    }
    onBeforeUnmount() { 
        your code
    }
    onUnmounted() {
        your code
    }
}

四、响应式API的宽泛应用

  • Ref和reactive API带来的便利

    vue3中的 ref的reactive 非常非常的好用,为什么这么说?因为vue在这里直接给出了他的全局API。不管在任何场景下,我们都可以直接引入,并创建这个响应式的数据。通过导入,导出,实现代码的 集中化管理

    所谓 集中化管理, 在这里指的是代码的运用灵活度提升了,vue2中,使用store来集中管理状态,而现在,我们可以直接真正抛弃store了。因为vue3的响应式API 给我们带来了非常nice的体验。

>> state.js 

export function useCount () {
    const count = ref(0);

    setCount (newv = 0) {
        count.value = newv;
    }

    return {
      count,
      setCount,
    };
}

=>

import {useCount} from 'state.js';
setup() {
    const { count } = useCount();
}
  • 关于computed和watch在setup函数中的使用
computed: {
    aaa() => {
            return 333
        }
    },
    watch: {
        bbb(newv, oldv) {
            console.log(newv, oldv);
        }
    },
}


=>

import { computed, watch } from 'vue';

const aaa = computed(() => {
  return 333;
})

const bbb = watch();
声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。