mes项目 组态开发项目reademe文档 待整理
vue2 项目
========= vue cmd命令所包含知识点：
当npm install无效，需要进行npm cache clean --force命令操作，
如果这样操作不成功的话，去C盘清空一个文件夹：
C/用户/administrator/appdata/Roaming/npm-cache 直接将路径下该文件夹右键删除
再重新npm install
#删除node_modules
npm cache clean --force 强制清楚缓存
npm install rimraf -g
rimraf node_modules
重装：npm install
#canvas库---ocanvas
npm install ocanvas --save
import oCanvas from 'ocanvas'
var oCanvas = require('ocanvas')
路由配置的两种方式
- location.hash=“url” 可以通过hash来改变href，但页面不发生刷新
- history.pushState({},’’,‘url’) 也可以通过html的history改变路由且不刷新页面
replaceState() go() back() forward()
安装vue-router: npm install vue-router --save
添加--save是因为项目运行时也需要依赖路由
document.title="首页" document.title可以改变当前页的网址上的文字描述
学会使用StackOverflow和GitHub提问
在vue3项目中使用scss:
npm install node-sass --save-dev
全局安装vue3脚手架：
npm i -g @vue/cli
vue3 通过vite初始化项目： 学习vue3.0，先从搭建环境开始
yarn/npm create vite-app vue3project
一步直接创建项目。
vue add vue-next 让vue支持3.0
=模块化开发====
1 为什么前端要做模块化开发
避免多人开发时变量重名等问题
2 模块化开发的概念
早期的模块化开发的实现，是通过匿名函数，使得多人开发时变量重名不会影响整体项目。同时将需要全局使用的变量或者函数通过return方式暴露出去–导出。这样就可以在其他位置直接使用–导入。
3 常见的模块化规范有： AMD, CMD, Modules,CommonJS,
===webpack的作用/安装和使用/配置
1.1webpack安装和使用
vue脚手架 vue cli=====
1 脚手架工具的作用：
帮助完成项目的代码目录结构，项目结构和部署，热加载，代码单元测试等功能。
vue cli俗称vue项目脚手架，可以快速搭建vue开发环境以及对应的webpack配置。所以使用vue cli需要先安装node(因为webpack的使用需要先安装node，然后才能使用npm—npm为node自带的)
-
安装node：
直接在官网下载安装：http://nodejs.cn/download/ -
检测安装的node版本：
node环境要求版本 >= 8.9 -
什么是NPM？node package manager
npm是一个nodejs包管理和分发工具，已经成为非官方的发布node模块的标准
国内直接使用npm的官方镜像非常慢，所以推荐使用淘宝npm镜像。
npm install -g cnpm --registry=https://registry.npm.taobao.org
一般org网址都是非营利性的。com结尾的网址是营利性的
安装vue cli3版本，既可以使用3版本，也可以使用2版本。所以直接安装3版本cli就好了。
npm install -g @vue/cli 安装vue cli3
cli3版本下创建vue项目：
vue create projectname
如果按照3版本后想要使用2.x旧版本。可以通过命令直接拉取旧版本
npm install -g @vue/cli-init
cli2版本下创建vue项目：
vue init webpack projectname
runtime compiler / runtion only的区别========
运行+编译器:可以直接使用template模板.
仅运行时.无法解析template模板,需要通过render函数提前编译
============vue所包含知识点：
1 input/button具有特别的监听事件
input有个特有的动态监听事件，用来监听表单数据value的变化。v-on:input/@input
当input表单内数据value发生变化时会触发:input监听事件
button也有特有的监听事件
2 浏览器的event对象
cli(event) {
//@click="cli" 当调用方法不传参不加括号时，会自动调用浏览器产生的event对象
console.log(event);
},
cli0(val,event) {
//@click="cli0(123,$event)" 当需要调用浏览器的event对象又需要传参时。event+$符号
console.log(val);
con``sole.log(event);
},
3 v-model实现数据双向绑定的原理
v-model实现数据双向绑定的原理： v-model实际上使得vue做了两步操作：
1.v-bind model—>view
2,input的特有监听事件@input view—>model
<input type="text" v-model="message">
<input type="text" v-bind:value='message' @input="message = $event.target.value">
4 data() { return {} }
为什么vue在设计的时候data是一个函数，而不是直接一个对象？
因为对象return的是同一片内存空间。这样会导致组件在复用时，所有复用组件使用同一片内存地址。导致数据紊乱。
data必须是一个函数。每调用一个组件实例，就会调用一个data函数。而函数return的是一片新的内存地址。这样使得所有复用的组件之间互不影响。
组件化开发：========
5 父子组件之间传值
++ 4.1 父组件向子组件中传值：
props:['变量1','变量2','变量3'];//最基础的写法，数组类型，不推荐
props:{//对象类型，推荐。可以对传过来的值进行类型审核和简单验证，同时也方便阅读和简单维护
propA:Number,//基础的类型检查
propB:[String,Number],//多个可能的类型
propC:{//必填的字符串
type: String,
required:true
},
propD:{//带默认值的数字类型
type:Number,
default:100
},
propE:{//带默认值的对象
type:Object,
default:function() {//Object or Array的默认值是一个函数
return { msg:'hi' }
}
},
propF:{//自定义验证函数
validator:function(value) {
//这个值必须匹配下列字符串中的一个
return ['','',''].indexOf(value) !== -1;//返回值true or false
//arr.indexOf(item) 判断数组arr中是否包含元素item。如果不包含则返回-1
}
}
}
++ 4.2 子组件向父组件传值：
在子组件中使用this.$emit(‘func’,value)
在父组件调用子组件时:
<son @func="sonhappen"/>
methods:{
sonhappen(value) {
//注意，父组件中此处接收的值都是string类型。
console.log(value)
}
}
6 父子组件之间的访问
++父组件直接访问子组件：
this. c h i l d r e n ： 数 组 类 型 一 般 不 使 用 children： 数组类型 一般不使用 children：数组类型一般不使用children来拿子组件数据。而是使用 r e f s 可 以 访 问 父 组 件 的 所 有 子 组 件 对 象 ， 包 括 子 组 件 的 子 组 件 ； 可 以 访 问 子 组 件 的 所 有 数 据 。 t h i s . refs 可以访问父组件的所有子组件对象，包括子组件的子组件；可以访问子组件的所有数据。 this. refs可以访问父组件的所有子组件对象，包括子组件的子组件；可以访问子组件的所有数据。this.refs: 对象类型 好像行不通啊？？
this.$refs.name可以访问到son子组件的所有数据。name会作为子组件对象的key值。
++子组件访问父组件：
this. p a r e n t ： 可 以 在 子 组 件 中 访 问 到 父 组 件 对 象 。 一 般 开 发 中 不 使 用 。 会 影 响 组 件 的 独 立 性 。 t h i s . parent：可以在子组件中访问到父组件对象。一般开发中不使用。会影响组件的独立性。 this. parent：可以在子组件中访问到父组件对象。一般开发中不使用。会影响组件的独立性。this.root：可以在子组件中访问根组件即vue实例对象
7 v-bind
v-bind不支持驼峰写法
v-bind:cInfo=“info” 这样写会出现值传递失败的情况 需要改成v-bind:c-info=“info”
8 计算属性
计算属性存在缓存。在多次调用时，由于存在缓存，只会执行一次。
与methods的区别：methods调用几次执行几次
9 插槽 slot
插槽的作用：为了让组件具有可扩展性。
9.1基本插槽的使用：
在自定义的组件中使用。可以在插槽内填入默认内容。
在引用组件时，可以在组件内直接填入内容。就可以替换子组件内插槽的默认内容。
9.2具名插槽的使用：
一个子组件内可能存在多个插槽，当引用子组件时，可能只希望替换其中某一个插槽的内容。这时候就可以使用具名插槽。即给每个slot一个特有的name属性值。
在子组件中：
我要把son组件内的center插槽内容替换掉
9.3作用域插槽：
—有个需求：子组件中包含一个数组数据。需要在不同的位置进行展示。有的地方水平展示，有点地方纵列展示，有的位置直接显示一个数组。希望父组件告知子组件具体如何展示。
—以上需求就可以使用作用域插槽。展示数据由子组件提供。但展示方式由父组件决定。
—所以需要先在父组件中拿到子组件的数据：
1,在子组件中将子组件的数据绑定到abc： [abc可以随意更改成你喜欢的名字]
在son组件中：
子组件默认展示
2，在父组件中引用子组件son时，使用拿到子组件数据： slot.abc就是从子组件获取到的数据
10 this. r o u t e r t h i s . router this. routerthis.route
this. r o u t e r 指 的 时 n e w V u e 的 实 例 对 象 t h i s . router 指的时newVue的实例对象 this. router指的时newVue的实例对象this.router.push/this. r o u t e r . r e p l a c e t h i s . router.replace this. router.replacethis.route 指的是当前活跃状态下的路由对象
{ path:’/user/:abc’,component:user } this.$route.params.abc
11 所有的组件都继承自vue类的原型
所以通过Vue.prototype.自定义的方法和变量，整个vue项目中的所有组件都可以使用变量或方法
12 全局导航守卫
https://blog.csdn.net/qq_36545813/article/details/109510815
13 router-view是VueRouter的组件。
13 keep-alive是vue内置的组件，
可以使被包含的组件保留状态，或避免重新渲染；
被包裹在keep-alive里面的组件，所有路径匹配到的视图组件都会被缓存。
keep-alive有两个非常重要的属性，开发者可以自由定义哪些组件需要被缓存，哪些组件需要被重复创建和销毁【一般存在每次进入路由都需要重新更新的情况】
–inclue属性：只有相匹配的组件才会被缓存–字符串或正则
–exclue属性：任何相匹配的组件都不会被缓存–字符串或正则
比如app.vue下有a b c 3个组件，且全部都被keep-alive包裹，但我需要每次切换到组件C时都重新创建。
可以这样操作： c是组件的name值。如果需要排除多个组件，使用逗号分隔就好，需要注意的是不能多添加空格，否则会出错
使用vuex
npm i vuex -S
npm i es6-promise -S
使用码云gitee https://blog.csdn.net/qq_36545813/article/details/105673756
在码云新建仓库并第一次将本地代码提交
在控制台：
git comfig --global user.name ‘677’
git config --global user.email ‘[email protected]’
创建本地git仓库：
mkdir storename
cd storename
git init
touch READEME.md //注意：如果报错touch:无法将’touch’项识别为cmdlet… 安装touch :npm install touch-cli -g 安装后再执行touch READEME.md
git add READEME.md
git commit -m ‘first commit’
git remote add origin https://gitee.com/…
git push -u origin master
引用echarts图表
npm install echarts --save
在引用echarts的组件内import echarts from ‘echarts’
绘制一个图表：
1,准备一个具备宽高的容器：
2,通过echarts.init初始化一个echarts实例： var myPie = echarts.init(document.getElementById(‘pie’))
3,通过setOption方法生成图表：
var option = {}
myPie.setOption(option)
#Vuex中执行完mutations，更新了state后，视图不更新 vuex中state数据是异步渲染的。初始渲染的是state中的默认数据。在渲染时去获取三层表达式中的属性值，此时对象还不存在，获取不到值。这样就会造成，在界面上可以正常打印出值，但是
https://blog.csdn.net/edc3001/article/details/86833558
vue中实现移动拖拽 h5的drag & drop
参考：
- 事件参考：
- 事件理解和属性理解参考：
- 比较全面的理解：
- 给移动元素添加：
@dragstart="Dragstart($event,item)"
draggable="true"
* methods:{
Dragstart (event, item) {//@dragstart是html自带的mouseevent事件
console.log('===================dragstart');
console.log(event);//
console.log(item);
var infoJson = JSON.stringify(item.info);
event.dataTransfer.setData('my-info', infoJson);
}
}
-
dragstart、drag、dragenter、dragover、dragleave、drop、dragend属性
-
事件顺序：
-
dragstart -> drag -> dragenter -> dragover -> dragleave -> drop -> dragend
-
拖放事件
-
(默认图像,链接,文本是可以拖动的)
-
(别的元素要拖动首先设置draggable=“true”:对于draggable的支持ie10+,ie9-只能使用默认拖动)
-
- 被拖放元素拖放事件:
-
被拖放对象：dragstart：开始拖放的时候触发 -
被拖放对象：drag：在拖放过程中持续触发 -
经过对象：dragenter：拖放过程中鼠标经过的元素，被拖放的元素‘正开始’进入其他元素范围内 e.preventDefault() -
经过对象：dragover：拖放过程中鼠标经过的元素，被拖放的元素正在本元素范围内移动(一直) e.preventDefault() -
经过对象：dragleave：拖放过程中鼠标经过的元素，被拖放的元素离开本元素范围 -
目标地点：drop：拖放元素被放置到目标点的时候触发 -
被拖放对象：dragend：拖放操作结束时触发 -
- 拖放中的数据传递
-
a.在拖放数据的时候使用dataTransfer来存储和获取数据 -
b.存储数据:ev.dataTransfer.setData("类型","值") 类型通用有两种:"text/plain"和"text/url-list"(ie中使用"text"和"url") -
c.获取数据:ev.dataTransfer.getData("类型")类型同上 -
(获取数据是在目标对象的drop事件上获取在别的事件上都取不到) -
(注意设置document的dragover和dragend为return false否则获取不到数据) -
(目标有几层元素就会触发几次) -
- dropEffect和effectAllowed(这是dataTransfer的两个属性)
-
对于拖动元素而言在dragstart时设置effectAllowed不为none光标显示为指针而不是禁止标志 -
这两个属性的主要作用：用于设置拖拽过程中鼠标指针的类型。 -
4.dataTransfer属性:
-
a. clearData(format):清除特定格式的数据 -
b. setDragImg(elem,x,y):设置拖动的时候光标下面显示的图像,(x,y为光标在图像上的位置) -
(这个方法还是很好用的,但是不支持ie) -
dragenter 和 dragover需要阻止浏览器的默认事件。
*/
vue兄弟组件之间拖拽失败 尝试安装插件vuedraggable
http://www.itxst.com/vue-draggable/tutorial.html
- 因为拖拽组件依赖sortablejs ，如果项目没有安装sortablejs ，可能需要安装一下
- npm install sortablejs --save
- npm install vuedraggable --save
- 局部注册：
import draggable from ‘vuedraggable’
components:{
draggable
}, - ====================安装依赖后，dragenter生效 dragend生效 但drop无效
- 博客参考：https://www.cnblogs.com/birdshome/archive/2006/07/22/Drag_Drop.html#457694
事件参考：https://developer.mozilla.org/zh-CN/docs/Web/Events 资源事件/键盘事件/鼠标事件/拖放事件/媒体事件/进度事件/触摸事件/浏览器事件等 - drop事件参考：https://developer.mozilla.org/zh-CN/docs/Web/API/Document/drop_event
- https://developer.mozilla.org/zh-CN/docs/Web/API/DragEvent
- vuedragable插件功能实现拖拽都是操作Array or Object数据：
- @start
- @move
- @changed
- @end
- vuedragable插件：https://blog.csdn.net/qq_36545813/article/details/111468646
- https://blog.csdn.net/zjiang1994/article/details/79809687
- vue拖拽组件vuedragable-demo：http://www.ptbird.cn/vue-draggable-dragging.html
- https://sortablejs.github.io/Vue.Draggable/#/clone
- vue拖拽组件vuedragable-code：https://github.com/SortableJS/Vue.Draggable/blob/master/src
- vue拖拽插件。使用vuedraggle :思路
====开始拖拽时获取到相应组件名。在change时将组件名复制给component 的is属性 还是不可行
====通过json文件来定义组件信息，v-for循环组件信息，并通过事件获取当前组件信息。 - vuedraggable内部元素的click事件与@drop事件冲突问题：
参考：https://blog.csdn.net/qq_33270001/article/details/106264832
vue-draggable-resizable: vue3/vue2 可拖拽+调整大小+参考线+对齐吸附 基本所有组态功能这个插件里都有了
- vue2draggableresizable :https://github.com/gorkys/vue-draggable-resizable-gorkys
- https://tingtas.com/vue-draggable-resizable-gorkys/?path=/story/%E5%9F%BA%E6%9C%AC–%E7%A6%81%E6%AD%A2%E5%81%9C%E7%94%A8%E7%9A%84%E5%9F%BA%E6%9C%AC%E7%BB%84%E4%BB%B6
- 博客园文档参考连接：https://www.cnblogs.com/wangweizhang/p/11241788.html
- 组件事件git连接：https://github.com/gorkys/vue-draggable-resizable-gorkys/blob/master/README_ZH.md
- demo: https://tingtas.com/vue-draggable-resizable-gorkys/?path=/story/%E5%9F%BA%E6%9C%AC–%E5%9F%BA%E6%9C%AC%E7%BB%84%E4%BB%B6
- https://blog.csdn.net/ksyjy/article/details/105294894
- npm install vue-draggable-resizable --save
- 在main.js引入：全局
import VueDraggableResizable from ‘vue-draggable-resizable’
import ‘vue-draggable-resizable/dist/VueDraggableResizable.css’
Vue.component(‘vue-draggable-resizable’,VueDraggableResizable) - 局部引入：
import VueDraggableResizable from ‘vue-draggable-resizable’
import ‘vue-draggable-resizable/dist/VueDraggableResizable.css’ - 常用属性总结：
https://github.com/gorkys/vue-draggable-resizable-gorkys/blob/master/README_ZH.md#props - :lock-aspect-ratio=“true” 保持拖拽组件的宽高比
- :parent=“true” 限制不能拖出父元素
- parent=".p-event" 限制不能拖出类名为p-event的元素
- :active= “true/false” 通过active来自主控制盒子是否为选中状态
- :prevent-deactivation=“true/false” 通过该属性来定义点击对象外是否需要取消选中状态
- https://www.npmjs.com/package/vue-draggable-resizable-gorkys
- 吸附对齐，辅助线，冲突检查等功能需要在插件vue-draggable-resizable-gorkys中才有 ,这个插件是上面插件的升级
- npm install --save vue-draggable-resizable-gorkys
- 局部引入：
import vdr from ‘vue-draggable-resizable-gorkys’
import ‘vue-draggable-resizable-gorkys/dist/VueDraggableResizable.css’ - :isConflictCheck=“true” 冲突检查
- 元素对齐辅助线：
:debug=“false” 啥意思？
:snap=“true” 定义组件是否开启元素对齐
:snapTolerance=“20” 吸附 当调用snap时，定义组件与元素之间的对齐距离，以像素(px)为单位
@refLineParams=“getRefLineParams”
:referenceLineColor="#0f0" 辅助线的颜色
-
- :grid=[20,20] 盒子内的目标具有偏移
grid表示水平和垂直轴上移动时，每次能走多少像素 - :axis=“axis” 表示沿X轴/y轴移动 值：x/y/both
- @activated=“onActivated” 单击时调用 ，以显示句柄
- @deactivated=“onDeactivated” 单击组件外的任何位置时调用。
- :enable-native-drag=“false” 禁用浏览器的本机拖放功能（通常用于图像和其他一些元素），恢复使用true
- :active.sync=“true” 确定组件是否应处于活动状态
- :draggable=“false” 定义该组件是否可拖拽
- :resizable=“false” 默认true
- class-name-active=“active” 用来定义活跃状态 css: .active{}
以上属性发现：即使不设置class-name-active=“active”，有css: .active{} 就行
vue 分割页面布局 用户可自定义拖拽改变：vue-splitpane
- https://antoniandre.github.io/splitpanes/
- npm i splitpanes # For Vue 2.x.
- npm i splitpanes@next # For Vue 3.
- // In your Vue component.
- import { Splitpanes, Pane } from ‘splitpanes’
- import ‘splitpanes/dist/splitpanes.css’
- export default {
- components: { Splitpanes, Pane },
- …
- }
#批量注册全局方法
- 定义全局方法 https://www.cnblogs.com/conglvse/p/10062449.html
- 在main.js引入：import globalmethods from ‘url’ Vue.use(globalmethods)
- 在所有组件中通过this.function调用
使用extends继承其他组件 extends可以继承多个吗？
- 不可以，是单继承。
- 在canvas绑定拖拽事件：需要在viewcanvas绑定 在组件内部的canvas标签上也要绑定 否则不生效 这样生效的效果是：两个canvas都会同时移动。若要一个canvas对应一个盒子的画。那不能公用一块画布了。
- 调整了canvas文件结构。使用一个页面用来作画布，再使用一个页面专门用来作画笔–即实现canvas的具体方法。详见代码leftPanel的canvas文件夹。
自己封装组件。可以通过{{ keydata }}和props:{keydata:{}}，在引用封装组件时直接通过这种书写方式来使用：
使用bootstrapvue https://bootstrap-vue.org/docs
- npm install bootstrap-vue bootstrap
- 在mani.js文件中：
- import Vue from ‘vue’
- import { BootstrapVue, IconsPlugin } from ‘bootstrap-vue’
- // Install BootstrapVue
- Vue.use(BootstrapVue)
- // Optionally install the BootstrapVue icon components plugin
- Vue.use(IconsPlugin)
- import ‘bootstrap/dist/css/bootstrap.css’
- import ‘bootstrap-vue/dist/bootstrap-vue.css’
vue封装js文件
https://www.cnblogs.com/yanl55555/p/12543993.html
Math
- Math.floor(Math.random() * (max-min + 1) + min) 生成区间在[min,max]之间的随机数
对侧边栏实现拖拽的内容进行组件封装
如何让子组件宽度撑满父容器
vue: Initialize failed: invalid dom 之 dom加载出现的问题
- 问题解决的参加博客：https://blog.csdn.net/smalCat/article/details/89091966?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromBaidu-1.control&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromBaidu-1.control
- promise了解: https://blog.csdn.net/qq_36545813/article/details/110121219
- 导致问题的原因：异步加载。当echarts.init()去初始化的时候，此时DOM还没加载，echarts没有检测到DOM。所以此问题的解决方向让DOM加载后再去init()。可以通过promise异步，读写分离。
- 我认为还可以使用 this. n e x t T i c k ( ( ) = > ) 表 示 当 D O M 加 载 完 成 时 再 去 执 行 。 但 使 用 p r o m i s e 和 nextTick(() => { }) 表示当DOM加载完成时再去执行。但使用promise和 nextTick(()=>)表示当DOM加载完成时再去执行。但使用promise和nextTick后依然报错。=====所以一下没有新的解题思路了。？？？？？？ 在画canvas的时候也遇到document.getElementById为null的问题，原因也是DOM未加载就去引用。解决方式使用this.$nextTick()是成功的。
所以这里的echarts初始化应该是其他问题。待研究。
键盘事件： https://www.cnblogs.com/eAndyLau/p/12916891.html
- delete：
- created () {
-
document.onkeydown = (e) => { -
let key = window.event.keyCode; -
if(key == 46|| key == 8) {// delete||backspace -
alert('删除canvas') -
let id = this.selectedid; -
console.log(id); -
const targetcanvas = document.getElementById(id); -
targetcanvas.remove();//删除元素 -
} -
} - }
- CV事件：
- (e.keyCode == 67 && e.ctrlKey) ctrl+c
- if(e.keyCode==86 && e.ctrlKey){
- alert(“按下了Ctrl+V 键”)
- }
- CS / CZ /CN
e.keyCode == 83 && e.ctrlKey -> Ctrl + S
e.keyCode == 90 && e.ctrlKey -> Ctrl + Z
e.keyCOde == 79 && e.ctrlKey -> Ctrl + N
怎么实现，拖拽进来多少个canvas对象，centertest就生成相应多个canvas呢？而不是像目前一样使用一个canvas标签，通过拖拽的目标对象给canvas的id动态赋值：
- 想到一个解决方法：centertest默认data为空，每拖拽进来一个对象，就相应push一条数据进去。根据数据，去动态渲染页面。动态控制html标签。
- 动态push数据，可以使用vuedragable组件自带的事件。===push成功了，但左侧的图标却会消失[原因是：dragable的list属性值和icon渲染的数据为同一条数据，当拖拽后remove一条数据，渲染icon的组件的数据也会减少。处理方法：定义一个空数组，将icon数据全部赋值给它，然后操作这个数组数据，就不会互相影响了]。
- 使用拖拽插件动态push数据不太可行，push数据的内容是插件自带的封装好的数据，自定义的话反而式代码和逻辑都变得更加麻烦。只要在centertest.vue中，将每一个拖拽过来的当前mes数据进行组合就好了啊！真笨呢在这折腾了大半天
- 动态push数据后，可以遍历数据生成多个canvas，然后给每个canvas绑定拖拽事件。键盘删除事件，单击双击事件。[根据动态数据渲染生成多个canvas时，每个canvas对应一个唯一ID，那么每个icon图标只能拖拽画一次canvas，否则无效，按说应该会报错，结果页面会生成ID同名的多个canvas，但不会再生成图像。这个问题怎么解决呢？==========虽然每个图标对应一个id，可每拖拽一次，可以给传进来的数据的id值添加索引号。这样就能保证id具有唯一性。再通过getElementId(ID)获取el画布。]
- [生成的canvas盒子宽高即需要画的图的宽高。而图像的x,y坐标是相对当前画布canvas，新的canvas的坐标应该是画布相对于main盒子的定位？这个问题需要解决。解决完了，再绑定事件。]====但是坐标的相对定位元素是canvas的绘图方法规定的。根据这一点，应该让所有的图都画在一个canvas内。这样才能实现正确的定位。或者，在drop的时候，给canvas定位到相应位置。但自己手写js实现定位，需要用到position，会使得页面发生重绘回流，非常笨重。使用拖拽事件来控制canvas坐标呢？
- 也可以通过@mousedown获取到当前目标对象的数据信息，显示在右侧侧边栏。然后可以进行样式修改，修改后即时更新数据信息。实现右侧侧边栏可以控制每个目标的样式信息。
- 进行此操作前可能代码需要一些大的调整，先git保存一份代码。
对象转数组 ES6 Object.func()用法：
- https://www.cnblogs.com/ll15888/p/11993334.html。
- Object.values(obj)，Object.keys(obj)，Object.entries(obj)，for in循环。
- Object.assign() 合并对象：
举例： const data = Object.assign({},jsonIcons) //深拷贝jsonIcons数据
this.icondata.push(data)
数组转对象：
判断字符串中是否包含某个子串
- https://www.cnblogs.com/zhangliang88/p/10644398.html
- str.indexOf(“3”) != -1 ; // true 不等于-1表示包含
截取字符串中某个特定字符之前的子字符串/之后的子字符串
str_before = string.split(str)[0]
str_after = string.split(str)[1]
获取字符串末尾的一个字符
string.charAt(string.length-1)
判断两个字符串是否相等 ？
- https://www.jb51.net/article/154827.htm
- “==”判断的是两个字符串的值是否相等：
比如：“123” == 123 一个是字符串，一个是整型，结果为true
==只判断值是否相等，当数据类型不相等时，会进行自动类型转换。 - “===”恒等操作符，数据类型和值都会进行比较。
比如：“123”=123 第一步先比较类型，直接false
“123”=“123” true
深拷贝浅拷贝： https://www.jianshu.com/p/1c142ec2ca45
- 浅拷贝：拷贝的是指针地址，通过指针地址去查找对象，指向同一个内存地址。如果修改对象数据，另一个指向该指针地址的数据也会发生改变。
- 深拷贝：修改拷贝的数据不会影响原数据。深拷贝针对较为复杂的object类型数据。
- 实现深拷贝：
- 通过JSON对象实现深拷贝：[无法实现对对象中方法的深拷贝，会显示undefined]
- JSON.parse(JSON.stringify({}))
let str = JSON.stringify(obj) 将对象转字符串
let ojbclone = JSON.parse(str) 将字符串转对象 - Object.assign({},jsonIcons) 无效深拷贝
- JSON.parse(JSON.stringify({}))
- 通过JSON对象实现深拷贝：[无法实现对对象中方法的深拷贝，会显示undefined]
设置除数后保留两位小数：
x = y = (boxstyle.circleR / 2).toFixed(2);//除以2保留2位小数
获取鼠标在main面板的坐标： clienxX,offsetLeft… http://c.biancheng.net/view/5960.html
https://www.jb51.net/article/55128.htm
const el = document.getElementById(‘main’);//拿到mian盒子的左上角坐标。
this.x = e.clientX - el.offsetLeft;
this.y = e.clientY - el.offsetTop;//这就是生成的canvas盒于main盒子的坐标啦！
CSS 子元素铺满整个父元素/让子元素的宽高随着父元素的宽高缩放：
通过js给DOM元素添加一个类名：
- DOM.setAttribute(“class”,“类名”) 该方法会覆盖原有的类名
- DOM.classList.add(‘类名’) 不会覆盖原有类名 只是添加。
ant_design_vue的下载和使用：
- 思否文章：https://segmentfault.com/a/1190000037556136
- 官网地址https://www.antdv.com/docs/vue/introduce-cn/
computed监听Vuex中state对象中的对象属性时，监听不生效的问题 mutations
- https://blog.csdn.net/aliven1/article/details/100581529
清空canvas画布!!
- canvas.setAttribute(‘height’,0) 重置canvas的宽高，https://blog.csdn.net/Rainbow1995/article/details/94649695
怎么清除画布中的某个图像
- el.getContext(‘2d’).clearRect(x, y, 50, 50)//从坐标x,y开始，擦除一块长宽未50的矩形面积
删除元素节点：
- DOM.remove()
项目中实现，选中一个对象，改变侧边栏数据，让选中对象的样式发生变化的思路：
1，当侧边栏数据发生变化并提交表单时，传递表单数据。
2，在center页面监听数据的变化。并给监听属性添加deep:true。保证数据对象内的任意属性值发生变化都会触发事件监听。监听事件触发的条件有两点：对象被选中【可以在点击选中对象时获取对象id。监听时判断是否有id】；侧边栏数据更新后发生了提交【在提交事件中记录标记sub:true】。
3，
- 以上操作会出现的bug。当选中对象，提交修改过一次数据后，再次更新侧边栏，不需要提交就会直接触发监听。因为watch具有缓存功能，并且数据对象内任意属性值发生变化都会触发监听，所以有了缓存之后，不需要提交也会触发监听。
- 解决方法：在右侧边栏监听表单数据。当表单数据任意属性值发生变化时，传递表单数据并记录一个标记sub:false。当center页面触发监听后，判断sub是否为ture。为false则说明本次触发未经过提交事件，为无效触发。
watch，监听对象内的属性值的变化： https://www.cnblogs.com/my466879168/p/12430648.html
- watch:{
-
item:{ -
handler:function(newval) { -
console.log(newval); -
}, -
deep:true//修改item对象内的任何一个属性，都会触发item的监听。 -
} - }
获取鼠标距离事件源左上角的坐标
1，获取鼠标坐标。page/client
2，获取事件源的左上角坐标。//offsetLeft
3，相减就是鼠标距离事件源左上角的坐标。
通过id获取元素宽高：
document.getElementById(’’).clientWidth/clientHeight
js遍历键值对数组：
[0,{},1:{}] => [{},{}] ?
Object.assign({},data)
Object.values() 获取对象键值对中的value组成数组 Object.keys()
arr.push()
let i in arr
删除数组中的元素
获取到id，document.getElementById为null。
classList:
- DOM元素对象，该属性用于在元素中添加，移除和切换类。
- classList.add() classList.remove()
判断字符串中是否包含数字
hadNumber(str) {//判断字符串中是否包含数字
for(let i in str) {
let asc = str.charCodeAt(i);
if(asc >= 48 && asc <= 57) {//表示包含数字
return true;
}
}
return false;//不包含数字
},
删除字符串中的数字：
delNumber(str) {//删除字符串中数字返回新字符串
for(let i in str) {
let asc = str.charCodeAt(i);
if(asc >= 48 && asc <= 57) {//表示包含数字
let needdel = str.charAt(i);//获取索引处的字符
console.log(needdel);
str = str.replace(needdel,'');
}
}
console.log(str);
return str;
},
arr.map() 遍历数组,不改变原始数组数据
const newdata = arr.map((element,index) => { //map遍历数组对每个元素进行处理，返回新元素组成的数组。
// console.log(element);
element.canvasid += ''+index;
return element;
});
点击目标div以外区域将目标div隐藏:
https://www.cnblogs.com/mica/p/11276447.html
判断dom1是否包含在dom2元素内
document.getElementById(id).contains(e.target)
背景纹理填充：？
判断obj {} 对象中是否包含某个属性
https://blog.csdn.net/u012746918/article/details/106359881/
- obj.hasOwnProperty(‘x’) 返回布尔值
比如：
let obj = {x,y}
var bool = obj.hasOwnProperty(‘x’);//bool->true - obj.x != undefined obj存在属性x则返回true 。不存在则返回false
[该方法存在一个弊端，如果属性的值为undefined，不能返回想要的结果] - if(‘x’ in obj) 相当于if(true/false)
拖拽组态开发功能原理分析：
https://juejin.cn/post/6908502083075325959
项目搭建和功能完成都差不多了我才看到这个文档。非常有用，可作为文档参考加深印象或者优化项目。
js判断obj对象是否为空 {}
Object.keys(lbj).length==0 为空
vue 自定义路径别名 @
- 创建vue.config.js,和package.json同层级
- const path = require(‘path’)
const resolve = dir => path.join(__dirname, dir)
module.exports = {
baseUrl: ‘./’,
runtimeCompiler: true,
chainWebpack: config => {
config.resolve.alias
.set(’@’, resolve(‘src’))
}
} - 重启项目
动画绑定。
动画库 Animate.css https://animate.style/ ？
-1,插件: 本项目中使用animate.css插件
- npm install animate.css --save
- import animated from ‘animate.css’
Vue.use(animated) -
An animated element
-2,vue自带的动画效果： transition
- component is用来动态切换组件，通过mode属性可以设置切换时动画。将id为comName的组件放到对应位置
- transition 是vue用来提供动画效果的组件。
-3,css实现动画效果：
- @keyframes js控制动画效果。document.styleSheets insertRule()
- css自定义属性/css变量。通过js改变css自定义属性值 https://www.cnblogs.com/hzz-/p/ 11464767.html
1 const vh = document.documentElement.clientHeight;
2 document.documentElement.style.setProperty(’–view-height’, vh+‘px’);
transform translate @keyframes
//怎么实现动态画矩形？ js改变css自定义属性
//animation: gif 5s infinite;
// document.getElementById(this.hiddendata.id).style.setProperty(’–view-width’, instanceX);
// document.getElementById(this.hiddendata.id).style.setProperty(’–view-height’, instanceY);
// document.getElementById(this.hiddendata.id).style.animation = “gif 5s infinite”;
动画绑定实现原理：
1，用一个文件来打包动画需要用到的动画效果数据。
本项目中使用的是animate.css。可去官网查看动画演示效果，以及获取相关动画属性。
2，先将所有动画在遮罩层【本项目中使用的标签是抽屉】中渲染出来。先实现悬浮时触发动画。
只需要使用悬浮事件,改变类名。给任意元素添加移除animatename即可添加或移除动画效果
@mouseover=“hoverAnimate = animatename”
:class="[hoverAnimate === animatename?‘animate__’+animatename:’’]"
3，第三步，点击某个动画效果时，将该动画效果绑定到相应组件。即改变相应组件的class。
4，动画效果预览。点击相应动画的预览效果时，将相应动画与相关组件绑定。
事件绑定。原理和动画绑定类似。
1，用一个文件来存储事件需要的数据
2，使用遮罩层来进一步控制交互效果。让用户输入事件的参数信息。当用户点击确定按钮时
3，通过用户的点击事件触发。给相应组件绑定相关的事件监听。
4，事件预览：在对象选中的情况下，选择单个事件时，对相关对象进行事件监听和事件解绑。
vue中通过transition使用通过。并在vue中使用Animate.css动画库：
-
1：
@keyframs name {
0% {}
50% {}
100 % {}
}
.fade-enter-active {
transform-origin: left center;
animation: name 1s;
}
.fade-leave-active {
transform-origin: left center;
animation: name 1s reverse;
}
-
2:使用Animate.css库和transition结合：
-
npm install animate.css --save
import animated from ‘animate.css’
Vue.use(animated) -
appear:表示第一次显示时有动画效果。
appear-active-class：用于在组件第一次显示时展示动画效果
enter-active-class：入场动画 必须有animated
leave-active-class：出场动画 必须有animated
duration:自定义动画执行的总时长
还可以分别定义入场和出场动画的时长:duration="{enter:5000,leave:1000}"
:duration=“5000”
enter-active-class=“animated 自定义添加入场动画”
leave-active-class=“animated 自定义添加出场动画”
apear
appear-active-class=“animated 自定义添加入场动画”
@berfore-enter=“handleBeforeEnter”
@enter=“handleEnter”
@before-leave=""
@leave=""
@after-leave=""组件methods:{
handleBeforeEnter: el => {
el.style.color = ‘red’;
},
handleEnter: (el,done) => {//el指动画transition包裹的标签
setTimeout(()=>{
el.style.color = ‘green’;
done();//手动结束动画 不可省略 done()被调用后，会执行afterEnter()
},2000)
},
handleAfterEnter: el => {//结束时动画
el.style.color = ‘black’;
}
}
-
在vue中使用velocity.js动画库
文档：http://shouce.jb51.net/velocity/index.html
下载：npm install velocity-animate
vue动画封装：
监听mac下的键盘按键：
1，使用git工具： 弃用
- https://github.com/madrobby/keymaster
- main.js引入
import keymaster from ‘./utils/keymaster.js’
Vue.use(keymaster) - 组件中使用：keymaster(‘⌘+r’,()=>{})
2，⭐e.metaKey为布尔值,如果按下的是⌘就返回true。按其他键返回false。等同于e.ctrlKey的true表示键盘按下ctrl键。
用户自定义控制组件的选中状态 vuedraggableresizable插件的:active属性
vue mixins和extends的区别：
https://blog.csdn.net/guoweifeng0012/article/details/87922312
- mixins可以理解为多继承，extends可以理解为单继承。extends一般用来继承.vue文件，且只能继承一个组件。
- 结论: 优先调用mixins和extends继承的父类，extends触发的优先级更高
- push(extend, mixin1, minxin2, 本身的钩子函数)
- import component_test from ‘…/Func/myFunc’
data() {},
watch:{},
extends:component_test,
methods:{}
//component_test组件内的this就是当前extends位置的组件的this。
事件修饰符：
.stop 阻止事件冒泡。
.self 让事件只在本身元素上触发
使用场景：阻止子元素的点击事件冒泡到父元素。当点击子元素时 ，子元素在父元素内，也相当于点击了父元素。而self确保事件只在子元素上触发
事件监听
- https://www.cnblogs.com/fpcbk/p/10112385.html
addEventListener
- elementObject.addEventListener(eventName,handle,useCapture)
事件监听传递参数
DOM.addEventListener(‘click’,eventHandler.call(this,evt),false);//addEventListener(‘click’,fn,false)
//eventHandler.call(this,evt) 改变eventHandler函数内的this指向，并传入参数evt
function eventHandler(evt) {
console.log(this);
console.log(evt);
}
js判断两个数哪个更大哪个更小 https://www.cnblogs.com/my12-28/p/11815579.html
Math.min(start.x,end,x)
Math.max(start.x,end,x)
js截取字符串’-'前/后的子字符串
str.split(’-’)[1] 表示截取str字符串-后的子串
比如button-11 str.split(’-’)[1]表示’11’ str.split(’-’)[0]表示’button’
实现鼠标全选：
- 框选范围内的对象。鼠标按下并移动时，动态画矩形。
- 鼠标弹起时，如果框选范围内有对象，显示矩形，并使区域内所有对象表现为选中状态；
- 鼠标弹起时，如果框选范围内无对象，矩形宽高值置0，div隐藏。
- 当点击框选矩形外区域时，矩形宽高置0，div隐藏。表现为选中状态的对象们都取消选中。
- 当单击框选范围内单个对象时，其他对象取消选中状态，框选矩形置0且隐藏。
- 当点击框选矩形范围内空白区域并移动时，矩形和矩形区域内所有对象跟随鼠标移动。
for循环和闭包。闭包函数会在for循环结束后才执行。假如闭包写在循环内，怎样才能实现循环依次执行依次闭包？
js给同一DOM同时绑定单击和双击事件的解决方案。
- 参考：https://www.hangge.com/blog/cache/detail_1794.html
- 理解：原生js单击和双击存在冲突，不能同时触发。双击相当于在简短时间内连续单击。因此同时时间间隔来判断调用单击还是双击。
使用模板字面量 vvv ，来拼接字符串和对象，还可以引入表达式，也支持换行
this. m e s s a g e . e r r o r ( “ 该 对 象 已 绑 定 ” + e v t . l a b e l + “ ， 请 勿 重 复 绑 定 ” ) ; t h i s . message.error(“该对象已绑定”+evt.label+“，请勿重复绑定”); this. message.error(“该对象已绑定”+evt.label+“，请勿重复绑定”);this.message.error(该对象已绑定“${evt.label}”，请勿重复绑定);
event.preventDefault() 通知浏览器不要执行于事件相关联的默认动作
event.stopPropagation() 阻止事件冒泡
如何实现echarts宽高自适应 随着盒子的resize而改变大小
vue this.$refs
如何在json文件中引用另一个json文件
js 取绝对值
Math.abs(-1); //1
Math.abs(-2); //2
vue 监听watch：
- 监听对象的所有属性：
watch: {
obj: {
handler: function() {
//do something
},
deep: true
}
} - 监听对象的某个属性：
watch: {
‘obj.name’: {
handler: function() {
//do something
},
}
}
echarts图表自适应
该方法是在页面已经存在图表的情况下。
let opt=myChart.getOption();
myChart.clear();
myChart.resize({height:“500px”,width:“500px”});
myChart.setOption(opt);
echarts//避免控制台警告：There is a chart instance already initialized on the dom.
https://blog.csdn.net/qq_26477073/article/details/84568668
let myEchart;//全局变量
if (myEchart != null && myEchart != “” && myEchart != undefined) {
myEchart.dispose();//销毁
}
vue+webpack项目动态设置页面title的方法
https://blog.csdn.net/weixin_42333548/article/details/103626427
vue如何将组件内容保存为html页面
- 1：点击预览时，获取center的innerHTML。
在预览位置将获取的innerHTML设置为自己本身的innerHTML
点击保存时，弹出下载窗口，指定将文件保存为html格式。 - 2：通过 https://blog.csdn.net/sangjinchao/article/details/70888259：
保存为html跳转和传参。在center页点击跳转到center页。并重新赋值centerdata。让页面重新渲染
js 如何弹出下载窗口
如何实现保存html
vue导出为pdf：
https://blog.csdn.net/SpringRolls/article/details/108105014
https://blog.csdn.net/u012732909/article/details/108124313
- 将html页面转换成图片
npm install --save html2canvas
将图片生成pdf
npm install jspdf --save
将vue文件分离成html、css、js多个文件
vue下载文件保存到本地：
参考链接：https://blog.csdn.net/txp1993/article/details/70046443/
最推荐这个链接了：看一遍更加深入理解：https://www.cnblogs.com/liuxianan/p/js-download.html
vue中写全局js文件的写法：
1，//js文件
export default{
install (Vue) {
//将getPdf定义为全局方法
Vue.prototype.getPdf = () => {
}
}
}
2，在main.js文件中引入：
import htmlToPdf from ‘@/utils/htmlToPdf’
Vue.use(htmlToPdf)
3，在其他任何位置直接通过函数名调用全局方法
鼠标右键：
@contextmenu=“rightclick”
rightclick() {
// console.log(‘单击了鼠标右键’);
},
translate 和rotate组合使用的问题：https://blog.csdn.net/hellokingqwe/article/details/52602315
translate平移，rote绕几何中心旋转。旋转后，坐标轴会发生变化。此时translate平移所参考的坐标轴就是新坐标轴了。
如何解决组合使用问题呢？
:style="{
‘transform’:‘translate(’+item.info.form.box.left+‘px,’+item.info.form.box.top+‘px) rotate(’+item.info.form.box.rotate+‘deg)’
}"
判断鼠标是否点击在某个对象或者点击在某个区域内或者区域外？
let tag = window.event.target || window.event.srcElement;
tag.tagName.toLowerCase()==‘body’
document.getElementById(‘dragendarea’).contains(tag) 返回true / false //判断鼠标是否点击在#dragendarea区域内
改变this指向 fn.call()
https://www.cnblogs.com/hjson/p/10254555.html
通过this生成modal对话框 https://www.antdv.com/components/modal-cn/
https://cn.vuejs.org/v2/guide/render-function.html
const h = this. c r e a t e E l e m e n t ; / / v u e 的 c r e a t e E l e m e n t 函 数 c o n s t h = t h i s . createElement;//vue的createElement函数 const h = this. createElement;//vue的createElement函数consth=this.createElement;
const content = h(‘div’,{},[
h(‘a-input’,{
attrs:{
placeholder,
value:’’,
id:‘input_url’
}
// nativeOn:{//用于监听原生事件
// pressEnter: onOk()//希望回车能执行onOk
// }
})
]);
this.$confirm({
title: ‘请输入跳转路径’,
content:content,
okText: ‘确认’,
cancelText: ‘取消’,
onOk() {},
onCancel() {}
});
-
怎么获取到自己创建的input内的数据呢？
document.getElementById(’?’).value -
如果content是input标签，怎么实现input回车时关闭modal呢。即使用回车事件代替onOk()事件。
js事件穿透
document.getElementById(item.newid).style = ‘pointer-events:none’;//设置事件穿透；
setTimeout( ()=> {//半秒钟之后，恢复不穿透状态
// document.getElementById(item.newid).style = ‘pointer-events:auto’;
// },500)
已实现：
1，拖拽效果，鼠标按下，出现一个半透明对象，跟随鼠标拖动。draggable功能自带。
2，移动和resize效果。插件vuedraggableresizable。
3，键盘del键删除选中的单个对象。 DOM事件。和数据处理 arr.splice(index,1)
4，选中对象，ctrl+c,ctrl+v 。复制粘贴选中对象。并指定粘贴位置。 dom事件。arr.push()
5，移动对象。改变坐标。
6，改变选中对象样式。选中时获取对象样式，侧边栏数据也随着对象的切换而变化。侧边栏修改单个样式直接修改对象的样式显示效果。
7，撤回上一步操作。撤回cv。撤回删除。撤回新增。撤回移动。撤回resize。—？还没有撤回样式修改的功能【比如改变了颜色和border等，撤回】。
剩余实现：鼠标单击并拖拉，实现范围内选取对象。
1，选取范围内的对象，并获取到选取的所有对象信息，根据鼠标坐标，分别改变每个选取对象的坐标，实现整体移动的效果。并在选取区域形成一个border。⭐
2，单击选取范围内的单个对象，可对单个对象进行操作和样式修改。此时再拖拉整个选取区域，范围内对象不再整体移动，而是只移动border ⭐
3，选取范围内对象后，可以将对象整合成一个组件。？不明白具体实现的是什么。动态生成组件吗?
4，撤回样式修改。
5，生成html。
6，预览。
7，保存。
8，编辑。
9，绑定事件。
10，绑定动画。
11，触发mac的键盘监听控制事件。⭐
12，alert弹窗改为ant-vue弹窗。 ⭐
=====================================
vue 3
vite: vue中用于替代webpack打包工具的工具
- npm install -g create-vite-app
- 利用vite创建项目：create-vite-app projectname
- cd projectname
- npm install
- npm run dev
Composition API和Option API
- vue3组合API–Composition API–setup()的理解：
- setup(){}函数是组合API的入口函数。
- 在组合API中定义的变量/方法，必须通过return {} 才能被外界使用
- setup()执行时机：
- setup：在setup中无法使用data和methods。所以在setup中打印this为undefined。无法使用
- befereCreate:data和methods还没有初始化好；
- created:组件刚刚被创建，data和methods已经初始化好；
- [setup函数只能是同步处理。]
- vue3中，可以通过直接定义function，并return {}，在setup函数中引用：let {func} = func() 并return {func}。这样做的好处是逻辑块非常清晰，数据的定义和获取，以及逻辑都可以写在一个function块内。this都不用了。
- Option API:vue2中的使用方式，比如有data(),有methods:{},watch:{},computed:{},生命周期函数等
- vue3可以Composition API和Option API混合使用。
函数监听：写在setup函数内
- reactive()：
* [实现响应式数据：通过ES6的proxy实现。将传入的数据包装成一个【Proxy对象】。【vue2中通过defineProperty实现】
* 监听复杂类型的变化【比如对象/数组】：import {reactive} from 'vue'> 监到数据发生变化，会即时响应到页面
* let data = reactive({
stus:[]
})
* 如果给reactive传递了其他对象：
- 默认情况下修改对象，界面不会响应更新
- 如果想更新，可以通过重新赋值的方式
setup() {
let state = reactive({
time: new Date()
});
function myfun () => {
const newtime = new Date(state.time.getTime());//创建一个新data对 象，和state.time值一样。
newtime.setDate(state.time.getDate() + 1);//给newtime的天数重设置 为time的天数+1
state.time = newtime;//对state.time重新赋值。这样，页面中显示的state.time就能实时响应了。
}
return {state,myfun};
}
- ref(): import {ref} from ‘vue’ 通过ref()可以将数据变成响应式数据
- 监听简单类型的变化：也可以监听【比如对象/数组】
- ref本质还是reactive,ref函数底层会自动将ref转成reactive：且在页面上{{age}}会自动添加.value
ref(18) -> reactive({value:18}) - 所以如果要修改ref的值：
let age = ref(18);
function myfun() {
//age = 666;这样修改不会在页面响应更新
age.value = 666;//这样可以响应式修改age
}
return {age,myfun};
- ref与reactive的区别：ref数据在页面上会自动添加.value属性。
- vue中存在isRef()和isReactive()函数，可以判断数据是否是ref/reactive 返回true/false
递归监听：每一层都可以监听子节点层对象。
- 默认情况下，ref和reactive都是递归监听。
- 弊端：如果数据量庞大，非常消耗性能。
非递归监听：只能监听第一层
- shallowReactive,shallowRef
- 如果使用非递归监听，必须对第一层进行处理，再修改第二层第三层等才会生效。如果不处理第一层，直接修改第二层，是无效操作。
- 如果只想修改第四层的数据并希望页面响应式更新呢？
使用triggerRef(state) 不存在triggerReactive()函数，如果是shallowReactive无法主动触发监听。
toRaw,markRow,toRef,toRefs,reactive,ref,等函数，都是用来进行性能优化的作用
- toRaw():如果有一些方法不需要实时更新页面，就可以通过toRaw函数拿到原始数据。
- 获取reactive响应式数据的原始数据： toRaw(state)
- 获取ref响应式数据的原始数据：toRaw(state.value)
- markRow(obj): 表示对象obj永远都不需要被追踪，不需要响应式修改。
- toRef(): 将某个对象中的数据变成响应式的数据。[修改数据会影响原始数据]。且修改数据[不会触发页面更新]。[引 用]。浅拷贝。
- ref()和toRef()的区别 ：
利用ref将某个对象中的属性变成响应式的数据，[修改响应式数据不会影响原始数据]。[复制]。深拷贝。[数据发生变化，界面会自动更新。] - toRef()应用场景：
如果想让响应式数据和以前的数据关联起来，并且更新数据不想更新页面，就可以使用toRef();
- ref()和toRef()的区别 ：
- toRefs(par1,par2): 只能接收两个参数
customeRef():通过customeRef允许用户自定义ref:返回一个ref对象，可以显式地控制依赖追踪和触发响应
- track()告诉vue数据需要追踪变化 trigger()告诉vue触发界面更新
readonly():用于创建只读数据，无法修改。递归只读，每一层都是只读的。
- shallowReadonly(),第一层只读
- isReadonly()
- readonly与const 的区别:const属于赋值保护，不允许给变量重新赋值，readonly属于属性保护，不能给属性重新赋值。
vue3中响应式数据的本质：
- vue3通过proxy实现： get() set() { return true;//set方法最后一步一定要return true，告诉vue操作成功了。 }
- vue2通过defineProperty实现：
typescript
ts定义：
ts是js的超级，包含了es6和es5的规范，适用于大型项目。浏览器无法识别。使用ts后，需要转es5，会自动转的。
npm install typescript -g tsc hello.ts–>会自动将ts转js
ts面向对象编程，编程语法有点类似Java欸
MongoDB
newnew: