在做TS类型体操的时候偶然发现还有vuejs在线挑战，就简单的记录一下，因为之前大多是在vue2做项目，vue3学了一段时间了只是自己在写小demo还没有接受过现实情况的拷打，就做下挑战看看抗打不。 cn-vuejs-challenges.netlify.app/
中等
-
优化性能的指令
v-once:仅渲染元素和组件一次，并跳过之后的更新
-
切换器： 一个简单的compositionAPI,返回状态和方法
-
until：对异步的回调
-
计数器：组合式
-
实现本地存储函数
- watchEffect和localStorage结合，修改和获取localStorage所存变量
-
切换焦点指令
- 在mounted和updated周期内定义对应方法
-
防抖点击指令
- 指令的钩子函数会有el, binding, vnode, prevVnode这几个参数，其中binding对象里有value,oldValue,arg,modifiers,instance,dir等，value即指令对应的值在这里对应onClick，arg则对应定义的参数，在这里是ms。
- 钩子
-
函数式组件
- 类似于react使用map渲染一个列表， h渲染函数：第一个参数既可以是一个字符串 (用于原生元素) 也可以是一个 Vue 组件定义。第二个参数是要传递的 prop，第三个参数是子节点
-
渲染函数
- h函数 的使用，第二个参数传递组件属性，比如disabled,onclick等方法，通过emit派发
-
按键修饰符
.exact修饰符允许控制触发一个事件所需的确定组合的系统按键修饰符
<!-- 当按下 Ctrl 时，即使同时按下 Alt 或 Shift 也会触发 -->
<button @click.ctrl="onClick">A</button>
<!-- 仅当按下 Ctrl 且未按任何其他键时才会触发 -->
<button @click.ctrl.exact="onCtrlClick">A</button>
<!-- 仅当没有按下任何系统按键时触发 -->
<button @click.exact="onClick">A</button>
-
鼠标坐标 composition式开发，通过监听鼠标事件的pageX,pageY,将坐标返回。
-
全局CSS css 设置global
-
原始值 API
toRaw()可以返回由reactive(),readonly()、shallowReactive()或者shallowReadonly()创建的代理对应的原始对象。这是一个可以用于临时读取而不引起代理访问/跟踪开销，或是写入而不触发更改的特殊方法。不建议保存对原始对象的持久引用，请谨慎使用,- markRaw()将一个对象标记为不可被转为代理。返回该对象本身。
-
** Effect作用域 API**
- effectScope()创建一个 effect 作用域，可以捕获其中所创建的响应式副作用 (即计算属性和侦听器)，这样捕获到的副作用可以一起处理。
困难
-
树组件
- 一个简单的组件，v-for&v-if
-
自定义元素 使用
defineCustomElement -
自定义ref
customRef()预期接收一个工厂函数作为参数，这个工厂函数接受track和trigger两个函数作为参数，并返回一个带有get和set方法的对象。一般来说，track()应该在get()方法中调用，而trigger()应该在set()中调用。实际上，你对何时调用、是否应该调用他们有完全的控制权。
-
激活的样式-指令：自定义指令做tab切换时active样式
-
实现简易版
v-model指令： 在mounted钩子添加监听，在unmounted钩子移除监听。
