CJJJX's BLOG

当面试被问到JSON.stringify 的作用意义该如何回答呢。网上查到的八股文答案基本都这样回答： 1JSON.stringify(value,replacer,space) 它是一个用于序列化对象的方法，接受三个参数，第一个参数是要被序列化的对象，接受对象或数组类型。第二个参数用于标记需要序列化的属性，接受数组和函数类型。第三个参数用于描述序列化后的缩进字符数，用于美化格式。当然这样的回答也没有错，不过面试考察的更多是我们的实际应用能力以及实战场景，如果只回答八股文的内容，更多的只能体现背诵能力，所以今天整理了 JSON.stringify 的实际应用场景。 场景一：localStorage 的存储前端 localStorage 中只能接受字符串的存储类型，而且它是一个 KV 的结构，我们尝试模拟存储一个对象这种场景： 我们会发现是存储失败的，我们没有办法把整个 obj 存储到 localStorage 中，所以在这种场景下，我们就需要用到 JSON.stringify，把对象先序列化再进行存储： 我们发现这样是可以存储成功的，我们只需要把存进去的对象再进行一次 JSON. ...

Vue中的插槽相信使用过Vue的小伙伴或多或少的都用过，但是你是否了解它全部用法呢？本篇文章整理总结了Vue3中插槽的全部用法用于查漏补缺。 什么是插槽简单来说就是子组件中的提供给父组件使用的一个坑位，用<slot></slot> 表示，父组件可以在这个坑位中填充任何模板代码然后子组件中<slot></slot>就会被替换成这些内容。比如一个最简单插槽例子 123456789101112131415161718//父组件<template> <div> <Child>Hello Juejin</Child> </div></template><script setup lang="ts">import Child from './Child.vue'</script>//子组件Child<template> <div> <p>1</p ...

2023前端面试题整理一(Vue篇)简述 MVVM 框架Model: 代表数据模型，也可以在 Model 中定义数据修改和操作的业务逻辑。 View: 代表 UI 组件，它负责将数据模型转化成 UI 展现出来。 ViewModel: 监听数据模型的改变和控制视图行为、处理用户交互，简单理解就是一个同步 View 和 Model 的对象，连接 Model 和 View。 vue2 和 vue3 区别1.写法上的区别:vue2 使用的是options(选项)Api,vue3 的是composition Api(当然 vue3 也兼容composition api)。options Api中methods，compute，data等 api 都是分散的。而composition api中的代码是根据逻辑功能来组织的,我们可以将一个功能所定义的methods，compute，data等 api 会放在一起,让我们可以更灵活地组合组件逻辑。 2.vue2 将响应式数据放到 data 函数中,而 vue3 则是使用ref和reactive将数据声明为响应式 3.响应式实现方式:vue2 中是通过O ...

rem自适应随着现在互联网设备的日益更新，各大尺寸的屏幕参差不穷 导致我们的布局在某些小屏或者大屏上与UI的表现并不一致 所以，很多人寻求各种解决方案，我们现在的很多移动端框架都是支持了的，包括小程序，很多都采用了rpx的方式，这里不去深究它们的实现方案。 像手机淘宝网，就是在根标签设置font-size，然后使用rem去设置尺寸大小，它们可能有更精细化的优化处理，这里就只实现普通的方法。 淘宝示例图如上 实现过程获取当前的设备宽度1const view_width = document.getElementsByTagName('html')[0].getBoundingClientRect().width; 计算rem的值123// 750 是设计稿的宽度 ， 按设计稿调整// 乘以100 是为了具体宽度值书写不会太大const fontSize = fontSize = 100 * (view_width / 750) + 'px' 赋值到根标签12const _html = document.getElementsByTagName( ...

Vue3 状态管理 - Pinia1. 什么是PiniaPinia 是 Vue 的专属的最新状态管理库 ，是 Vuex 状态管理工具的替代品 2. 手动添加Pinia到Vue项目后面在实际开发项目的时候，Pinia可以在项目创建时自动添加，现在我们初次学习，从零开始： 使用 Vite 创建一个空的 Vue3项目 1npm init vite@latest 按照官方文档安装 pinia 到项目中 3. Pinia基础使用 定义store 组件使用store 4. getters实现Pinia中的 getters 直接使用 computed函数 进行模拟, 组件中需要使用需要把 getters return出去 5. action异步实现方式：异步action函数的写法和组件中获取异步数据的写法完全一致 接口地址：http://geek.itheima.net/v1_0/channels 请求方式：get 请求参数：无 需求：在Pinia中获取频道列表数据并把数据渲染App组件的模板中 6. storeToRefs工具函数使用storeToRefs函数可以辅助保 ...

认识Vue31. Vue2 选项式 API vs Vue3 组合式API1234567891011121314<script>export default { data(){ return { count:0 } }, methods:{ addCount(){ this.count++ } }}</script> 12345<script setup>import { ref } from 'vue'const count = ref(0)const addCount = ()=> count.value++</script> 特点： 代码量变少 分散式维护变成集中式维护 2. Vue3的优势 使用create-vue搭建Vue3项目1. 认识create-vue create-vue是Vue官方新的脚手架工具，底层切换到了 vite ...

一、Vuex 概述目标：明确Vuex是什么，应用场景以及优势 1.是什么Vuex 是一个 Vue 的 状态管理工具，状态就是数据。 大白话：Vuex 是一个插件，可以帮我们管理 Vue 通用的数据 (多组件共享的数据)。例如：购物车数据 个人信息数 2.使用场景 某个状态 在 很多个组件 来使用 (个人信息) 多个组件 共同维护 一份数据 (购物车) 3.优势 共同维护一份数据，数据集中化管理 响应式变化 操作简洁 (vuex提供了一些辅助函数) 4.注意：官方原文： 不是所有的场景都适用于vuex，只有在必要的时候才使用vuex 使用了vuex之后，会附加更多的框架中的概念进来，增加了项目的复杂度 （数据的操作更便捷，数据的流动更清晰） Vuex就像《近视眼镜》, 你自然会知道什么时候需要用它~ 二、需求: 多组件共享数据目标：基于脚手架创建项目，构建 vuex 多组件数据共享环境 效果是三个组件共享一份数据: 任意一个组件都可以修改数据 三个组件的数据是同步的 1.创建项目1vue create vuex-demo 2.创建三个组件, 目录如下1234 ...

一、声明式导航-导航链接1.需求实现导航高亮效果 如果使用a标签进行跳转的话，需要给当前跳转的导航加样式，同时要移除上一个a标签的样式，太麻烦！！！ 2.解决方案vue-router 提供了一个全局组件 router-link (取代 a 标签) 能跳转，配置 to 属性指定路径(必须) 。本质还是 a 标签 ，to 无需 # 能高亮，默认就会提供高亮类名，可以直接设置高亮样式 语法： 发现音乐 1234567891011<div> <div class="footer_wrap"> <router-link to="/find">发现音乐</router-link> <router-link to="/my">我的音乐</router-link> <router-link to="/friend">朋友</router-link> </div> <div clas ...

一、今日学习目标1.自定义指令 基本语法（全局、局部注册） 指令的值 v-loading的指令封装 2.插槽 默认插槽 具名插槽 作用域插槽 3.综合案例：商品列表 MyTag组件封装 MyTable组件封装 4.路由入门 单页应用程序 路由 VueRouter的基本使用 二、自定义指令1.指令介绍 内置指令：v-html、v-if、v-bind、v-on… 这都是Vue给咱们内置的一些指令，可以直接使用 自定义指令：同时Vue也支持让开发者，自己注册一些指令。这些指令被称为自定义指令 每个指令都有自己各自独立的功能 2.自定义指令概念：自己定义的指令，可以封装一些DOM操作，扩展额外的功能 3.自定义指令语法 全局注册 1234567//在main.js中Vue.directive('指令名', {  "inserted" (el) {    // 可以对 el 标签，扩展额外功能 el.focus()  }}) 局部注册 123456789//在Vue组件的配置项中directiv ...

一、今日学习目标1.组件的三大组成部分（结构/样式/逻辑）​ scoped解决样式冲突/data是一个函数 2.组件通信 组件通信语法 父传子 子传父 非父子通信（扩展） 3.综合案例：小黑记事本（组件版） 拆分组件 列表渲染 数据添加 数据删除 列表统计 清空 持久化 4.进阶语法 v-model原理 v-model应用于组件 sync修饰符 ref和$refs $nextTick 二、scoped解决样式冲突1.默认情况：写在组件中的样式会 全局生效 → 因此很容易造成多个组件之间的样式冲突问题。 全局样式: 默认组件中的样式会作用到全局，任何一个组件中都会受到此样式的影响 局部样式: 可以给组件加上scoped 属性,可以让样式只作用于当前组件 2.代码演示BaseOne.vue 12345678910111213<template> <div class="base-one"> BaseOne </div></template><script& ...