Vue3
文章平均质量分 85
Vue3 笔记
wei-vivian
这个作者很懒,什么都没留下…
展开
-
Vue2和Vue3的区别
Vue2 支持 IE11,Vue3不支持。原创 2024-05-16 22:11:22 · 1902 阅读 · 0 评论 -
Vue 鉴权
表格:后端没有返回该字段,则表示无该字段权限,表格不进行列渲染。静态路由:可直接访问,无需判断权限。流程图存放:wps-云文档。动态路由(权限路由)原创 2024-04-28 16:23:32 · 198 阅读 · 0 评论 -
npm 发布一个函数,支持 Vue3 hook 和 directive 使用
umd.js:支持 Common.js,也就是Node.js 规范。当我们 require 的时候,就会去找 main 对应的文件 dom-resize-vivian.umd.js。当我们 import 的时候,就会去找 module 对应的文件 dom-resize-vivian.mjs。配置 package.json: 注意 main 和 module 的文件要对应 dist 打包的结果文件。注意:这个插件是专门为 Vue 提供的,所以没有必要安装插件的时候再去安装Vue。version: 版本号。转载 2024-04-28 16:06:41 · 14 阅读 · 0 评论 -
响应式:computed & watch
假设用户调触发watch回调执行,且回调内有个请求,但是请求的回调比较慢,在这个期间,用户再次触发watch回调执行。在这种情况下,就可以通过 onCleanUp 来清除副作用,也就是在 onCleanup 内取消之前的请求。语句创建:如果用异步回调创建一个侦听器,那么它不会绑定到当前组件上,你必须手动停止它,以防内存泄漏。,计算属性是基于它们的反应依赖关系缓存的,计算属性只在相关响应式依赖发生改变时它们才会重新求值。立即执行传入的一个函数,同时响应式追踪其依赖,并在其依赖变更时重新运行该函数。原创 2024-04-28 11:28:29 · 1957 阅读 · 0 评论 -
响应式:声明响应式数据 ref &reactive & readonly
由于 Vue 的响应式跟踪是通过属性访问实现的,因此我们必须始终保持对响应式对象的相同引用。,其行为就和普通对象一样。不同的是,Vue 能够拦截对响应式对象所有属性的访问和修改,以便进行依赖追踪和触发更新。可以持有任何类型的值,包括深层嵌套的对象、数组或者 JavaScript 内置的数据结构,比如。接受一个对象 (不论是响应式还是普通的) 或是一个 ref,返回一个原值的只读代理。只读代理是深层的:对任何嵌套属性的访问都将是只读的。如果将一个新的 ref 赋值给一个关联了已有 ref 的属性,那么它会。原创 2024-04-28 11:04:51 · 875 阅读 · 3 评论 -
Vue3 生命周期
注意:setup语法糖中没有 beforeCreate、created 钩子函数,且其他钩子函数多了on前缀。使用场景:销毁定时器、组件监听、事件监听等等会造成内存泄漏的东西。,这给了用户在不同阶段添加自己的代码的机会。同时在这个过程中也会运行一些叫做。原创 2024-04-28 11:15:24 · 345 阅读 · 3 评论 -
组件化:组件优化
如果提供了一个加载组件,它将在内部组件加载时先行显示。在加载组件显示之前有一个默认的 200ms 延迟——这是因为在网络状况较好时,加载完成得很快,加载组件和最终组件之间的替换太快可能产生闪烁,反而影响用户感受。如果提供了一个报错组件,则它会在加载器函数返回的 Promise 抛错时被渲染。你还可以指定一个超时时间,在请求耗时超过指定时间时也会渲染报错组件。注意:被 keep-alive 组件的生命周期 onMounted 和 onUnmounted 只会被调用一次。内置组件将组件包裹起来。原创 2024-04-28 09:59:20 · 374 阅读 · 3 评论 -
组件化:组件扩展
缺点:如果混入多个,会导致混入里面的数据来源不明。容易导致变量/方法命名冲突,这样只能修改当前组件内冲突的命名,不可能修改mixin混入里的命名,因为不确定会不会影响其他已使用混入的组件。混入对象可以包含任意组件选项。当组件使用混入对象时,所有混入对象的选项将被混入该组件本身的选项。Vue3 引入 Composition API,利用独立出来的响应式模块可以很方便的编写独立逻辑并提供响应式的数据,然后在setup选项中组合使用。当被提供的内容只有默认插槽时,组件的标签才可以被当作插槽的模板来使用。原创 2024-04-28 09:41:08 · 711 阅读 · 1 评论 -
组件化:组件通信
组件可以有以下几种关系:A-B、B-C、B-D 都是父子关系C-D 是兄弟关系A-C、A-D 是隔代关系根据组件之间关系讨论组件通信最为清晰有效props: 父组件通过props向下传递数据给子组件$emit:子组件通过 emit 派发事件v-model语法糖(Vue2 和 Vue3 有区别).sync语法糖(Vue3移除)非 prop 特性:$attrs(非兼容 Vue2)$listenersVue3 移除ref$parent$children。原创 2024-04-26 18:27:26 · 930 阅读 · 0 评论 -
组件化:组件模板
Vue 的单文件组件 (即 *.vue 文件,英文 Single-File Component,简称 SFC) 是一种特殊的文件格式,使我们能够将一个 Vue 组件的模板、逻辑与样式封装在单个文件中。这个特殊的 attribute 出现在一个子组件上时,这个组件将会使用其里面的内容作为模板,而不是将其作为被分发的内容。这些可以用于模板特别大的 demo 或极小型的应用,但是其它情况下请避免使用,因为这会将模板和该组件的其它定义分离开。内联模板需要定义在 Vue 所属的 DOM 元素内。原创 2024-04-26 15:16:36 · 257 阅读 · 0 评论 -
组件化:组件注册(组件定义)
HTML attribute 名不区分大小写,因此浏览器将所有大写字符解释为小写。注意:直接在 DOM (即非字符串的模板) 中使用时只有 kebab-case 是有效的。会被作为无效的内容提升到外部,并导致最终渲染结果出错。,对于哪些元素可以出现在其内部是有严格限制的。这会导致我们使用这些有约束条件的元素时遇到一些问题。全局注册的组件可以在应用中的任何组件的模板中使用。,只能出现在其它某些特定的元素内部。语法糖中引入局部组件,无需注册。选项式写法与 Vue2 一致。有些 HTML 元素,诸如。原创 2024-04-26 15:05:26 · 631 阅读 · 0 评论 -
谈一谈对 vue 组件化的理解?
组件转换成 VueComponent 实例,构造函数通过方式把它 new 出来变成实例,实例里面有 render 函数,render 函数在合适的时间里,将模板转换成虚拟 DOM,虚拟 DOM 通过更新转换成真实的 DOM。页面组件(路由组件):组织应用各部分独立内容,需要时在不同页面组件间切换,一般不存在复用性(必须经过路由的组件,形成页面与页面的连接)。特点:组件是基于配置的,平常编写的是组件配置,而不是组件。可复用:组件是可复用的组件实例,所以它们与根实例接收相同的选项,例如。原创 2024-04-26 14:44:21 · 767 阅读 · 0 评论