subsistent的博客

下次创建新项目时，该预设配置不再可用。3. 在打开的浏览器窗口中，选择 "导入"（Import）或者 "打开"（Open）选项，然后导入你的项目。6. 点击该预设配置的右侧的 "操纵"（Manipulate）按钮，然后选择 "删除"（Delete）。通过上述步骤，你可以为 Vue CLI 创建的项目添加自定义的预设配置，并在以后的项目中重复使用。通过上述步骤，你可以轻松地删除 Vue CLI 中的预设配置，并进行相应的调整和管理。5. 在 "配置" 页面中，可以看到列出的配置列表，找到你要删除的预设配置。

include: /[\\/]src[\\/]views[\\/]modulesApp[\\/]/ ：给modulesApp下的所有文件做适配。exclude: /[\\/]node_modules[\\/]/ ：排除node_modules下的所有文件。下载 autoprefixer 用来给不同的浏览器自动添加相应前缀，如-webkit-，-moz-等等。根据是否需要使用include，引用不同的资源，不用github版本资源时，include属性设置无效。设定750px转化为100vw。

以上配置会将开发环境的提示工具（如警告、错误、性能提示等）禁用。请注意，在生产环境中，这些提示工具将会自动启用。是一个可选的配置文件，在新建项目时不会自动生成。如果你的项目中没有该文件，请根据上述步骤进行创建。在Vue 3项目中，你可以通过修改配置文件来关闭开发环境的提示。文件（如果没有该文件，你可以手动创建一个）。3 保存文件并重新启动开发服务器。1 在项目根目录下找到。

例如，可以支持设置弹窗的宽度、高度、背景色等属性，以及自定义弹窗的内容。当然，在具体实现过程中还需要考虑兼容性、安全性、可访问性等方面的问题，以及结合具体项目的需求进行进一步优化和扩展。同时，根据用户反馈和性能测试结果，对组件进行优化，提升用户体验和性能。设计组件的结构和布局：根据功能需求，设计组件的HTML结构和CSS样式，考虑使用响应式布局，使得弹窗在不同设备上都能良好地显示。定义弹窗组件的功能和属性：首先确定弹窗组件的基本功能，例如显示、隐藏和关闭弹窗，以及设置弹窗的标题、内容、样式等属性。

基本上，您需要创建一些配置，从中创建gstc状态，初始化组件并将其装载到DOM。在 vue 项目中引入这个类库。

虚拟列表通过计算可见区域内的项并只渲染这些项，能有效提升渲染性能，尤其在数据量大的情况下。Vue 3 中可以通过ref和v-for动态渲染可见的列表项，并通过滚动事件计算和更新显示区域的内容。

2、点击节点的白色圆圈，就给该节点生成一个子节点。5、再次双击该节点，则打开该节点的所有子节点。4、双击该节点，则收起该节点的所有子节点。3、节点和子节点之间用线连接。用vue3编写一个节点管理。1、初始化状态就一个节点。

例如，在子组件中定义了一个名为state的对象和一个名为play的方法，可以通过子组件实例的属性value来访问state对象和调用play方法。例如，在父组件中定义了一个名为childComp的ref变量关联子组件实例，在点击按钮时，可以通过childComp.value来获取子组件的数据，并调用子组件的方法。例如，在父组件中使用$refs.childComp来获取子组件的实例，然后可以通过该实例来获取子组件的数据和调用子组件的方法。通过设置name属性，可以在组件内部或父组件中直接使用该组件。

安装vue-router 4.x配置路由引入路由 main.js安装vuex 4.x配置 Store引入状态管理 main.js安装依赖完整引入按需引入手动导入。

在 ts 环境中 *.vue 文件 sfc 要有 ts 类型校验，要在根目录新建一个 index.d.ts 文件，因为 webpack.config.ts 在根目录而且把 /src/index.ts 作为入口文件，而在 /src/index.ts 中，又以 /src/App.vue 作为 SPA 的根组件。不过，问题来了，由于我们的应用是一个单页的客户端应用，如果没有适当的服务器配置，用户在浏览器中直接访问 http://localhost:8080/about 就会得到一个 404 错误，这就尴尬了。

一个组件需要显式声明它所接受的 props，这样 Vue 才能知道外部传入的哪些是 props，哪些是透传 attribute（classstyle和id。

Nuxt.js 是一个基于的通用应用框架，它提供了一种简单且强大的方式来开发服务器渲染的应用程序。这里是 vue2.x。

语法糖（Syntactic sugar），也译为糖衣语法，是由英国计算机科学家彼得·约翰·通常来说使用语法糖能够增加程序的可读性，从而减少程序代码出错的机会。中添加的某种语法，这种语法对语言的功能并没有影响，但是更方便。（Peter J. Landin）发明的一个术语，指。对语言的功能并没有影响。对语言的功能也没有影响。

指定哪些组件可以被缓存 取值为 缓存的组件名称组成的字符串'组件1，组件2，组件3'， 或者是名称组成的数组['组件1','组件2',....]最大的缓存数量 对于大型项目当中如果缓存数量过多会导致项目内存冗余，所以适当的可以设置max的值。使用vue中的component组件，通过is prop传递组件名或者组件实例。使用reactive双向数据绑定，使用shallowRef将变量绑定组件。使用 keep-alive 缓存组件。keep-alive有三个属性。排除哪些组件不可以被缓存。

SSR代表服务器端渲染（Server-Side Rendering），它是一种将页面的渲染工作从客户端转移到服务器端的技术。在传统的客户端渲染（CSR）中，页面的渲染是在浏览器中进行的，浏览器通过请求获取页面的HTML和JavaScript代码，然后在客户端进行页面的渲染和交互。

虚拟列表的实现，实际上就是在首屏加载的时候，只加载 可视区域 内需要的列表项，当滚动发生时，动态通过计算获得 可视区域 内的列表项，并将 非可视区域 内存在的列表项删除。通过动态计算可见区域的数据，并根据滚动位置动态加载和卸载列表项，可以大幅提升列表的性能和响应速度。计算 startIndex 对应的数据在整个列表中的偏移位置 startoffset 并设置到列表上。它只渲染当前可见区域的部分数据，这样可以减轻前端的渲染压力，提高页面的加载速度。，并赋值相应的加载方法，可实现滚动到底部时自动执行加载方法。

2.实现Store时，可以定义Store类，构造函数接收选项options，返回的是Vue插件，设置属性state存储状态，不可以直接修改state的属性，提供commit和dispatch修改属性state。需要设置state为响应式对象，将state、commit、dispatch暴露在插件对象store上，在main.ts中app.use(store)之后，在全局都可以通过store的state、commit、dispatch去访问和修改。解决的问题：存储用户全局状态并提供管理状态API。

1.配置路由信息的时候，添加一个role属性，可以是，所有用户可见的路由role设为0，A类型用户可见的路由role设为1，B类型可见的路由role设为2；2.将数据库的用户数据表添加role字段；3.用户登录之后获取到role属性值，将它存储到全局状态管理和本地存储；4.给role为1的用户设置菜单栏为0+1，给role为2的用户设置菜单栏为0+2；5.访问时，如果没有路由就返回404页面，如果有路由而没有权限就返回没有权限的页面。

放在public的static文件夹下（地址不包括静态资源文件夹名字，public）放在和src同级的static文件夹下。

【代码】vue-router跳转时打开新页面的两种方法。

根模块和两个子模块的setNum都被调用。只有根模块的setNum被调用。

一些组件（MouseTracker.vue）可能只包括了逻辑而不需要自己渲染内容，视图输出通过作用域插槽全权交给了消费者组件（App.vue）。在某些场景下插槽的内容可能想要同时使用父组件域内和子组件域内的数据。的插槽被称为具名插槽 (named slots)。如果同时使用了具名插槽与默认插槽，则需要为默认插槽使用显式的。当一个组件同时接收默认插槽和具名插槽时，所有位于顶级的非。在外部没有提供任何内容的情况下，可以为插槽指定默认内容。标签，因为默认插槽的props属性在其他插槽中不可用。

vue2.x实现自定义组件多个双向数据绑定：vue3.x实现自定义组件多个双向数据绑定： UserName.vue:

总结来说, v-if 是“真正”的条件渲染，因为它会从 DOM 中移除不符合条件的元素。v-show 是条件隐藏，即使元素不符合条件，它也始终会被渲染并保留在 DOM 中，只是简单地设置了 CSS 的 display 属性。如果表达式的值为 false，则该元素及其子元素都不会被渲染，而该元素上绑定的事件监听器也不会被注册。的：如果在初次渲染时条件值为 false，则不会做任何事。是“真实的”按条件渲染，因为它确保了在切换时，条件区块内的事件监听器和子组件都会被销毁与重建。因此，如果需要频繁切换，则使用。

在 Vue2.x 中，我们一般是根据请求返回的结果状态自行追加逻辑来控制是否显示，这种方法略显笨重，所以Vue3.x 中就给我们提供了。在前端开发中，异步请求组件必不可少，比如：读取远程图片、调用后台接口，这些都需要异步请求。数据请求实现异步请求组件，同步使用。实现异步请求组件请求使用。生命周期钩子函数监听错误。

【代码】vue2实现歌词滚动。

computed 用于对响应式变量进行二次计算，当它依赖的响应式变量发生变化时会重新计算 ，并返回一个新的数据，返回的数据可以直接在页面上渲染。computed不支持异步，当computed内有异步操作时无效，无法监听数据的变化 ，但在watch中可以进行异步操作。computed支持缓存，只有依赖数据发生改变，才会重新进行计算。watch 不支持缓存。watch 用于监听响应式变量的变化，当监听的数据发生变化时，执行相应的逻辑。组件初始化时computed 执行 ，而 watch不执行。

prevent - 阻止默认行为 //call event.preventDefault()..stop - 阻止事件冒泡 //call event.stopPropagation()..enter - 用于keyup事件，约束keyup事件只在enter键触发。.number - 限制输入数字或将输入的数据转为数字。.lazy - 相当于input的change。.self - 只在当前元素自身触发执行函数。.trim - 过滤文本框输入之后的首尾空格。.once - 事件的执行函数最多执行一次。

不可以在definedProperty的描述符里使用push, pop, shift, unshift,splice,sort, reverse方法。Proxy 返回一个proxy对象,我们可以只操作这个proxy对象达到目的,而 Object.defineProperty 只能遍历对象属性才能修改。因为definedProperty只能劫持一个属性，如果是引用数据类型，则监听这个数据的地址，如果想深度劫持，必须深层遍历嵌套的对象。Proxy 可以直接监听对象和数组的变化。从而Proxy达到了性能优化。

Vuex 是一个专为 Vue应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。vue重写过的一些数组方法：push，pop，shift，unshift，splice，sort，reverse。当vuex 的状态是一个对象或者数组时，需要改变引用数据类型的状态的地址才会触发派发更新。改变数据地址：将数据转为json对象再转为js对象、ES6解构再赋值。

对于使用setTimeout，使用nextTick可能会节省性能，因为nextTick会先尝试使用promise、MutationObserver、setImmediate这些技术去监听，如果都不支持才会采用setTimeout(fn, 0)。当你在 Vue 中更改响应式状态时，最终的 DOM 更新并不是同步生效的，而是由 Vue 将它们缓存在一个队列中，直到下一个“tick”才一起执行。nextTick() 可以在状态改变后立即使用，以等待 DOM 更新完成。//回调函数将在下一个“tick”被执行。

同时使用 v-if 和 v-for 是不推荐的，因为这样二者的优先级不明显。

主要负责数据劫持， vue2是通过Obeject.defineProperty()来监听数据的变动，这个函数内部可以定义setter和getter。是订阅者，是连接 Observer 和 Compile 之间通信的桥梁，当它收到来自 Dep 的数据变化通知后，会调用自身的 update() 方法，并触发Compile中绑定的回调。主要做的事情是解析模板指令，将模板中的变量替换成数据，然后初始化渲染页面视图，并将每个指令对应的节点绑定更新函数，添加监听数据的订阅者，一旦接收到数据有变动，收到通知，更新视图。

diff算法是一种通过同层的树节点进行比较的高效算法，避免了对树进行逐层搜索遍历，所以时间复杂度只有 O(n)。

使用$attrs和$listeners。

比如React，它也有一定程度的主张，它的主张主要是函数式编程的理念。每当数据发生变化，就会触发setter()。Watcher 是订阅者，是连接 Observer 和 Compile 之间通信的桥梁，当它收到来自 Dep 的数据变化通知后，会调用自身的 update() 方法，并触发Compile中绑定的回调。Compile 主要做的事情是解析模板指令，将模板中的变量替换成数据，然后初始化渲染页面视图，并将每个指令对应的节点绑定更新函数，添加监听数据的订阅者，一旦接收到数据有变动，收到通知，更新视图。

如何创建一个vue项目

2)通过接口代理的方式，在vue项目中创建一个vue.config.js，导入一个(__2__)，并配置里面的(__3__)选项即可。与其他模式不同的是，Vuex 是专门为 Vue.js 设计的状态管理库，以利用 Vue.js 的细粒度数据响应机制来进行高效的状态更新。在webpack 4.x中，默认会将 src/index.js 作为默认的打包入口js文件，默认会将dist/main.js 作为默认的打包输出js文件，如果不想使用默认的入口/出口js文件我们如何设置？指令的参数可以是动态的。

设置 replace 属性的话，当点击时，会调用 router.replace() 而不是 router.push()，于是导航后不会留下 history 记录。当你点击 时，这个方法会在内部调用，所以说，点击 等同于调用 router.push(...)。想要导航到不同的 URL，则使用 router.push 方法。这个方法会向 history 栈添加一个新的记录，所以，当用户点击浏览器后退按钮时，则回到之前的 URL。

有些同学可能不大理解什么叫 DOM is now updated，在 深入响应式原理 - vue.js 中的示例情况也比较罕见，Vue 模板中直接在根无素中进行插值，然后在实例方法中使用了 this.$el.textContent 来获得更新之后的 DOM。看完这个示例，也许有人会问，我在 Vue 实例方法中修改了数据，然后再在 $nextTick 回调中获取该数据在相应 DOM 元素所绑定的内容（或属性）殊无必要，我为什么需要这样的 API 呢？