2024-06-21 记录

1. v-router的生命周期有哪些

原题：以下哪个不属于v-router的生命周期

beforeEach、afterEach、beforeEnter、afterEnter

答案： afterEnter

1.1 全局守卫

1. 全局前置守卫： beforeEach

2. 全局解析守卫：beforeResolve

3. 全局后置守卫：afterEach

// 前置守卫
// 在路由改变前被调用，可以异步执行。
router.beforeEach((to,from,next) => {
    next();
})

// 解析守卫
// 在路由被确认之前，解析所有异步路由组件之后调用。
router.beforeResolve((to,from,next) => {
    next();
})

// 后置守卫
// 在路由改变之后被调用，它不接受 next 函数，也不会改变导航本身。
router.afterEach((to,from) => {
    
})

1.2 路由独享守卫

1. beforeEnter

const router = new VueRouter({
    routes:[
        {
            path:"/",
            component: () => import("@/index"),
            // 在路由配置中直接定义，进入路由前调用。
            beforeEnter((to,from,next) => {
                next()
            })
        }
    ]
})

1.3 组件内的守卫

beforeRouteEnter：在渲染该组件的对应路由被确认前调用。此时无法获取到组件实例，因为当守卫执行前，组件实例还没被创建。

beforeRouteUpdate (2.2+)：在当前路由改变，但是该组件被复用时调用。例如，对于带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。

beforeRouteLeave：导航离开该组件的对应路由时调用。

---

2. 小程序路由跳转

2.1 wx.navigateTo

• 功能：保留当前页面，跳转到应用内的某个页面。但不能跳转到tabBar页面。
• 参数：
  • url：应用内页面的路径，可以带查询参数，路径后接?key=value的形式，参数可带多个，用&符号隔开。
• 特点：页面栈最多只能存储10个页面。
• 示例：wx.navigateTo({ url: '/pages/list/list?id=1' })

2.2 wx.redirectTo

• 功能：关闭当前页面，跳转到应用内的某个页面。但同样不能跳转到tabBar页面。
• 参数：与wx.navigateTo相同，需要url参数指定跳转路径。
• 特点：与wx.navigateTo不同，wx.redirectTo会关闭当前页面。
• 示例：wx.redirectTo({ url: '/pages/detail/detail?id=1' })

2.3 wx.switchTab

• 功能：跳转到tabBar页面，并关闭其他所有非tabBar页面。
• 参数：
  • url：必须是tabBar中页面的路径（不带查询参数）。
• 特点：只能用于跳转到tabBar页面，并且会关闭其他所有非tabBar页面。
• 示例：wx.switchTab({ url: '/pages/index/index' })

2.4 wx.reLaunch

• 功能：关闭所有页面，打开到应用内的某个页面(也能跳转到Tabbar页)。
• 参数：与wx.navigateTo相同，需要url参数指定跳转路径。
• 特点：会关闭当前小程序的所有页面，打开到应用内的某个页面。
• 示例：wx.reLaunch({ url: '/pages/login/login' })

2.5 wx.navigateBack

• 功能：关闭当前页面，返回上一页面或多级页面。
• 参数：
  • delta：返回的页面数，如果 delta 大于现有页面数，则返回到首页。默认为1。
• 特点：可以根据delta参数返回上一页面或多级页面。
• 示例：wx.navigateBack({ delta: 2 }) // 返回上两级页面

---

3. POST请求和GET请求

问：http中get请求是明文请求，post请求是密文请求。get请求有没有参数长度限制

答：

1. 无论是GET还是POST请求，它们本身都是基于HTTP协议的，而HTTP协议在默认情况下都是明文传输的，即数据以明文形式在网络中传输，不经过加密。因此，GET请求和POST请求在默认情况下都是明文请求。

2. 对于长度，GET请求在默认情况下是明文请求，并且其参数长度受到浏览器和服务器等多种因素的限制。由于存在上述限制，当需要传递大量参数时，建议使用POST请求而不是GET请求。POST请求将数据放在请求体中，而不是URL中，因此不受URL长度的限制。

3. GET请求的参数并不局限于ASCII码，但可以包含任何字符。当参数包含非ASCAII字符时，需要进行适当的编码才能确保在URL中正常传输。GET请求的参数在传输过程中被编码为ASCII字符，但它们的原始数据类型可以是多样的，如字符串、数字、布尔值等。当服务器接收到GET请求后，它会解析URL中的查询字符串，将参数还原为原始数据类型并进行处理。

---

4.微信小程序登录过程

官方流程图

---

5. localStorage、sessionStorage、cookie

5.1区别

1. 存储位置与方式：
   • 三者都保存在浏览器端，且是同源的。
   • localStorage和sessionStorage是Web Storage API的一部分，将数据保存在客户端的浏览器中，不会随HTTP请求发送到服务器。
   • Cookie则是服务器发送到用户浏览器并保存在用户计算机上的小型文本文件，每次HTTP请求都会携带cookie数据，在浏览器和服务器之间传递。
2. 存储大小限制：
   • Cookie数据的大小限制通常不超过4K，因为每次HTTP请求都会携带cookie，所以只适合保存很小的数据，如会话标识。
   • localStorage和sessionStorage的存储大小限制通常比cookie大得多，可以达到5M或更大，因此可以存储更多的数据。
3. 数据有效期：
   • localStorage的数据始终有效，即使窗口或浏览器关闭也会一直保存，因此通常用于存储持久数据。
   • sessionStorage的数据仅在当前浏览器窗口关闭之前有效，一旦窗口关闭，数据就会被清除。
   • Cookie的有效期由设置的过期时间决定，在过期时间之前都有效，即使窗口关闭或浏览器关闭。
4. 作用域与共享性：
   • localStorage的数据在所有同源的浏览器窗口中都是共享的。
   • sessionStorage的数据不在不同的浏览器窗口中共享，即使是同一个页面。
   • Cookie也在所有同源的浏览器窗口中共享。
5. 使用场景：
   • localStorage常用于存储用户偏好设置、购物车信息、游戏数据存档等需要持久保存的数据。
   • sessionStorage常用于缓存数据、存储用户信息和表单数据等临时数据。
   • Cookie主要用于会话管理、用户跟踪等需要跨页面或跨请求保持状态的情况。
6. 安全性：
   • 由于cookie在HTTP请求中传递，因此存在被窃取的风险，特别是在不安全的网络环境下。
   • localStorage和sessionStorage相对更安全，因为它们的数据仅在客户端存储，不会随请求发送到服务器。
7. API接口与易用性：
   • Web Storage（localStorage和sessionStorage）提供了更现代、更易于使用的API接口，如setItem()、getItem()等。
   • Cookie的操作通常涉及设置HTTP响应头或使用JavaScript的document.cookie属性，相对较为繁琐。

5.2 cookie能修改吗

        Cookie可以被手动修改。具体来说，开发者可以通过编程方式在服务器端或客户端修改Cookie的值。在服务器端，可以通过设置HTTP响应头中的Set-Cookie字段来修改或添加Cookie。在客户端，可以使用JavaScript的document.cookie属性来读取、修改或删除Cookie。

然而，需要注意的是，手动修改Cookie可能存在一定的安全风险。例如，如果Cookie中存储了敏感信息（如用户密码、会话令牌等），并且这些信息被恶意程序或用户获取并修改，那么可能会导致数据泄露或会话劫持等安全问题。因此，在存储敏感信息时，通常需要对Cookie进行加密处理，以确保数据的安全性。

5.3 Cookie能存储复杂数据类型吗

        Cookie不能直接存储复杂数据类型的数据。因为Cookie只能存储字符串类型的数据。如果需要存储复杂数据类型（如数组、对象等），需要进行序列化和反序列化操作。

---

6. instanceOf能检测简单数据类型的构造函数是谁吗

        对于简单数据类型，instanceof 并不能直接检测它们的“构造函数”，除非你使用这些构造函数的显式调用来创建包装对象。但在实际编程中，通常不需要这样做。

对于简单数据类型，例如number,string,boolean。在JavaScript中通过字面量创建的时，这些字面量并不是直接使用对应的构造函数Number,String,Boolean显式创建的。而是通过隐式包装对象来处理的。

let num = 123
console.log(num instanceOf Number) // false

let str = 'sne'
console.log(str instanceOf String) // false

除非显示调用对应的构造函数创建

let num = new Number(123)
console.log(num instanceof Number) // true

let str = new String("sne")
console.log(str instanceof String) // true

---

7. 在vue中遇到computed、methods、watch中有相同名称的项，执行的优先级是怎么样的

这三者其实并没有一个优先级的概念，因为这三者的工作方式和用途是不同的，但是，如果在模板中引用了这个名称，vue会按照以下方式进行处理：

1. 首先，vue会查看是否有一个同名的computed属性，如果有，他就会使用这个计算属性的值。

2. 如果没有同名的computed属性，Vue会查看data对象中是否有这个属性，如果有，它就会使用这个属性的值。

3. 如果既不是computed属性也不是data属性，但在methods中有同名的方法，那么你不能直接在模板中调用这个方法，因为它不是一个值，例如{{ textMthod }}，但是可以在事件处理器或其他方法中调用它。

4. watch选项中的同名项是用于观察数据变化的，而不是为了在模板中直接引用，它会在指定的数据属性发生变化时执行一个回调函数。

<template>  
  <div>  
    {{ myValue }} <!-- 这里会引用 computed 属性，而不是 methods 中的方法 -->  
    <button @click="myValue"> <!-- 这里是错误的，因为你不能“调用”computed 属性 -->  
      Click Me  
    </button>  
  </div>  
</template>  
  
<script>  
export default {  
  data() {  
    return {  
      // ...  
    };  
  },  
  computed: {  
    myValue() {  
      // ... 计算逻辑  
      return someValue;  
    }  
  },  
  methods: {  
    myValue() {  
      // ... 方法逻辑  
      console.log('This will never be called directly from the template');  
    }  
  }  
};  
</script>

综上如果三者有相同的项，会在模板中先使用computed中的项，其次是data, 最后是methods。

对于watch不会直接在模板中使用，因此不存在优先级的说法。