使用Vue Directive实现的Vue页面权限控制
\#0 权限控制? 前端?前端的权限控制不是为了阻止用户做什么, 而是为了告诉用户不能做什么, 实际阻止用户去做什么应该由后端完成, 把按钮藏起来并不能阻止用户触发那个按钮背后的实际后端逻辑. 前端的权限控制是为了告诉用户不能做什么, 把用户无权限操作的按钮隐藏起来, 可以降低用户无知点下按钮后权限不足造成的挫败感.接下来, 假设我们已经通过暴露到全局的 $perm.has: (permissionNode: string): boolean 实现了权限的判断, 来思考如何以一种开发友好的方式控制元素显示.\#1 v-if?这应该是最容易最直接想到的办法:<button v-if=...
Vue 3 服务端渲染(SSR)终极优化指南
最近在做的项目都需要做SSR优化搜索引擎索引和用户体验.如果只需要优化SEO那就直接挂个白屏屏蔽掉没加载完但是有内容的丑陋网页就行了, 搜索引擎能够抓取数据, 用户以为还在加载.但是如果需要优化用户体验, 那就需要下一些功夫了.这篇教程基于没有使用任何SSR框架(比如nuxt/vite-ssr), 纯手搓的SSR服务端, 其他框架请自行迁移学习, 难度应该不大, 实在不行我们可以改源码(x).0. 简单的SSR服务端核心逻辑如下:import { renderToString } from "@vue/server-render";
const initApp = ...
Vue 3 中的服务端渲染(SSR)与异步数据获取
为了解决SEO问题, 我们通常会使用SSR.但是Vue的SSR对异步数据的渲染有不少门道, 故开一篇文章简单讲讲.以下内容基于完全使用setup script的情况下讲述.几个基本点:SSR渲染时, 生命周期钩子里只有beforeCreate和created会被触发. 意味着你不能在其他钩子里执行获取数据的逻辑.SSR渲染时, 响应式变量不会被触发更新, 渲染状态以逻辑执行时的数据为准. 意味着如果你使用空数据占位, 等到数据到达时更新数据的做法会在SSR时失效.几个建议:如果你在用响应式变量控制组件的加载状态(isLoading), 替换成Suspense和Async Setup. 因...
ref<T>() / ref(T) / ref() as Ref<T>? Vue3中的Ref类型体操
Ref的四种写法这是一个ref:const refA = ref();什么都没有, 所以是一个Ref<any>可以这样:refA.value = 123;
refA.value = "123";
refA.value = ["123", 123];这是另一个ref:const refB = ref(1);这时候, 他就是一个Ref<number>, 所以:refB.value = 2;
refB.value = -1;
refB.value = {}; // Error: Type '{}' is not assignabl...