Vue3.0初体验

就在前几天，vue官网推出了3.xbeta版，那3版本对2版本做了哪些改动和升级呢？

下面让我们一起来体验下：

众所周知，vue2是在初始化时候，对所有数据用Object.defineProperty进行拦截，但是vue3采用了es6中proxy动态拦截Reflect进行返回，初始化工作减少，性能提升；

vue2在数据发生变化时候，会进行全局diff，vue3在模板层做了静态分析，使没有变化的节点放在render函数之外，只更新修改节点，大大提升渲染速度；

vue3.0生命周期(hooks)的变化

beforeCreated 和 created -> setup  // setup在整个生命周期中最先执行，早于beforeCreated，还没有真是节点

beforeMount -> onBeforeMount

mounted -> onMounted

beforeUpdate -> onBreforeUpdate

updated -> onUpdated

beforeDestroy -> onBeforeUnmount

distroyed -> onUnmounted

关于composition-api及hooks

import {ref、reactive、watch、watchEffect、computed} from 'Vue'

整个Componsition-API，体现的是一种逻辑抽象能力。是reactive、watchEffect、ref的组合。

主要就是可以把生命周期，响应式数据，操作函数，全部抽离再一个内部函数，所以vue3的组件就可以无限的拆分，并且数据来源还可以异常清晰。

watch和watchEffect的不同点

1、watchEffect不需要指定监听的属性，只要我们回调中引用的这些属性变更的时候，这个回调都会执行，watch需要指定监听的属性；

2、watch中有newValue，oldValue，watchEffect拿不到这些；

3、watchEffect初始化会执行(类似computed)，依赖发生变化后执行回调，watch开始就指定了依赖（设置immediate：true会立即执行），当依赖变化时才会执行；

4、watchEffect如果是在setup或者生命周期里面注册的话，在组件取消挂载的时候会自动的销毁；

下面来一段完整代码

import { ref, computed, reactive, watchEffect, watch, onMounted } from 'vue'

export default {

    setup(){

        const data = reactive({

            state: 0,

            count: 0,

            doubles: computed(() => data.count*2)

        })

        const add1 = () => {

            data.state++

        }

        // 不需要添加监听属性，当count变化时候会自动执行

        watchEffect(() => {

            data.state = count

        })

        // 需要添加监听属性，data.state，count

        watch([() => data.state, () => data.count], ([newState, newCount], [oldState, oldCount]) => {

            console.log(newState, newCount, oldState, oldCount)

        })

        const roots = ref(null)

        onMounted(() => {

            roots.value.innerHTML = '小灰灰'

        })

        return {

            add,

            add1,

            data,

            roots

        }

    }

}