随笔分类 - web前端 / vue.js
摘要：vue里面的vue-router路由模式有几种？ 有三种hash、history、abstract 示例： switch (mode) { case 'history': this.history = new HTML5History(this, options.base) break case '
阅读全文
摘要：vue 里面的v-model原理是什么？ 基于 Vue 的数据响应式系统、编译阶段以及数据绑定和事件监听机制。通过将这些机制相结合，v-model 使得表单元素的值和 Vue 实例中的数据能够保持同步，从而简化了前端开发中的数据绑定工作。 原理分解成2个步骤： 数据到视图：Vue 通过数据绑定将 V
阅读全文
摘要：computed 和 watch区别 computed 支持缓存，是计算属性，只有依赖数据发生改变，才会重新进行计算，watch 是监听一个数据，一旦发生变化就直接回调 computed 不支持异步，watch 支持异步 computed 必有return，watch 可有可无 你好吗 全世界
阅读全文
摘要：怎么在vue 单文件组件中开启严格模式呢？ 要在单文件组件中使用 TypeScript，需要在 <script> 标签上加上 lang="ts" 的 attribute。当 lang="ts" 存在时，所有的模板内表达式都将享受到更严格的类型检查 <script lang="ts"> import
阅读全文
摘要：Vue测试类型分类： 单元测试：检查给定函数、类或组合式函数的输入是否产生预期的输出或副作用 组件测试：检查你的组件是否正常挂载和渲染、是否可以与之互动，以及表现是否符合预期。这些测试比单元测试导入了更多的代码，更复杂，需要更多时间来执行。 端对端测试：检查跨越多个页面的功能，并对生产构建的 Vue
阅读全文
摘要：在vue组件使用中，要想使用开发的组件，则必须先进行注册， vue组件注册有2种方式，全局注册和局部注册 什么是全局注册？ 可以使用 Vue 应用实例的 .component() 方法，让组件在当前 Vue 应用中全局可用。 import { createApp } from 'vue' const
阅读全文
摘要：事件处理器 (handler) 的值可以是： 内联事件处理器：事件被触发时执行的内联 JavaScript 语句 (与 onclick 类似)。 方法事件处理器：一个指向组件上定义的方法的属性名或是路径。 内联事件： // jsconst count = ref(0) // html <button
阅读全文
摘要：数组变化监听 push() pop() shift() unshift() splice() sort() reverse() 不可变得方法：这些都不会更改原数组，而总是返回一个新数组 filter() concat() slice() 时间是什么
阅读全文
摘要：在vue里面 有时候会经常混用一些指令 v-if 和 v-for 它们同时存在于一个节点上时，v-if 比 v-for 的优先级更高。这意味着 v-if 的条件将无法访问到 v-for 作用域内定义的变量别名 <!-- 这会抛出一个错误，因为属性 todo 此时 没有在该实例上定义 --> <li
阅读全文
摘要：v-if 和 v-show的比较 v-if 是“真实的”按条件渲染，因为它确保了在切换时，条件区块内的事件监听器和子组件都会被销毁与重建。 v-if 也是惰性的：如果在初次渲染时条件值为 false，则不会做任何事。条件区块只有当条件首次变为 true 时才被渲染。 相比之下，v-show 简单许多
阅读全文
摘要：在vue3里面的有reactive函数方法，在使用方面存在一些局限性 有限的值类型：它只能用于对象类型 (对象、数组和如 Map、Set 这样的集合类型)。它不能持有如 string、number 或 boolean 这样的原始类型 不能替换整个对象：由于 Vue 的响应式跟踪是通过属性访问实现的，
阅读全文
摘要：vue2 和 vue3的一些区别 双向数据绑定原理：Vue2使用ES5的Object.defineProperty()进行数据劫持，并结合发布订阅模式实现双向数据绑定。而Vue3则使用了ES6的Proxy API进行数据代理，这种方式相较于Vue2有更优的性能，可以监听整个对象而不仅仅是属性，并且可
阅读全文
摘要：vue中 ref 是 Composition API 的一部分，它用于创建一个响应式的引用。当你使用 ref 创建一个响应式引用时，它会返回一个包装对象，该对象具有一个名为 value 的属性。你需要通过 .value 来访问或修改该引用的值。 明确性：通过 .value，你明确地知道你是在访问或修
阅读全文
摘要：vue双大括号不能在HTML attributes 中使用。想要响应式地绑定一个 attribute，应该使用 v-bind 指令： <div v-bind:id="dynamicId"></div> v-bind 指令指示 Vue 将元素的 id attribute 与组件的 dynamicId
阅读全文
摘要：vue组件有两种风格 选项API 组合API 选项API：使用选项式 API，我们可以用包含多个选项的对象来描述组件的逻辑，例如 data、methods 和 mounted。选项所定义的属性都会暴露在函数内部的 this 上，它会指向当前的组件实例。 <script> export default
阅读全文
摘要：vue.js 有哪些应用？ 无需构建步骤，渐进式增强静态的 HTML 在任何页面中作为 Web Components 嵌入 单页应用 (SPA) 全栈 / 服务端渲染 (SSR) Jamstack / 静态站点生成 (SSG) 开发桌面端、移动端、WebGL，甚至是命令行终端中的界面 别以为世界没了
阅读全文
摘要：SPA 是什么意思？ 在vue.js 里面SPA是指 single page web application 英文的缩写，别称为单页应用 不足之处： 纯客户端的 SPA 在首屏加载 SEO 方面有不足 行而上学，实在不行就别上了吧
阅读全文
摘要：vue.js 是什么？ Vue.js 是一套构建用户界面的渐进式框架，采用自下而上增量开发的设计完全有能力驱动采用单文件组件以及vue.js生态系统支持的库开发的复杂单页应用。 灰姑娘的鞋若是合脚当初就不会掉，王子若是真的爱灰姑娘就不会连和自己跳了一晚上的舞的女孩都不认识。
阅读全文
摘要：Vue 双向数据绑定原理： Vue的双向数据绑定原理主要基于数据劫持和发布-订阅模式，通过Object.defineProperty为各个属性定义get，set特性方法，在数据发生变化时给订阅者发布消息，触发相应的监听回调。 数据劫持：Vue.js 使用 Object.defineProperty(
阅读全文
