\n {{ item.title }}\n
\n{{item.title}}
\n \n\n
\n如果条件出现在循环内部，可通过计算属性computed提前过滤掉那些不需要显示的项\ncomputed: {\n items: function() {\n return this.list.filter(function (item) {\n return item.isShow\n })\n }\n}", "tag": [ "vue3" ], "createTime": "2023-05-07T06:48:58.838Z" }, "status": 1, "createTime": "2023-05-07T06:48:58.853Z", "id": "clhd1zfmt000byxijduso5zdm" }, { "dataId": "clhd216a0000cyxij0dkj4lp9", "type": "add", "tableName": "qa", "data": { "id": "clhd216a0000cyxij0dkj4lp9", "question": "SPA（单页应用）首屏加载速度慢怎么解决 ", "answer": "一、什么是首屏加载\n首屏时间（First Contentful Paint），指的是浏览器从响应用户输入网址地址，到首屏内容渲染完成的时间，此时整个网页不一定要全部渲染完成，但需要展示当前视窗需要的内容\n\n首屏加载可以说是用户体验中最重要的环节\n\n关于计算首屏时间\n利用performance.timing提供的数据：\n\nimage.png\n\n通过DOMContentLoad或者performance来计算出首屏时间\n\n// 方案一：\ndocument.addEventListener('DOMContentLoaded', (event) => {\n console.log('first contentful painting');\n});\n// 方案二：\nperformance.getEntriesByName(\"first-contentful-paint\")[0].startTime\n\n// performance.getEntriesByName(\"first-contentful-paint\")[0]\n// 会返回一个 PerformancePaintTiming的实例，结构如下：\n{\n name: \"first-contentful-paint\",\n entryType: \"paint\",\n startTime: 507.80000002123415,\n duration: 0,\n};\n二、加载慢的原因\n在页面渲染的过程，导致加载速度慢的因素可能如下：\n\n网络延时问题\n资源文件体积是否过大\n资源是否重复发送请求去加载了\n加载脚本的时候，渲染内容堵塞了\n三、解决方案\n常见的几种SPA首屏优化方式\n\n减小入口文件积\n静态资源本地缓存\nUI框架按需加载\n图片资源的压缩\n组件重复打包\n开启GZip压缩\n使用SSR\n减小入口文件体积\n常用的手段是路由懒加载，把不同路由对应的组件分割成不同的代码块，待路由被请求的时候会单独打包路由，使得入口文件变小，加载速度大大增加\n\nimage.png\n\n在vue-router配置路由的时候，采用动态加载路由的形式\n\nroutes:[ \n path: 'Blogs',\n name: 'ShowBlogs',\n component: () => import('./components/ShowBlogs.vue')\n]\n以函数的形式加载路由，这样就可以把各自的路由文件分别打包，只有在解析给定的路由时，才会加载路由组件\n\n静态资源本地缓存\n后端返回资源问题：\n\n采用HTTP缓存，设置Cache-Control，Last-Modified，Etag等响应头\n\n采用Service Worker离线缓存\n\n前端合理利用localStorage\n\nUI框架按需加载\n在日常使用UI框架，例如element-UI、或者antd，我们经常性直接饮用整个UI库\n\nimport ElementUI from 'element-ui'\nVue.use(ElementUI)\n但实际上我用到的组件只有按钮，分页，表格，输入与警告 所以我们要按需引用\n\nimport { Button, Input, Pagination, Table, TableColumn, MessageBox } from 'element-ui';\nVue.use(Button)\nVue.use(Input)\nVue.use(Pagination)\n组件重复打包\n假设A.js文件是一个常用的库，现在有多个路由使用了A.js文件，这就造成了重复下载\n\n解决方案：在webpack的config文件中，修改CommonsChunkPlugin的配置\n\nminChunks: 3\nminChunks为3表示会把使用3次及以上的包抽离出来，放进公共依赖文件，避免了重复加载组件\n\n图片资源的压缩\n图片资源虽然不在编码过程中，但它却是对页面性能影响最大的因素\n\n对于所有的图片资源，我们可以进行适当的压缩\n\n对页面上使用到的icon，可以使用在线字体图标，或者雪碧图，将众多小图标合并到同一张图上，用以减轻http请求压力。\n\n开启GZip压缩\n拆完包之后，我们再用gzip做一下压缩 安装compression-webpack-plugin\n\ncnmp i compression-webpack-plugin -D\n在vue.congig.js中引入并修改webpack配置\n\nconst CompressionPlugin = require('compression-webpack-plugin')\n\nconfigureWebpack: (config) => {\n if (process.env.NODE_ENV === 'production') {\n // 为生产环境修改配置...\n config.mode = 'production'\n return {\n plugins: [new CompressionPlugin({\n test: /\\.js$|\\.html$|\\.css/, //匹配文件名\n threshold: 10240, //对超过10k的数据进行压缩\n deleteOriginalAssets: false //是否删除原文件\n })]\n }\n }\n在服务器我们也要做相应的配置 如果发送请求的浏览器支持gzip，就发送给它gzip格式的文件 我的服务器是用express框架搭建的 只要安装一下compression就能使用\n\nconst compression = require('compression')\napp.use(compression()) // 在其他中间件使用之前调用\n使用SSR\nSSR（Server side ），也就是服务端渲染，组件或页面通过服务器生成html字符串，再发送到浏览器\n\n从头搭建一个服务端渲染是很复杂的，vue应用建议使用Nuxt.js实现服务端渲染\n\n小结：\n减少首屏渲染时间的方法有很多，总的来讲可以分成两大部分 ：资源加载优化 和 页面渲染优化\n\n下图是更为全面的首屏优化的方案\n\nimage.png\n\n大家可以根据自己项目的情况选择各种方式进行首屏渲染的优化\n\n参考文献\nhttps://zhuanlan.zhihu.com/p/88639980?utm_source=wechat_session\nhttps://www.chengrang.com/how-browsers-work.html\nhttps://juejin.cn/post/6844904185264095246\nhttps://vue3js.cn/docs/zh", "tag": [ "vue3" ], "createTime": "2023-05-07T06:50:20.040Z" }, "status": 1, "createTime": "2023-05-07T06:50:20.060Z", "id": "clhd216ak000dyxijb2wo84j6" }, { "dataId": "clhd3ibzr000eyxijac4xckgj", "type": "add", "tableName": "qa", "data": { "id": "clhd3ibzr000eyxijac4xckgj", "question": "为什么data属性是一个函数而不是一个对象？", "answer": "面试官：为什么data属性是一个函数而不是一个对象？\nimage.png\n\n一、实例和组件定义data的区别\nvue实例的时候定义data属性既可以是一个对象，也可以是一个函数\n\nconst app = new Vue({\n el:\"#app\",\n // 对象格式\n data:{\n foo:\"foo\"\n },\n // 函数格式\n data(){\n return {\n foo:\"foo\"\n }\n }\n})\n组件中定义data属性，只能是一个函数\n\n如果为组件data直接定义为一个对象\n\nVue.component('component1',{\n template:`\n {{ value }}\n
\n\n实例化一个vue实例，定义data属性和methods方法\n\nconst app = new Vue({\n el:\"#app\",\n \tdata:()=>{\n \titem:{\n oldProperty:\"旧属性\"\n }\n },\n methods:{\n addProperty(){\n this.items.newProperty = \"新属性\" // 为items添加新属性\n console.log(this.items) // 输出带有newProperty的items\n }\n }\n})\n点击按钮，发现结果不及预期，数据虽然更新了（console打印出了新属性），但页面并没有更新\n\n二、原理分析\n为什么产生上面的情况呢？\n\n下面来分析一下\n\nvue2是用过Object.defineProperty实现数据响应式\n\nconst obj = {}\nObject.defineProperty(obj, 'foo', {\n get() {\n console.log(`get foo:${val}`);\n return val\n },\n set(newVal) {\n if (newVal !== val) {\n console.log(`set foo:${newVal}`);\n val = newVal\n }\n }\n })\n}\n当我们访问foo属性或者设置foo值的时候都能够触发setter与getter\n\nobj.foo \nobj.foo = 'new'\n但是我们为obj添加新属性的时候，却无法触发事件属性的拦截\n\nobj.bar = '新属性'\n原因是一开始obj的foo属性被设成了响应式数据，而bar是后面新增的属性，并没有通过Object.defineProperty设置成响应式数据\n\n三、解决方案\nVue 不允许在已经创建的实例上动态添加新的响应式属性\n\n若想实现数据与视图同步更新，可采取下面三种解决方案：\n\nVue.set()\nObject.assign()\n$forcecUpdated()\nVue.set()\nVue.set( target, propertyName/index, value )\n\n参数\n\n{Object | Array} target\n{string | number} propertyName/index\n{any} value\n返回值：设置的值\n\n通过Vue.set向响应式对象中添加一个property，并确保这个新 property 同样是响应式的，且触发视图更新\n\n关于Vue.set源码（省略了很多与本节不相关的代码）\n\n源码位置：src\\core\\observer\\index.js\n\nfunction set (target: Array{{$attrs.foo}}
\n \n// parent \n插槽后备的内容
\n没传footer插槽
\n- \n
- ... \n
{{item}}
\n{{value}}
\ntrim\n自动过滤用户输入的首空格字符，而中间的空格不会过滤\n\n\nnumber\n自动将用户的输入值转为数值类型，但如果这个值无法被parseFloat解析，则会返回原来的值\n\n\n事件修饰符\n事件修饰符是对事件捕获以及目标进行了处理，有如下修饰符：\n\nstop\nprevent\nself\nonce\ncapture\npassive\nnative\nstop\n阻止了事件冒泡，相当于调用了event.stopPropagation方法\n\n内容
'\"`\n`v-xxx=\"'string'\"` \n\n// -- 传参数（`arg`），如`v-bind:class=\"className\"`\n`v-xxx:arg=\"value\"` \n\n// -- 使用修饰符（`modifier`）\n`v-xxx:arg.modifier=\"value\"` \n二、如何实现\n注册一个自定义指令有全局注册与局部注册\n\n全局注册注册主要是用过Vue.directive方法进行注册\n\nVue.directive第一个参数是指令的名字（不需要写上v-前缀），第二个参数可以是对象数据，也可以是一个指令函数\n\n// 注册一个全局自定义指令 `v-focus`\nVue.directive('focus', {\n // 当被绑定的元素插入到 DOM 中时……\n inserted: function (el) {\n // 聚焦元素\n el.focus() // 页面加载完成之后自动让输入框获取到焦点的小功能\n }\n})\n局部注册通过在组件options选项中设置directive属性\n\ndirectives: {\n focus: {\n // 指令的定义\n inserted: function (el) {\n el.focus() // 页面加载完成之后自动让输入框获取到焦点的小功能\n }\n }\n}\n然后你可以在模板中任何元素上使用新的 v-focus property，如下：\n\n\n自定义指令也像组件那样存在钩子函数：\n\nbind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置\n\ninserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)\n\nupdate：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新\n\ncomponentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用\n\nunbind：只调用一次，指令与元素解绑时调用\n\n所有的钩子函数的参数都有以下：\n\nel：指令所绑定的元素，可以用来直接操作 DOM\nbinding：一个对象，包含以下 property：\nname：指令名，不包括 v- 前缀。\nvalue：指令的绑定值，例如：v-my-directive=\"1 + 1\" 中，绑定值为 2。\noldValue：指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。\nexpression：字符串形式的指令表达式。例如 v-my-directive=\"1 + 1\" 中，表达式为 \"1 + 1\"。\narg：传给指令的参数，可选。例如 v-my-directive:foo 中，参数为 \"foo\"。\nmodifiers：一个包含修饰符的对象。例如：v-my-directive.foo.bar 中，修饰符对象为 { foo: true, bar: true }\nvnode：Vue 编译生成的虚拟节点\noldVnode：上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用\n除了 el 之外，其它参数都应该是只读的，切勿进行修改。如果需要在钩子之间共享数据，建议通过元素的 dataset 来进行\n\n举个例子：\n\n\n\n三、应用场景\n使用自定义组件组件可以满足我们日常一些场景，这里给出几个自定义组件的案例：\n\n防抖\n图片懒加载\n一键 Copy的功能\n输入框防抖\n防抖这种情况设置一个v-throttle自定义指令来实现\n\n举个例子：\n\n// 1.设置v-throttle自定义指令\nVue.directive('throttle', {\n bind: (el, binding) => {\n let throttleTime = binding.value; // 防抖时间\n if (!throttleTime) { // 用户若不设置防抖时间，则默认2s\n throttleTime = 2000;\n }\n let cbFun;\n el.addEventListener('click', event => {\n if (!cbFun) { // 第一次执行\n cbFun = setTimeout(() => {\n cbFun = null;\n }, throttleTime);\n } else {\n event && event.stopImmediatePropagation();\n }\n }, true);\n },\n});\n// 2.为button标签设置v-throttle自定义指令\n\n图片懒加载\n设置一个v-lazy自定义组件完成图片懒加载\n\nconst LazyLoad = {\n // install方法\n install(Vue,options){\n \t // 代替图片的loading图\n let defaultSrc = options.default;\n Vue.directive('lazy',{\n bind(el,binding){\n LazyLoad.init(el,binding.value,defaultSrc);\n },\n inserted(el){\n // 兼容处理\n if('IntersectionObserver' in window){\n LazyLoad.observe(el);\n }else{\n LazyLoad.listenerScroll(el);\n }\n \n },\n })\n },\n // 初始化\n init(el,val,def){\n // data-src 储存真实src\n el.setAttribute('data-src',val);\n // 设置src为loading图\n el.setAttribute('src',def);\n },\n // 利用IntersectionObserver监听el\n observe(el){\n let io = new IntersectionObserver(entries => {\n let realSrc = el.dataset.src;\n if(entries[0].isIntersecting){\n if(realSrc){\n el.src = realSrc;\n el.removeAttribute('data-src');\n }\n }\n });\n io.observe(el);\n },\n // 监听scroll事件\n listenerScroll(el){\n let handler = LazyLoad.throttle(LazyLoad.load,300);\n LazyLoad.load(el);\n window.addEventListener('scroll',() => {\n handler(el);\n });\n },\n // 加载真实图片\n load(el){\n let windowHeight = document.documentElement.clientHeight\n let elTop = el.getBoundingClientRect().top;\n let elBtm = el.getBoundingClientRect().bottom;\n let realSrc = el.dataset.src;\n if(elTop - windowHeight<0&&elBtm > 0){\n if(realSrc){\n el.src = realSrc;\n el.removeAttribute('data-src');\n }\n }\n },\n // 节流\n throttle(fn,delay){\n let timer; \n let prevTime;\n return function(...args){\n let currTime = Date.now();\n let context = this;\n if(!prevTime) prevTime = currTime;\n clearTimeout(timer);\n \n if(currTime - prevTime > delay){\n prevTime = currTime;\n fn.apply(context,args);\n clearTimeout(timer);\n return;\n }\n\n timer = setTimeout(function(){\n prevTime = Date.now();\n timer = null;\n fn.apply(context,args);\n },delay);\n }\n }\n\n}\nexport default LazyLoad;\n一键 Copy的功能\nimport { Message } from 'ant-design-vue';\n\nconst vCopy = { //\n /*\n bind 钩子函数，第一次绑定时调用，可以在这里做初始化设置\n el: 作用的 dom 对象\n value: 传给指令的值，也就是我们要 copy 的值\n */\n bind(el, { value }) {\n el.$value = value; // 用一个全局属性来存传进来的值，因为这个值在别的钩子函数里还会用到\n el.handler = () => {\n if (!el.$value) {\n // 值为空的时候，给出提示，我这里的提示是用的 ant-design-vue 的提示，你们随意\n Message.warning('无复制内容');\n return;\n }\n // 动态创建 textarea 标签\n const textarea = document.createElement('textarea');\n // 将该 textarea 设为 readonly 防止 iOS 下自动唤起键盘，同时将 textarea 移出可视区域\n textarea.readOnly = 'readonly';\n textarea.style.position = 'absolute';\n textarea.style.left = '-9999px';\n // 将要 copy 的值赋给 textarea 标签的 value 属性\n textarea.value = el.$value;\n // 将 textarea 插入到 body 中\n document.body.appendChild(textarea);\n // 选中值并复制\n textarea.select();\n // textarea.setSelectionRange(0, textarea.value.length);\n const result = document.execCommand('Copy');\n if (result) {\n Message.success('复制成功');\n }\n document.body.removeChild(textarea);\n };\n // 绑定点击事件，就是所谓的一键 copy 啦\n el.addEventListener('click', el.handler);\n },\n // 当传进来的值更新的时候触发\n componentUpdated(el, { value }) {\n el.$value = value;\n },\n // 指令与元素解绑的时候，移除事件绑定\n unbind(el) {\n el.removeEventListener('click', el.handler);\n },\n};\n\nexport default vCopy;\n关于自定义组件还有很多应用场景，如：拖拽指令、页面水印、权限校验等等应用场景\n\n参考文献\nhttps://vue3js.cn/docs/zh\nhttps://juejin.cn/post/6844904197448531975#heading-5\nhttps://www.cnblogs.com/chenwenhao/p/11924161.html#_label2", "tag": [ "vue3" ], "createTime": "2023-05-07T07:48:39.138Z" }, "status": 1, "createTime": "2023-05-07T07:48:39.160Z", "id": "clhd4467s0011yxij1cu9bobq" }, { "dataId": "clhd45jd70012yxijel1qacjc", "type": "add", "tableName": "qa", "data": { "id": "clhd45jd70012yxijel1qacjc", "question": "Vue中的过滤器了解吗？过滤器的应用场景有哪些？", "answer": "一、是什么\n过滤器（filter）是输送介质管道上不可缺少的一种装置\n\n大白话，就是把一些不必要的东西过滤掉\n\n过滤器实质不改变原始数据，只是对数据进行加工处理后返回过滤后的数据再进行调用处理，我们也可以理解其为一个纯函数\n\nVue 允许你自定义过滤器，可被用于一些常见的文本格式化\n\nps: Vue3中已废弃filter\n\n二、如何用\nvue中的过滤器可以用在两个地方：双花括号插值和 v-bind 表达式，过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号指示：\n\n\n{{ message | capitalize }}\n\n\n\n定义filter\n在组件的选项中定义本地的过滤器\n\nfilters: {\n capitalize: function (value) {\n if (!value) return ''\n value = value.toString()\n return value.charAt(0).toUpperCase() + value.slice(1)\n }\n}\n定义全局过滤器：\n\nVue.filter('capitalize', function (value) {\n if (!value) return ''\n value = value.toString()\n return value.charAt(0).toUpperCase() + value.slice(1)\n})\n\nnew Vue({\n // ...\n})\n注意：当全局过滤器和局部过滤器重名时，会采用局部过滤器\n\n过滤器函数总接收表达式的值 (之前的操作链的结果) 作为第一个参数。在上述例子中，capitalize 过滤器函数将会收到 message 的值作为第一个参数\n\n过滤器可以串联：\n\n{{ message | filterA | filterB }}\n在这个例子中，filterA 被定义为接收单个参数的过滤器函数，表达式 message 的值将作为参数传入到函数中。然后继续调用同样被定义为接收单个参数的过滤器函数 filterB，将 filterA 的结果传递到 filterB 中。\n\n过滤器是 JavaScript 函数，因此可以接收参数：\n\n{{ message | filterA('arg1', arg2) }}\n这里，filterA 被定义为接收三个参数的过滤器函数。\n\n其中 message 的值作为第一个参数，普通字符串 'arg1' 作为第二个参数，表达式 arg2 的值作为第三个参数\n\n举个例子：\n\n{{ msg | msgFormat('疯狂','--')}}
\n节点内容
\n{{ foo }}
\nCat:
\n \tKitten: {{ dontexist() }}
静态文本
\n静态文本
\n{{ message }}
\n静态文本
\n ...\n静态文本
\n- \n
- {{ item }} \n
商品列表
\n- \n
- \n {{ item.name }} - {{ item.price | formatCurrency }}\n \n
这是一个DOM元素
\nHello, world!
\n` 标签就会根据其是否存在来自动应用进入或离开的过渡动画。其中，`name` 属性指定了过渡类名的前缀，我们需要在 CSS 中定义对应的过渡类。\n\n2. 自定义过渡类名\n\n如果想要更精细地控制每个阶段的过渡效果，可以自定义过渡类名。使用方法如下：\n\n```html\n\n Hello, world! Hello, world! 当前路由: {{$route.path}} 参数: {{$route.params}} 查询: {{$route.query}} 抱歉，您访问的页面不存在！ {{ msg }} Count: {{ count }} {{ message }} {{ message | reverse }} This is some text. {{ message }} {{ state.message }} First name: {{ firstName }} Last name: {{ lastName }} Full name: {{ fullName }}404
\n \n
\n {{ title }}
\n Parent Component
\n \n
\n
\n
\n
\n \n
\n \n
\n Hello, world!
\n \n
\n
\n\n```\n\n### 2. 使用 watch 监听数据变化\n\n可以使用 `watch` 监听数据变化，手动触发更新操作，以确保渲染顺序不会混乱。\n\n```javascript\n\n \n
\n\n\n\n```\n\n### 3. 使用 $nextTick 方法\n\n在数据发生变化时，使用 `$nextTick` 方法等待 DOM 更新后再执行操作，以确保渲染顺序不会混乱。\n\n```javascript\n\n \n
\n\n\n\n```",
"tag": [
"vue3"
],
"id": "clhdbli2y00efyxijamcld0k2",
"createTime": "2023-05-07T11:18:05.002Z"
},
"status": 1,
"createTime": "2023-05-07T11:18:05.041Z",
"id": "clhdbli4100egyxijhc3ybwlf"
},
{
"dataId": "clhdbm02900ehyxijdn5pczr4",
"type": "add",
"tableName": "qa",
"data": {
"question": "请说说Vue.use方法的作用及原理\n",
"answer": "## Vue.use方法的作用\n\n`Vue.use`是用来安装Vue.js插件的方法。插件通常会为Vue添加全局功能，例如 `vue-router`、 `vuex` 等。使用 `Vue.use` 方法可以把这些插件注册到Vue中，以便在整个应用程序中使用。\n\n## Vue.use方法的原理\n\n当调用 `Vue.use` 时，会执行传入的插件对象或者插件函数的 `install` 方法。 `install` 方法接受 Vue 构造函数作为第一个参数，以及一些可选的参数。这样做的目的是为了让插件能够访问 Vue 构造函数，从而扩展 Vue 的功能。\n\n下面是一个简单的插件示例：\n\n```javascript\n// 定义一个插件\nconst myPlugin = {\n install: function(Vue, options) {\n // 扩展Vue的功能\n Vue.prototype.$myMethod = function() {\n console.log('Hello from my plugin!')\n }\n }\n}\n\n// 在Vue中使用插件\nVue.use(myPlugin)\n```\n\n在上面的代码中，我们定义了一个名为 `myPlugin` 的插件。该插件的 `install` 方法接受 Vue 和 options 两个参数，并且将一个新的方法 `$myMethod` 添加到 Vue 的原型中。最后，我们通过调用 `Vue.use(myPlugin)` 来安装该插件。\n\n当 `Vue.use(myPlugin)` 被调用时，它会自动调用 `myPlugin.install(Vue, options)` 方法。在这个方法中，我们可以访问 Vue 对象，并扩展其功能。在上面的例子中，我们添加了一个名为 `$myMethod` 的新方法，该方法可以在应用程序的任何地方使用。\n\n需要注意的是，一旦通过 `Vue.use` 安装插件，就不能再次安装它，因为插件被注册时会进行检查。如果你尝试多次安装同一个插件，Vue.js 将会发出警告提示。",
"tag": [
"vue3"
],
"id": "clhdbm02900ehyxijdn5pczr4",
"createTime": "2023-05-07T11:18:28.305Z"
},
"status": 1,
"createTime": "2023-05-07T11:18:28.352Z",
"id": "clhdbm03k00eiyxij4smz07qo"
},
{
"dataId": "clhdbmhku00ejyxij0hyn7bzg",
"type": "add",
"tableName": "qa",
"data": {
"question": "你有写过vue插件吗？请说说编写的流程\n",
"answer": "很高兴回答这个问题！编写 Vue 插件的流程大致如下：\n\n1. 安装 Vue CLI\n\nVue CLI 是一个官方提供的命令行工具，可以帮助我们快速创建 Vue 项目，并且支持插件的开发和集成。安装 Vue CLI 的方法如下：\n\n```\nnpm install -g vue-cli\n```\n\n2. 创建插件项目\n\n使用 `vue init` 命令来创建插件项目，其中 `my-plugin` 是你的插件名称。\n\n```\nvue init webpack-simple my-plugin\n```\n\n3. 编写插件代码\n\n在 `src` 目录下创建一个 JavaScript 文件，这将是你插件的入口文件。在这个文件中，你需要按照 Vue 插件的规范来编写插件代码。下面是一个简单的例子：\n\n```javascript\nexport default {\n install: function(Vue, options) {\n // 在这里添加你的插件代码\n Vue.prototype.$myPluginMethod = function() {\n // 这是插件的一个方法\n };\n }\n};\n```\n\n4. 打包插件\n\n使用 `npm run build` 命令来打包插件代码。这将会生成一个名为 `my-plugin.js` 的文件。\n\n5. 使用插件\n\n你可以通过以下两种方式来使用刚才编写的插件：\n\n- 在 HTML 中使用 `\n```\n\n- 在 Vue 项目中使用 `Vue.use()` 方法来安装插件：\n\n```javascript\nimport MyPlugin from 'path/to/my-plugin.js';\n\nVue.use(MyPlugin);\n```\n\n以上就是编写 Vue 插件的大致流程。需要注意的是，插件开发和集成的具体细节会因为不同的插件而有所不同。如果你想深入了解 Vue 插件的开发和集成，请参考官方文档和其他相关资源。",
"tag": [
"vue3"
],
"id": "clhdbmhku00ejyxij0hyn7bzg",
"createTime": "2023-05-07T11:18:51.006Z"
},
"status": 1,
"createTime": "2023-05-07T11:18:51.052Z",
"id": "clhdbmhm400ekyxij8ynw7esc"
},
{
"dataId": "clhdbmuu900elyxijgmpd4nk4",
"type": "add",
"tableName": "qa",
"data": {
"question": "vue3有哪些新的组件？\n",
"answer": "Vue3有一些新的组件，其中包括：\n\n1. Teleport（传送门）：可以将一个组件的内容移动到DOM结构中的任何位置。\n\n2. Suspense（暂停）：类似React中的Suspense组件，可以在数据还未加载或者加载错误时显示一个占位符。\n\n3. Fragment（片段）：可以在模板中使用标签代替根元素，这样就不需要再添加一个无意义的标签。\n\n4. 懒加载组件：Vue3支持异步组件和懒加载组件，可以在需要时才加载组件并渲染。\n\n5. 动态组件：可以通过一个变量来控制需要渲染哪个组件。\n\n6. 静态属性提取：Vue3编译器可以将静态属性从模板中提取出来，并将其作为常量在每次渲染时重复使用，从而提高性能。\n\n7. 其他的基础组件，如`Hello, world!
;\n}\n\nexport default App;\n```\n\n以上代码中的 `Hello, world!
` 就是 JSX 语法。当 Babel 编译器将其转换成普通的 JavaScript 代码后，就可以在浏览器中正常运行了。",
"tag": [
"js"
],
"id": "clhddvp7r00g8yxij8bu8hf1l",
"createTime": "2023-05-07T12:22:00.039Z"
},
"status": 1,
"createTime": "2023-05-07T12:22:00.094Z",
"id": "clhddvp9a00g9yxij8fyq00q2"
},
{
"dataId": "clhddw2z600gayxijcmck6ss7",
"type": "add",
"tableName": "qa",
"data": {
"question": "同时引用这三个库react.js、react-dom.js和babel.js它们都有什么作用？\n",
"answer": "这三个库都是用于构建React应用的关键性库：\n\n1. `react.js`： React是一个用于构建用户界面的JavaScript库。它提供了组件化开发的方式，使得页面的维护和更新变得更加简单。React允许你将UI分解成独立的可复用组件，并将它们嵌套在一起来构建复杂的用户界面。\n\n2. `react-dom.js`： ReactDOM是React的DOM操作库。它提供了一些用于操作DOM元素的方法，如render()方法，将React组件渲染到DOM中。\n\n3. `babel.js`： Babel是一个JavaScript编译器，它能够将ES6/ES7及其它新特性转换为ES5代码。React使用了很多ES6/ES7的特性，因此需要Babel对代码进行转换以确保最终代码能够在更多的浏览器上运行。同时，Babel还支持将JSX语法转义成普通的JavaScript语法。",
"tag": [
"js"
],
"id": "clhddw2z600gayxijcmck6ss7",
"createTime": "2023-05-07T12:22:17.874Z"
},
"status": 1,
"createTime": "2023-05-07T12:22:17.911Z",
"id": "clhddw30600gbyxijcyuy6v4a"
},
{
"dataId": "clhddwi4500gcyxijgmk3awwr",
"type": "add",
"tableName": "qa",
"data": {
"question": "JSX和HTML有什么区别？\n",
"answer": "JSX是React框架中使用的一种语法，用于描述页面元素的结构和交互逻辑，在编译时会被转换成JavaScript代码，而HTML则是Web开发中的标准语言之一，用于描述网页内容和结构。\n\n以下是JSX和HTML之间的一些区别：\n\n1. 语法不同：JSX类似于HTML，但在语法上有一些差异，例如，JSX中使用className代替HTML中的class。\n\n2. 元素表示方式不同：在JSX中，可以通过在花括号中嵌入JavaScript表达式来动态地生成元素，而在HTML中需要使用JavaScript代码来操作DOM实现动态更新。 \n\n3. 数据绑定不同：在JSX中，可以通过花括号中嵌入变量或表达式来绑定数据，而在HTML中需要使用特定的数据绑定语法（如Angular中的{{}}）。\n\n4. 标签和属性的处理方式不同：在JSX中，标签和属性名都是大小写敏感的，而在HTML中标签和属性名则不区分大小写。\n\n总之，虽然JSX和HTML具有相似的语法结构和标记元素的方式，但是它们是两种不同的语言，并且在某些方面有着明显的区别。",
"tag": [
"js"
],
"id": "clhddwi4500gcyxijgmk3awwr",
"createTime": "2023-05-07T12:22:37.493Z"
},
"status": 1,
"createTime": "2023-05-07T12:22:37.523Z",
"id": "clhddwi4z00gdyxijhypt14wd"
},
{
"dataId": "clhddwz9k00geyxijhp6y5shn",
"type": "add",
"tableName": "qa",
"data": {
"question": "props.children.map和js的map有什么区别？为什么优先选择react的？\n",
"answer": "`props.children.map` 和 JavaScript 的 `map` 方法的本质是相同的，它们都是用于遍历数组并对每个元素进行操作。\n\n然而，`props.children.map` 是 React 中提供的特殊方法，它允许我们在组件中操作子组件。当一个组件被渲染时，它可以通过 `props.children` 属性来获取其所有子组件，并且这些子组件可以被看作是一个数组对象。因此，我们可以使用 `props.children.map` 来对子组件进行遍历和操作。\n\n在 React 中，使用 `props.children.map` 更加方便和灵活。这是因为 React 的组件化设计使得每个组件都具有独立性和可重用性。使用 `props.children.map` 可以方便地对子组件进行操作，并且可以在不同的组件中重复使用，从而提高代码的可维护性和可读性。\n\n此外，在 React 中使用 `props.children.map` 还可以帮助我们更好地实现组件间的通信。组件之间的数据传递可以通过 `props` 实现，而使用 `props.children.map` 可以方便地对子组件进行操作，传递数据和事件处理函数等。\n\n因此，优先选择 React 中的 `props.children.map` 方法是因为它更加方便、灵活和符合 React 的组件化设计思想。",
"tag": [
"js"
],
"id": "clhddwz9k00geyxijhp6y5shn",
"createTime": "2023-05-07T12:22:59.721Z"
},
"status": 1,
"createTime": "2023-05-07T12:22:59.740Z",
"id": "clhddwza300gfyxija6ydejnh"
},
{
"dataId": "clhddxeqp00ggyxij748ogdtk",
"type": "add",
"tableName": "qa",
"data": {
"question": "js异步加载有哪些方案？\n",
"answer": "在JavaScript中，异步加载可以使用以下几种方案：\n\n1. 回调函数：回调函数是一种常见的实现异步加载的方式。当某个操作完成时，会调用预定义好的回调函数来执行下一步操作。\n\n2. Promise：Promise是ES6引入的一种解决异步编程的方案。它通过链式调用的方式来实现异步操作的顺序控制。\n\n3. async/await：async/await是ES8引入的新特性，它是对Promise进行了封装和简化，使得异步操作的代码更加清晰易懂。\n\n4. 发布-订阅模式：发布-订阅模式是一种广泛应用于异步编程的设计模式。它通过事件管理器来实现消息的发布和订阅，从而达到异步加载数据的目的。\n\n5. Web Worker：Web Worker是浏览器提供的一种基于线程的并行处理机制。它可以在后台创建一个新的线程来执行耗时的操作，从而避免阻塞UI线程。\n\n总之，JavaScript提供了多种方式来实现异步加载，开发者可以根据具体的业务场景选择合适的方案。",
"tag": [
"js"
],
"id": "clhddxeqp00ggyxij748ogdtk",
"createTime": "2023-05-07T12:23:19.777Z"
},
"status": 1,
"createTime": "2023-05-07T12:23:19.814Z",
"id": "clhddxerq00ghyxijcwyk2rwa"
},
{
"dataId": "clhddxrvu00giyxij14xmgvfk",
"type": "add",
"tableName": "qa",
"data": {
"question": "怎么在JSX里使用自定义属性？\n",
"answer": "在JSX中使用自定义属性，你可以给元素添加一个带有自定义属性的对象作为props传递给组件。例如：\n\n```jsx\n