优快云话题挑战赛第2期
参赛话题：面试宝典
前请提要
今年我的第一个面试是在我们本地的二线城市，当时我高兴极了，作为一个专升本的同学，这一路的经历并不平凡，从专科时候选修的web课程到自学vue，到专科被本地公司录取，并在3个月内转正，再到拿到本科录取通知，主动请辞工作，我一直在充实的生活环境里成长，在本科阶段我一边修学课程，一边做兼职项目，再到从一点英语底子没有，在1年时间内考下了英语四级，我很开心，一路的努力都有了自己想要的答案；这不，从各种投递渠道，我拿到了本地中型公司的面试通知；
面试流程
线上叮叮面试
人事与我单独交流
- 互相打招呼
- 说了我为什么拿到了面试（实践经历丰富）
- 问我是否准备好，拉入技术负责人
技术负责人开始面试，人事旁听
面试题
面试题一：
你熟悉的框架是什么？
问题剖析：
这里面试官会考究我们所用框架是否符合公司需求及未来发展
问题解答：
我回答了vue，也是我最熟练的框架，这里不是说能制作基本的业务就行了，扩展讲了vue的生态;
面试题二：
说说你对cookies，sessionStorage和localStorage的理解
问题剖析：
这个题在面试前我就背了，而且印象很深，所以 古人云 凡事预则立，不预则废； 云的很有道理，像这类关键技术常用技术，你不会就是你实践不到位了
问题解答：
共同点：都是保存在浏览器端，且是同源的。
cookies是为了标识⽤户⾝份⽽存储在⽤户本地终端上的数据，始终在同源http请求中携带，即cookies在浏览器和服务器间来回传,sessionstorage和localstorage不会⾃动把数据发给服务器，仅在本地保存。
存储⼤⼩的限制不同。cookie保存的数据很⼩，不能超过4k，⽽sessionstorage和localstorage保存的数据⼤，可达到5M。
数据的有效期不同。cookie在设置的cookie过期时间之前⼀直有效，即使窗⼝或者浏览器关闭。sessionstorage仅在浏览器窗⼝关
闭之前有效。localstorage始终有效，窗⼝和浏览器关闭也⼀直保存，⽤作长久数据保存。
作⽤域不同。cookie在所有的同源窗⼝都是共享；sessionstorage不能共享，即使同⼀页⾯；localstorage在所有同源
就这样我几乎把细节都说了出来，面试官欣慰的点了头，最后又问了一些vue的基础知识，总体面试难度不难，面试结果是未通过，也许是我的薪资要的太高了；
个人经验总结
充分准备，再去面试；准备好你拿的出手的项目，最好是经过部署的，上线的，而后要认清自己，到底去那里最合适
资料总结/刷题指南
最后我在这里准备了一些我的面试资料，就是初期网上搜集的一些；大家参考； 这个是html格式，我总结下来拿手机的html查看器方便手机背；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>面试总结</title>
</head>
<style>
.content {
display: flex;
flex-direction: column;
}
span {
font-weight: 600;
color: red;
}
p {
text-indent: 2em;
}
h3 {
color: rgb(13, 13, 185);
}
code {
text-indent: 2rem;
}
</style>
<body>
<div class="content">
<h3>!DOCTYPE有什么作⽤？标准模式与混杂模式如何区分？它们有何意义?</h3>
<p>告诉浏览器使⽤哪个版本的HTML规范来渲染⽂档。</p>
<p>DOCTYPE不存在或形式不正确会导致HTML⽂档以<span>混杂模式</span>呈现。</p>
</div>
<div class="content">
<h3>⾏内元素</h3>
<p>a span img input select label i b</p>
</div>
<div class="content">
<h3>块级元素</h3>
<p>div ul ol li dl dt dd h1 p</p>
</div>
<div class="content">
<h3>浏览器内核有哪些</h3>
<p>Safari：Webkit</p>
<p>Chrome:现在是Blink内核</p>
<p>IE：Trident内核</p>
<p>360，猎豹浏览器：IE+chrome双内核</p>
</div>
<div class="content">
<h3>浏览器内核工作原理</h3>
<p>渲染引擎:负责解析html/xhtml/图形等文件，渲染网页，不同的内核渲染结果有差异</p>
<p>JS引擎：解析和执⾏javascript来实现⽹页的动态效果。</p>
</div>
<div class="content">
<h3>HTML5有哪些新特性</h3>
<p>新增加了图像、位置、存储、多任务等功能。</p>
<p>canvas ，video，audio，语义化标签，nav，article，表单控件：calender,date,time...</p>
</div>
<div class="content">
<h3>HTML语义化</h3>
<p>没有样式时可以让页⾯呈现出清晰的结构。</p>
<p>有利于SEO和搜索引擎建⽴良好沟通，有助于爬⾍抓取更多的信息</p>
<P>可以增强可读性</P>
</div>
<div class="content">
<h3>cookies，sessionStorage和localStorage</h3>
<p>共同点：都是保存在浏览器端，且是同源的。</p>
<p>cookies是为了标识⽤户⾝份⽽存储在⽤户本地终端上的数据，始终在同源http请求中携带，即cookies在浏览器和服务器间来回传,sessionstorage和localstorage不会⾃动把数据发给服务器，仅在本地保存。
</p>
<p>存储⼤⼩的限制不同。cookie保存的数据很⼩，不能超过4k，⽽sessionstorage和localstorage保存的数据⼤，可达到5M。</p>
<p>数据的有效期不同。cookie在设置的cookie过期时间之前⼀直有效，即使窗⼝或者浏览器关闭。sessionstorage仅在浏览器窗⼝关
闭之前有效。localstorage始终有效，窗⼝和浏览器关闭也⼀直保存，⽤作长久数据保存。</p>
<p>作⽤域不同。cookie在所有的同源窗⼝都是共享；sessionstorage不能共享，即使同⼀页⾯；localstorage在所有同源</p>
</div>
<div class="content">
<h3>.label属性</h3>
<p>label标签⽤来定义表单控件间的关系</p>
<p>for:对焦表单id</p>
<P>accesskey:热键对焦</P>
</div>
<div class="content">
<h3>浏览器内多个标签页之间的通信</h3>
<p>WebSocket</p>
<p>也可以调⽤ localstorge、cookies 等本地存储⽅式。 localstorge 在另⼀个浏览上下⽂⾥被添加、修改或删除时，它都会触发⼀个</p>
</div>
<div class="content">
<h3>a标签</h3>
<p>:link,未被访问时</p>
<p>:visited,访问后</p>
<p>:hover,悬浮时</p>
<p>:active,鼠标点击-松开期间</p>
</div>
<div class="content">
<h3>⽹页验证码</h3>
<p>区分⽤户是计算机还是⼈的程序;防止恶意攻击，如分布式拒绝服务攻击(DDoS)</p>
</div>
<div class="content">
<h3>标签语义</h3>
<p>视觉样式标签：b i u s</p>
<p>语义样式标签：strong em ins del code</p>
</div>
<div class="content">
<h3>xhtml/html</h3>
<p>html元素必须正确嵌套，不能乱</p>
<p>html属性必须是⼩写的</p>
<P>html属性值必须加引号；</P>
</div>
<div class="content">
<h3>图片格式</h3>
<p>jpg是有损压缩格式，体积小</p>
<p>png是⽆损压缩格式，8位，24位</p>
<P>svg是可缩放的矢量图形，基于xml,高分辨率</P>
<p>webp同时提供了有损压缩与无损压缩（可逆压缩）的图片文件格式,为了减少文件大小</p>
</div>
<div class="content">
<h3>div+css 的布局</h3>
<p>⽅便改版和SEO</p>
<p>表现与结构相分离</p>
<P>页⾯加载速度更快、结构化清晰</P>
</div>
<div class="content">
<h3>meta viewport</h3>
<p>viewport是虚拟窗口，在移动端浏览器下出现</p>
<p>meta viewport 标签的作⽤是让当前 viewport 的宽度等于设备的宽度，同时不允许⽤户进⾏⼿动缩放</p>
</div>
<div class="content">
<h3>Canvas</h3>
<p>Canvas 元素⽤于在⽹页上绘制图形，该元素标签强⼤之处在于可以直接在 HTML 上进⾏图形操作。包括不限于验证码生成，动画效果</p>
</div>
<hr>cssend
<div class="content">
<h3>css盒子模型</h3>
<p>content,padding,border,margin</p>
</div>
<div class="content">
<h3>Sass、scss、less</h3>
<p>同属于动态样式语言，比css多出很多功能（如变量、嵌套、运算,混入(Mixin)、继承、颜色处理，函数等）</p>
<p>Sass是一款css预处理语言,sass是靠缩进表示嵌套关系,与css规范不符，所以不被广为接受</p>
<p>SASS版本3.0之前的后缀名为.sass，而版本3.0之后的后缀名.scss。</p>
<p>scss一款css预处理语言,SCSS 是 Sass 3 引入新的语法，其语法完全兼容 CSS3，并且继承了 Sass 的强大功能,语法与css3相同，后缀.scss</p>
<p>SCSS 是 Sass 3 引入新的语法，其后缀名是分别为 .sass和.scss两种</p>
<p>scss是sass的一个升级版本，完全兼容sass之前的功能</p>
<p>LESS，精简样式表，语法与scss大同小异,变量声明上less-@,scss-$</p>
<p>引入外部文件 scss: import 开题必须为_，less则与css引入无异</p>
<p>sass的安装需要Ruby环境，是在服务端处理的，而less是需要引入less.js来处理less代码输出css到浏览器</p>
<p>在一般前端项目里面使用 yarn add less yarn add less-loader添加到对应的项目里面</p>
</div>
<div class="content">
<h3>css层叠样式表</h3>
<p>流布局，float改变流</p>
<p>css画三角形 ：div的width和height为0，只用边框宽来填充，边框样式设置为实线“solid”；然后顶部边框设置颜色，剩下的三个边框的颜色设置为透明“transparent”值即可。</p>
<P>css实现元素垂直居中 ： table布局（vertical-align:middle），flex 布局, absolute绝对定位+translate, 行内元素 line-height 布局</P>
<p>css样式优先级：！important > style 1000 >Id 100 > class 10 > tag 1 </p>
<p>display:none ; 彻底消失，会引发页面重排</p>
<p>visibility:hidden; 单纯隐藏，位置还在，和opacity:0一样</p>
</div>
<div class="content">
<h3>BFC</h3>
<p>块级格式化上下文,独立渲染区域，规定了内部box如何布局，并且与这个区域外部毫不相干</p>
<p>作用：避免margin重叠；自适应两栏布局；清除浮动。</p>
<P>触发：float的值不是none；position的值不是static或者relative；display的值是inline-block、block、table-cell、flex、table-caption或者inline-flex；overflow的值不是visible。
</P>
</div>
<div class="content">
<h3>px、em、rem、vh、vw</h3>
<p>px物理像素，绝对单位；</p>
<p>em相对于自身字体大小，自身没有会向上寻找，相对单位</p>
<P>rem相对于html的字体大小，相对单位</P>
<p>vh,屏幕高度</p>
<p>vw,屏幕宽度</p>
</div>
<div class="content">
<h3>css可继承的属性</h3>
<p>可继承的属性：文本类：text-indent、text-align、line-height、word-spacing、letter-spacing、text-transform、direction、color；</p>
<p>字体类：font、font-family、font-weight、font-size、font-style</p>
<P>visibility、caption-side、border-collapse、border-spacing</P>
</div>
<div class="content">
<h3>scss是什么 :css的预编译语言</h3>
<p>先装css-loader、node-loader、sass-loader等加载器模块；</p>
<p>style标签加上lang属性 ，例如：lang=”scss”</p>
</div>
<div class="content">
<h3>JSONP的原理</h3>
<p>jsonp是使用方法回调的原理</p>
<code>function showjson(json){
alert(json.url);
}</code>
</div>
<hr> js
<div class="content">
<h3>线程和进程</h3>
<p>进程：cpu分配资源的最小单位（是能拥有资源和独立运行的最小单位）</p>
<p>线程：是cpu最小的调度单位（线程是建立在进程的基础上的一次程序运行单位，一个进程中可以有多个线程）</p>
<p>一个进程内有多个线程，执行过程是多条线程共同完成的，线程是进程的部分。</p>
</div>
<div class="content">
<h3>为什么js是单线程</h3>
<p>JS是单线程的原因主要和JS的用途有关，JS主要实现浏览器与用户的交互，以及操作DOM</p>
<p>为了避免复杂情况的产生（如多线程操作dom）</p>
<p>HTML5提出Web Worker标准，允许JavaScript脚本创建多个线程，但是子线程完全受主线程控制，且不得操作DOM。</p>
</div>
<div class="content">
<h3>js基本数据类型</h3>
<p>string, number, boolean, undefiend, null, symbol</p>
<p> number、boolean 和 string 有包装对象,代码运行的过程中会找到对应的包装对象，然后包装对象把属性和方法给了基本类型，然后包装对象被系统进行销毁。</p>
</div>
<div class="content">
<h3>内存泄漏</h3>
<p>闭包(全局变量和局部变量问题)：能够读取其他函数内部变量的函数。</p>
<code>
function f1(){
var n=999;
function f2(){
alert(n); // 999
}
}
</code>
<p>意外的全局变量</p>
<p>遗忘的定时器</p>
</div>
<div class="content">
<h3>js数组对象操作</h3>
<p>数组合并：arr1.concat(arr2, ······)</p>
<p>对象合并:Object.assign()</p>
<code>et obj1 = {name: '温情'}
let obj2 = {age: '22'}
const newObj = Object.assign({}, obj1, obj2);</code>
</div>
<div class="content">
<h3>作用域，什么是作用域链</h3>
<p>规定变量和函数的可使用范围称为作用域</p>
<p>查找变量或者函数时，需要从局部作用域到全局作用域依次查找，这些作用域的集合称作用域链。</p>
</div>
<div class="content">
<h3>js异步编程</h3>
<p>回调函数(callback)；存在地狱回调问题，难以维护</p>
<p>事件监听。不取决于代码执行顺序</p>
<p>Promise</p>
<p>Generator</p>
<p>生成器 async/await,是ES7提供的一种解决方案。</p>
</div>
<div class="content">
<h3>堆内存，栈内存</h3>
<p>栈内存主要用于存储各种基本类型的变量</p>
<p>堆内存主要负责像对象Object这种变量类型的存储</p>
</div>
<div class="content">
<h3>判断类型</h3>
<p>typeof 判断基本类型，null属于object</p>
<p>instanceof不能检测基本数据类型，它是用来判断个实例是否属于某种类型</p>
</div>
<div class="content">
<h3>跨域</h3>
<p>JSONP：jsonp就利用了script标签进行跨域取得数据，不能解决post</p>
<p>ajax实现跨域:dataType:'jsonp', //=> 执行jsonp请求</p>
<p>CORS跨域资源共享,服务端设置Access-Control-Allow-Origin就可以开启CORS,不安全</p>
<p>Nginx反向代理</p>
<p>脚手架配置跨域，将服务端域模拟为本地域</p>
</div>
<div class="content">
<h3>js内置对象</h3>
<p>数据封装类对象：Object、Array、Boolean、Number 和 String
其他对象：Function、Arguments、Math、Date、RegExp、Error....</p>
</div>
<div class="content">
<h3>防抖和节流</h3>
<p>函数防抖
当持续触发事件时，一定时间段内没有再触发事件，事件处理函数才会执行一次 : 输入搜索</p>
<p>函数节流
当持续触发事件时，保证在一定时间内只调用一次事件处理函数</p>
<p>防抖是将多次执行变为最后一次执行，节流是将多次执行变为每隔一段时间执行</p>
<p>代码区别就在于if这里是清除定时器还是直接return终止函数</p>
</div>
<div class="content">
<h3>apply(),call(),bind()</h3>
<p>apply（）和call（）都是每个函数或对象都拥有的非继承的方法。都是用来改变this的指向的</p>
<p>db理解为作用域</p>
<code>obj.myFun.call(db,'成都','上海')； // 德玛 年龄 99 来自 成都去往上海
obj.myFun.apply(db,['成都','上海']); // 德玛 年龄 99 来自 成都去往上海
obj.myFun.bind(db,'成都','上海')(); // 德玛 年龄 99 来自 成都去往上海
obj.myFun.bind(db,['成都','上海'])(); // 德玛 年龄 99 来自 成都, 上海去往 undefined</code>
<p>all 的参数是直接放进去的，第二第三第 n 个参数全都用逗号分隔</p>
<p>apply 的所有参数都必须放在一个数组</p>
<p>bind 除了返回是函数以外，它 的参数和 call 一样。</p>
</div>
<div class="content">
<h3>setImmediate</h3>
<p>setImmediate表示立即执行，它是宏任务，回调函数会被放置到事件循环的check阶段。</p>
<p>在应用中如果大量的计算型任务，它是不适合放在主线程中执行的，因为计算任务会阻塞主线程，主线程一旦被阻塞，其他任务就需要等待，</p>
</div>
<div class="content">
<h3>for-in,for-of</h3>
<p>for in 和 for of 都可以循环数组,for in 遍历数组(下标)、遍历对象(key)，而for of 遍历数组和对象的值</p>
<p>for in 可以遍历对象，for of 不能遍历对象，只能遍历带有iterator接口的，例如Set,Map,String,Array</p>
<p>for in适合遍历对象，for of适合遍历数组。</p>
<p>for in遍历的是数组的索引，对象的属性，以及原型链上的属性。</p>
</div>
<hr>'js-end'
<div class="content">
<h3>vue 与 react 框架核心价值</h3>
<p>组件化，嵌入开发</p>
<p>数据视图分离，数据驱动视图 利用vdom</p>
<p>关注于业务数据</p>
</div>
<div class="content">
<h3>为什么使用vue</h3>
<p>渐进式框架 ：有极高的维护和扩展特性</p>
<p>与现代化工具链，第三方库整合良好</p>
<p>MVVM设计模式 ：双向数据绑定，数据-视图分离</p>
<p>体积小，市场成熟</p>
<p>有成熟的构建工具支持</p>
</div>
<div class="content">
<h3>vdom (virtual dom) 虚拟dom</h3>
<p>虚拟DOM，DOM树的虚拟表现。因为改变真实dom代价太大，会引发dom重排</p>
</div>
<div class="content">
<h3>React / Vue 项目时为什么要在列表组件中写 key</h3>
<p>key 是给每一个 vnode 的唯一 id,可以依靠 key,更准确,更快的拿到 oldVnode 中对
应的 vnode 节点</p>
</div <div class="content">
<h3>vdom key的作用</h3>
<p>key最好为唯一标识</p>
<p>key是虚拟DOM对象的标识，当状态中的数据发生变化时，Vue会根据【新数据】生成【新的虚拟DOM】，随后Vue进行【新虚拟DOM】的差异比较，也就是diff算法，比较无差异的节点不需要更新</p>
</div>
<div class="content">
<h3>data，state</h3>
<p>保证组件的独立性和可复用性</p>
</div>
<div class="content">
<h3>vue 响应式系统</h3>
<p>任何一个 Vue Component 都有一个与之对应的 Watcher 实例</p>
<p>computed擅长处理的场景：一个数据受多个数据影响；watch擅长处理的场景：一个数据影响多个数据。</p>
<p>功能上：computed是计算属性，watch是监听一个值的变化，然后执行对应的回调。</p>
</div>
<div class="content">
<h3>Vue的生命周期</h3>
<p>将要创建 ===>调用beforeCreate函数
创建完毕 ===>调用created函数
将要挂载 ===>调用beforeMount函数
挂载完毕 ===>调用mounted函数
将要更新 ===>调用beforeUpdate函数
更新完毕 ===>调用uodated函数
将要销毁 ===>调用beforeDestory函数
销毁完毕 ===>调用destroyed函数</p>
<p>vue3 create周期被合并到了setup阶段</p>
<p>第一次页面加载时会触发 beforeCreate, created, beforeMount, mounted 这几个钩子</p>
<p>DOM 渲染在 mounted 中就已经完成了。</p>
<p>onActivated(): 被包含在 'keep-alive' 中的组件，会多出两个生命周期钩子函数，被激活时执行；
onDeactivated(): 比如从 A 组件，切换到 B 组件，A 组件消失时执行；</p>
<p>onErrorCaptured //错误警告
onRenderTracked // 状态跟踪
onRenderTriggered //状态触发</p>
</div>
<div class="content">
<h3>组件之间是怎么通信的</h3>
<p>父子传参：父组件通过自定义属性的方式传参，通过props属性给子组件传参，子组件通过props属性去接收参数。</p>
<p>子父传参：子组件通过自定义事件的方式传参，通过$emit去进行传参。</p>
<p>单向数据流:父级 prop 的更新会向下流动到子组件中，但是反过来则不行,防止从子组件意外变更父级组件的状态及复杂理解</p>
<p><span>vue3</span>通信</p>
<p>Provide/inject 子父组件穿透通信</p>
<p>vue3 宏编译函数 不需要导入</p>
<p>defineProps,defineEmits</p>
</div>
<div class="content">
<h3>vue3</h3>
<p>没有this</p>
<p>用组合式 API 和 'script setup' 编写的 ,函数式编程</p>
</div>
<div class="content">
<h3>自定义组件</h3>
<p>在 components 目录新建组件文件
在需要用到的页面import中导入</p>
<p></p>
</div>
<div class="content">
<h3>CSS 只在当前组件中起作用</h3>
<p>修改为'style scoped'</p>
</div>
<div class="content">
<h3>Vue 路由跳转的几种方式w</h3>
<p>第一种方式：router-link （声明式路由）
第二种方式：router.push(编程式路由)
第三种方式：this.$router.push() (函数里面调用)
第四种方式：this.$router.replace() (用法同上,push)
第五种方式：this.$router.go(n)</p>
</div>
<div class="content">
<h3>Vue的路由实现：hash模式和history模式</h3>
<p>hash 模式 (默认)
工作原理:监听网页的hash值变化 —>onhashchange事件, 获取location.hash
使用 URL 的 hash 来模拟一个完整的 URL，于是当 URL 改变时，页面不会重新加载。
会给用户好像跳转了网页一样的感觉, 但是实际上没有跳转
主要用在单页面应用(SPA)</p>
<p>history 模式
工作原理: 主要利用history.pushState() API 来改变URL, 而不刷新页面.</p>
</div>
<div class="content">
<h3>Vue与Angular以及React的区别</h3>
<p>Angular 是一个应用设计框架与开发平台，用于创建高效、复杂、精致的单页面应用。</p>
<p>React 是一个用于构建用户界面的 JavaScript 库</p>
<p>ue (读音 /vju/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue
的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。</p>
</div>
<div class="content">
<h3>vue-router中导航守卫有哪些</h3>
<p>全局前置守卫、路由独享守卫、组件内守卫</p>
</div>
<div class="content">
<h3>vue-指令</h3>
<p>v-if：判断是否隐藏；
v-for：数据循环；
v-bind:class：绑定一个属性；
v-model：实现双向绑定；</p>
<p>自定义指令</p>
<p>自定义指令需要通过 directives 选项注册</p>
<p>可以全局注册和组件内注册</p>
</div>
<div class="content">
<h3>v-if , vi-show</h3>
<p>v-if 控制dom节点 ,v-if隐藏会将组件销毁,且切换销毁高</p>
<p>v-show 通过display，更高的初始渲染消耗，不会阻止事件监听</p>
</div>
<div class="content">
<h3>vuex框架中状态管理,vue3,pinia更轻量易用</h3>
<p>场景有：单页应用中，组件之间的状态，音乐播放、登录状态、加入购物车等。</p>
<p>State、 Getter、Mutation 、Action、 Module。</p>
<p>Action 类似于 mutation，不同在于：Action 提交的是 mutation，而不是直接变更状态</p>
</div>
<div class="content">
<h3>keep-alive 的作用是什么</h3>
<p>包裹动态组件时，会缓存不活动的组件实例，主要用于保留组件状态或避免重新渲染；</p>
</div>
<div class="content">
<h3>vue-loader </h3>
<p>解析.vue文件的一个加载器。</p>
<p>用途：js 可以写es6、style样式可以scss或less、template可以加jade等。</p>
</div>
<div class="content">
<h3>vue dom 操作 通过ref</h3>
<p>$el对象操作样式</p>
<p>$parent,$children 操作节点</p>
<p>vm.$emit( event, arg ) //触发父级实例上的事件</p>
<p>$refs ,它仅仅是一个直接操作子组件的应急方案</p>
<p> $on(eventName) 监听当前实例上的自定义事件</p>
</div>
<div class="content">
<h3>vue，目录说法</h3>
<p>assets件夹是放静态资源；components是放组件；router是定义路由相关的配置;view视图；app.vue是个应主组件；main.js是件</p>
<p>package.json 依赖配置</p>
</div>
<div class="content">
<h3>vue常的修饰符</h3>
<p>stop:等统JavaScript中的event.stopPropagation(),防事件冒泡</p>
<p>prevent:等同于JavaScript中的event。preventDefault(),防执预设的为(如果事件可取消，则取消该事件，不停事件的进步
传播)；</p>
<p>capture:与事件冒泡的向相反，事件捕获由外到内</p>
<p>self:只会触发范围内的事件，不包含元素</p>
<p>.once:只会触发1次。</p>
</div>
<div class="content">
<h3>初始化闪动</h3>
<p>初始化前，div不被vue管理，容易花屏</p>
<p>在css加上[v-cloak]{display:none;}，如果没有彻底解决问题，则在根元素加上style=“display:none;” :style=“{display:block}”</p>
</div>
<div class="content">
<h3>vue更新数组时触发视图更新的方法</h3>
<p>push();pop();shift();unshift();splice();sort();reverse()</p>
</div>
<div class="content">
<h3>vue mock数据</h3>
<p>模拟响应数据，模拟各种场景</p>
<p>后端接没有开发完成之前，前端可以已有的接档，在真实的请求上拦截ajax，并根据mockjs的mock数据的规则，模拟真实接返回的数据</p>
</div>
<div class="content">
<h3>vue深度组件传参排错</h3>
<p>确保无拼写错误的情况下：watch监听函数的deep参数来深度监听</p>
<p>因为组件通信是由父组件到子组件为单向数据流，所以需要确保参数衔接问题</p>
<p>如果依然无法排除出错误，可以使用vue3的provide及inject透传</p>
</div>
<div class="content">
<h3>ref,toref,torefs</h3>
<p>ref的本质是拷贝，修改响应式数据，不会影响到原始数据，视图会更新</p>
<p>toRef、toRefs的本质是引用，修改响应式数据，会影响到原始数据，视图不会更新</p>
<p>toRef 一次仅能设置一个数据，接收两个参数，第一个参数是哪个对象，第二个参数是对象的哪个属性</p>
<p>toRefs接收一个对象作为参数，它会遍历对象身上的所有属性，然后挨个调用toRef执行</p>
<p>toRefs如果用来转props将会使参数失去父组件响应式流，从而变为独立页面ref</p>
</div>
</body>
<script>
</script>
</html>
☃️ 个人简介：一个喜爱技术的人。
🌞 励志格言: 脚踏实地，虚心学习。
❗如果文章还可以，记得用你可爱的小手点赞👍关注✅，我会在第一时间回、回访，欢迎进一步交流。
扫一扫
2801
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
