Request.session对象会自动生成一个cookie，该cookie名字默认为sessionoid，储存session的session_key值。当会话session过期后，该cookie将会自动消失。只有该cookie清空后，登录后的用户才能重新登录。 通过后端设置session的过期时间，时间到后，通过浏览器可以看到，cookie自动消失了。因此只需要设置，用户存在localStorage中的token值跟着cookie一起消失，就能够通过设置session的过期时间，来控制用户保持登录状态的时间，如七天免登录。 我们可能会认为其实可以根据cookie来控制登录状态，实际上想要在vue中操作cookie值是不容易。在JavaScript中，我们可以通过document.getElementId()之类的指令来控制cookie。但在vue中，使用document的指令很可能会得到空的返回值。因此，不能通过直接控制cookie的方法来实现控制登录状态。 因此，我们需要在后端多写一个接口，来检验token的有效性，从而控制用户的登录状态。 注意：cookie只会影响用户是否能够再次登录，而vue中判断用户登录，使用cookie不方便，因此只能使用token来实现。然而token跟cookie在前端是独立的，因此如果cookie过期了，而token没清除，就会导致一直保持登录，而token清除了，cookie没过期，就会导致登录状态结束后，用户无法登录。

In Vue.js, if you simply add multiple whitespaces in a string, it eventually displays a single whitespace.//This will display a single whitespace. 'ab c'If you want to display multiple whitespaces, you could use unicode to represent whitespace.let str1 = 'ab\u00A0\u00A0\u00A0 c'; let str2 = 'ab\u0020\u0020\u0020 c'; let str3 = 'ab\u3000\u3000\u3000 c';These will output multiple whitespaces in strings.

v-if v-else v-else-ifv-if指令用于条件性地渲染一块内容，这块内容只会在指令的表达式返回truth值的时候被渲染。<script setup> const have = ref(true) </script> <template> <div id="app"> <div v-if = "have">我可以被显示出来</div> </div> </template>当have的值为true时，div块被显示。而当have为falseconst have = ref(false)页面无显示，且具有v-if = “have”的div块不存在在html结构中。也可以用v-else添加一个“else模块”，和js的语法相同，当if条件不成立，则显示else模块内容。在vue2.1.0新增的v-else-if，更是可以与上面两个共同使用，但是v-else和v-else-if都必须紧跟在v-if的后面使用（v-else-if可以跟在v-else-if后面）例子：<script setup> const type = ref("哎哎哎") </script> <template> <div id="app"> <div v-if="type==='A' ">A</div> <div v-else-if="type=='B'">B</div> <div v-else-if="type=='C'">C</div> <div v-else-if="type=='D'">D</div> <div v-else>not A/B/C/D</div> </div> </template>执行结果：这里其他的div在html结构中已不存在。在<template>元素上使用v-if条件渲染分组因为v-if是一个指令，所以必须将它添加到一个元素上，但是如果想切换多个元素呢？？？此时就可以把一个< template>元素当不可见的包裹元素，并在上面使用v-if，最终的渲染结果将不包含< template>元素。例子：<script setup> const ok = ref(true) </script> <template> <div id="app"> <template v-if="ok"> <h1>哈哈哈哈</h1> <p>这是一个段落</p> <p>这是一个段落</p> </template> </div> </template>运行结果：v-showv-show是另一个用于根据条件展示元素的选项，，用法和v-if大致相同<h1 v-show="ok">hello</h1>不同的是带有v-show的元素时钟会被渲染并且保留在dom中，v-show只是简单的切换原色的css属性display（注意）v-show不支持template元素，也不支持v-else例子：<script setup> const ok = ref(false) </script> <template> <div id="app"> <div v-show="ok">hhhhhhhhhhh</div> </div> </template>不显示但存在v-if和v-show的区别v-if是真正的条件渲染，因为它会确保在切换过程中事件内的**事件监听器和子组件适当得被销毁和重建。是有惰性的：如果在初始渲染的时候事件为假，则什么也不做，直到条件第一次变为真的时候，才会开始渲染条件块v-show相比v-show就简单的多，不管初始条件是什么，元素始终都会被渲染，而且只是简单地基于css进行切换。两者的使用一般来说，v-if有更高的切换开销，而v-show有更高的初始渲染开销，因此，如果需要非常频繁地切换，则用v-show更好一些；如果运行的条件很少改变，则用v-if更好。

在Vue项目开发中，有时候我们需要在style标签中使用我们所定义的JS变量来编写CSS。根据官方文档，我们可以使用v-bind来实现这个目的选项式API：<template> <div class="text">hello</div> </template> <script> export default { data() { return { color: 'red' } } } </script> <style> .text { color: v-bind(color); } </style>组合式API：<script setup> import { ref } from 'vue' const theme = ref({ color: 'red', }) </script> <template> <p>hello</p> </template> <style scoped> p { color: v-bind('theme.color'); } </style>还有一个问题，如果我们的变量是数字，但是我们想要设置像素px怎么办？以下以组合式API为例（选项式API方法大同小异），提供两种解决方案。一种是使用 computed 计算属性改变它<script setup> import { computed } from 'vue'; const props = defineProps({ size: Number }); const sizePx = computed(() => `${props.size}px`) </script> <template> <p>hello</p> </template> <style scoped> p { font-size: v-bind(sizePx); } </style>还有一种方式是使用 CSS 计算属性calc<script setup> defineProps({ size: Number }); </script> <template> <p>hello</p> </template> <style scoped> p { font-size: calc(1px * v-bind(size)); } </style>那么如何在代码中使用style属性呢？也很简单，根据官方文档，在style标签中加上module，然后就能通过$style来使用style中的CSS属性。<template> <p :class="$style.red">This should be red</p> </template> <style module> .red { color: red; } </style>还可以给style的module attribute设置不同的名字，从而调用不同style标签中的属性<template> <p :class="classes1.red">This should be red</p> </template> <style module="classes1"> .red { color: red; } </style> <style module="classes2"> .red { color: green; } </style>如果想要在<script setup>中使用，可以使用 useCssModuleimport { useCssModule } from 'vue'; const classes1 = useCssModule('classes1'); const classes2 = useCssModule('classes2');