vue3新特性体验

本篇针对vue3的新增特性进行学习
主要来自http://www.liulongbin.top:8085/#/
声明，这是别人的总结，我仅做一些要点提炼
仅做一些补充笔记 给自己看的

• 总的来说给我的第一映像就是有一点点像写react hook的感觉
• setup(props, this(上下文对象))

该函数相当于一个生命周期函数，vue中过去的data，methods，watch等全部都用对应的新增api写在setup()函数中

• 执行时机在beforecreate与created之间。vue3也是取消了这两个钩子，统一用setup代替
• 由于所有东西都得调用api写在setup中，这让我感觉有点像写react的感觉。
• 数据return出去，像过去data(){ return {} }一样

• reactive({})

该函数传入一个对象，里面的数据会变成响应式的数据。类似于react中的state，只不过state更新的时候不需要setState一遍了

• 想要使用创建的响应式数据也很简单，创建出来之后，在setup中return出去，直接在template中调用即可

• ref()

ref也是创建响应式数据的，区别在于要用xxx.value才能访问到数据值，更推荐用ref，然后配合reactive使用

• 当把 ref() 创建出来的响应式数据对象，挂载到 reactive() 上时，会自动把响应式数据对象展开为原始的值，不需通过 .value 就可以直接被访问

• toRefs()

toRefs() 函数可以将 reactive() 创建出来的响应式对象，转换为普通的对象，只不过，这个对象上的每个属性节点，都是 ref() 类型的响应式数据

• computed()

该函数用来创造计算属性，和过去一样，它返回的值是一个ref对象。
里面可以传方法，或者一个对象，对象中包含set()、get()方法

• watch

支持传三个参数
- 想监听的数据，可以是数组形势，传入多个
- 监听数据的回调函数，该回调的参数有两个，前一个是newValue，后一个是oldValue，每一个都可以是一个数组，与之前的多个监听对应
- 监听的配置参数 是一个对象，如lazy：true，这样可以让初次挂在时不执行watch的回调

const state = reactive({ count: 0, name: 'zs' })
如果是reactive创建的数据，watch的第一个参数应该是() => state.count这种形式
const count = ref(0)
如果是ref创建的数据，那么直接传 count 即可

• 可以在watch的回调中用onCleanup(() => clearTimeout(timerId))
  清楚无用的异步操作，举个例子可以做防抖，你可以在回调里清除防抖的那个定时器

• 全新的生命周期函数 （只能在setup中使用）

beforeCreate -> use setup()
created -> use setup()
beforeMount -> onBeforeMount
mounted -> onMounted
beforeUpdate -> onBeforeUpdate
updated -> onUpdated
beforeDestroy -> onBeforeUnmount
destroyed -> onUnmounted
errorCaptured -> onErrorCaptured

• provide & inject

可以取代props，类似react，在父子传信的时候不用再一级一级的props了，只要父级provide了数据，无论嵌套多少层级的子组件，都可以在对应的子组件中inject获取数据

• ref

写在template上的ref，用法发生了一些变化，细节看文档

总的来看，似乎无论是vue3还是react的hook，好像都在趋于一个方向靠拢，似乎都在抛去自身组件的特色写法，渐渐趋于大同，这只是我的拙见而已，我的依据是，vue在script标签中的写法做了大改版，不再像过去那样data，watch分开独立的写，在我看来，还是vue2那样写比较舒服，很清晰，但这样改版肯定有超出我认知的考虑，毕竟我只是一个才接触半年的菜鸡哈哈哈。react的hook也是类似，他要抛去的是class组件的写法，改用函数式组件。殊途同归，我想这样做的目的都是为了轻量化，让写一个组件不在那么的重。react不用整一个类出来，vue不用想用定义一个数据得data，想定义一个方法得methods。目前想法是这样子吧

认知更新

之前说js全写在setup()中不清晰，其实在vue2中，那样的option api你的逻辑可能会非常的分散，某一功能，他的数据在data中，逻辑有在methods中，有在生命周期中，这导致项目变大之后，很难阅读，跳来跳去。
所以vue3中将代码全写进setup()里，这样可以自由分块，非常舒服
react hook同理