空投在我怀里的博客

基础类型

优势

ts的认识

作用：实现祖与后代组件间通信 父传子套路：父组件有一个 provide 选项来提供数据，后代组件有一个 inject 选项来开始使用这些数据祖组件中：后代组件中：

作用：创建一个自定义的 ref，并对其依赖项跟踪和更新触发进行显式控制。实现防抖效果

一、其它 Composition APItoRaw 与 markRawtoRaw作用：将一个由reactive生成的响应式对象转为普通对象。使用场景：用于读取响应式对象对应的普通对象，对这个普通对象的所有操作，不会引起页面更新。markRaw作用：标记一个对象，使其永远不会再成为响应式对象。应用场景:有些值不应被设置为响应式的，例如复杂的第三方类库等。当渲染具有不可变数据源的大列表时，跳过响应式转换可以提高性能。...

一、其它 Composition APIreadonly: 让一个响应式数据变为只读的（深只读）。shallowReadonly：让一个响应式数据变为只读的（浅只读）。应用场景: 不希望数据被修改时。

作用：创建一个 ref 对象，其value值指向另一个对象中的某个属性。语法：const name = toRef(person,'name')应用: 要将响应式对象中的某个属性单独提供给外部html使用时。扩展：toRefs与toRef功能一致，但可以批量创建多个 ref 对象，语法：toRefs(person)shallowReactive：只处理对象最外层属性的响应式（浅响应式）。shallowRef：只处理基本数据类型的响应式, 不进行对象的响应式处理。什么时候使用?如果有一个对象数据，结构比

一、生命周期Vue3.0中可以继续使用Vue2.x中的生命周期钩子，但有有两个被更名：beforeDestroy改名为 beforeUnmount销毁之前-在事件里面的所有对数据的更改，都不会对数据进行更新（一般，关闭定时器，取消订阅消息、解绑自定义事件等收尾操作）destroyed改名为 unmounted 销毁之后-没什么用，被忽略2.可以直接已配置项的形式使用生命周期钩子，也可以使用组合式API的形式使用，尽量统一一般来说，组合式API里的钩子会比配置项的钩子先执行，组合式API的钩子名字有变化Vu

一、计算属性与监视1.计算属性：与Vue2.x中computed配置功能一致写法：2.watch函数与Vue2.x中watch配置功能一致两个小“坑”：监视reactive定义的响应式数据时：oldValue无法正确获取、强制开启了深度监视（deep配置失效）。监视reactive定义的响应式数据中某个属性时：deep配置有效。情况一：监视ref定义的响应式数据如果用ref定义了一个对象或者这样情况二：监视多个ref定义的响应式数据情况三：监视reactive定义的响应式数据若

一、插槽默认插槽子组件父组件2.具名插槽

一、Composition API1.组合式 API在Vue2中，我们使用的是Options API ，配置项式的API，我们要创建一个Vue实例，然后在里面传入一个配置对象，里面要写data、methods、watch等的东西，而Vue3提出了全新的 Composition API，组合式API，我们不用直接创建Vue实例，而是创建一个app，然后按需引入需要的API，来进行使用...2.Options API 存在的问题使用传统Options API（配置式API）中，新增或者修改一个需求，就需要分别在

一、vue3的优势性能的提升打包大小减少41%初次渲染快55%, 更新渲染快133%内存减少54%2.源码的升级使用Proxy代替defineProperty实现响应式重写虚拟DOM的实现和Tree-Shaking3.拥抱TypeScriptVue3可以更好的支持TypeScript二、新的特性1.Composition API（组合API）setup配置ref与reactivewatch与watchEffectprovide与 inject2.新的内置组件FragmentTeleportSuspense3

一、布局1.新增组件style-sider.vue2.组件的放置位置,样式第一章有 二、思路1.首先要配置好、组件名称、组件的类型、和组件的样式3.首先要传给子组件的东西，有2个，’获取当前点击的图层‘和’获取当前点击的图层的样式配置‘这边的图层的样式配置数据在第一章有，这边提供一部分config.jsdefault.js style-form-config.js4.因为传的是需要单向数据绑定的，所以这边要使用计算属性去绑5.然后通过遍历"图层的样式配置数据"去

一、思路1.先找到当前选中的项，+1上移动，然后去找数组中上一个，让上一个，往下移，当前的去+12.下移同理3.删除，过滤掉当前选中的项就可以了二、实现代码三、全部代码四、效果展示

一、思路1.每次push到list数组的时候，新增一个z用来管理图层的叠放，z应该有个默认值0，如果有z值去多个z值中比较获取最大的，这样拖拽的时候，会是最高层级的的2.样式的话z-index因为我们用的依赖，所以直接赋值就可以了二、置顶和置底1.首先右击的时候获取当前图层的焦点传一个item过来，然后设置一个focused状态，遍历list中的id,跟当前点击的id是否一样，一样就true,否则为flase2.先找到数组中被选中的项，通过list中多个z值比较，最大最小，从而实现置底和置顶三、全部代

一、引入依赖二、使用三、打开于关闭事件1. 写入的ref要有2. this.$refs.contextMenu.close()//关闭右键菜单this.$refs.contextMenu.open(e);//打开右键菜单3.我们封装打开菜单的方法塞给画布中显示的图层，这样右击就可以出现菜单四、代码......

一、拖拉拽widget-list.vue 1.拖的实现： draggable="true" H5给了一个属性可以拖拽，要配合2.放置的实现@dragover.prevent @drop="onDrop"App.vue 3.放置位置差计算图图解 4.静态资源管理4-1.constants下的config.js-组件列表的配置项 4-2.constants下的default.js-组件列表的配置项的默认样式4-3.constants下的style-form-config.js-组

百度

菜鸟教程