5 Vue+html css 问题(西安10.9)

目录

1 问了Vue 和react 的区别 没回答 不会 react

1.computed和wacth的区别

2.使用过哪种路由模式  hash和history的区别

2.2、hash模式

2.3、history 模式

3.style标签的scoped属性的原理

scoped 穿透(深度作用选择器)

4.常用的vue指令 说了大概十个左右

1 v-once

2 v-show

3 v-if、v-else、v-else-if

4 v-for

5 v-text和v-html

6 v-bind

7 v-on

8 v-model

9 v-pre指令

10 v-slot指令

5.vuex的问题 commit和dispatch什么情况下使用

6.vuex数据更新视图不更新 (vuex中操作数据时遇见视图不更新的情况)

6.webpack里loader和plugin是什么  分别用过哪些

webpack 的核心概念都有哪些?

7 你知道哪些优化性能的方法?

7 列举你知道的Web性能优化方法。

7 优化性能-渲染

 7 优化性能-浏览器缓存机制

7 优化性能-请求优化

减少请求数量

7 优化性能-CSS

7.webPack性能优化

1 优化代码运行性能 

1Code Split  2  Preload / Prefetch   3  Network Cache  4  Core - js   5 PWA

Code Split :  

  Preload / Prefetch   懒加载 

 Network Cache  第二次请求资源读取缓存

  Core - js   core-js 是专门用来做 ES6 以及以上 API 的 polyfill

2 提升打包速度 

1HotModuleReplacement(HMR/热模块替换) 2OneOf   3 Include/Exclude 4 Cache 5 Thead

3  减少代码体积 

1 Tree Shaking  2 Babel  3  Image Minimizer

8.怎么判断一个对象是否为空

9.问了一些flex布局的问题 

10 htm5 新特性 

11 css3 新特性 

12 js闭包

13 行内元素

block块级元素

14 px rem 

15 Vue 生命周期钩子 

Vue2.x 和 Vue3.x 生命周期对比

16 Vue数据响应  你知道Vue的数据响应式原理是什么吗

16.2 vue数据的双向绑定原理 ,如何实现vue的双向绑定(面试题)

17 js 异步加载

Vue数据双向绑定原理

Vue2 的响应式原理:

Vue3.x响应式数据原理

Vue3.0 里为什么要用 Proxy API替代 defineProperty API?

Proxy 与 Object.defineProperty 优劣对比

Vue组件通信有哪些方式

vue中组件的data为什么是一个函数?而new Vue 实例里,data 可以直接是一个对象

vue中data的属性可以和methods中方法同名吗,为什么?

虚拟DOM中key的作用

vue开发中,数据更新,但视图不刷新

vue中对mixins的理解和使用

v-show和v-if指令的共同点和不同点

为什么避免v-if和v-for一起使用

Vue.set 改变数组和对象中的属性

vm.$set(obj, key, val) 做了什么?

keep-alive了解吗

什么情况下使用 Vuex?

Vuex和单纯的全局对象有什么区别

为什么 Vuex 的 mutation 中不能做异步操作?

做过哪些Vue的性能优化

Vue3有了解过吗?能说说跟Vue2的区别吗

速度更快

体积更小

更易维护

composition Api

Vue 3.0 所采用的 Composition Api 与 Vue 2.x使用的Options Api 有什么区别?

element-ui中遇到的问题


1 问了Vue 和react 的区别 没回答 不会 react


1.computed和wacth的区别

watch和computed都是以Vue的依赖追踪机制为基础的,它们都试图处理这样一件事情:当某一个数据(称它为依赖数据)发生变化的时候,所有依赖这个数据的“相关”数据“自动”发生变化,也就是自动调用相关的函数去实现数据的变动

watch和computed各自处理的数据关系场景不同

1.computed擅长处理的场景:一个数据受多个数据影响

2.watch擅长处理的场景:一个数据影响多个数据

computed支持缓存,相依赖的数据发生改变才会重新计算;watch不支持缓存,只要监听的数据变化就会触发相应操作

4 computed不支持异步,当computed内有异步操作时是无法监听数据变化的;watch支持异步操作

5 computed属性的属性值是一函数,函数返回值为属性的属性值,computed中每个属性都可以设置set与get方法。watch监听的数据必须是data中声明过或父组件传递过来的props中的数据,当数据变化时,触发监听器

watch跟computed的区别_前端开发小司机的博客-CSDN博客_watch和computed的区别

vue中 computed和watch的一些简单理解(区别)_林_xi的博客-CSDN博客


2.使用过哪种路由模式  hash和history的区别

前端路由:原理篇_Palate的博客-CSDN博客_前端路由原理

使用过history模式  ,

hash 模式 url 里面永远带着 # 号,在开发当中默认使用这个模式。

hash 原理

hash 通过监听浏览器 onhashchange 事件变化,查找对应路由应用。通过改变 location.hash 改变页面路由。

history 原理

利用 html5 的history Interface 中新增的 pushState() 和 replaceState() 方法,改变页面路径。

history Interface 是浏览器历史记录栈提供的接口,可通过 back、forward、go 等,可以读取历览器历史记录栈的信息,pushState、repalceState 还可以对浏览器历史记录栈进行修改。

hash 与 history 区别对比:

5 Vue+html css 问题(西安10.9)_第1张图片

vue-router实现history模式配置_注释科长的博客-CSDN博客_vue配置history模式

2.2、hash模式


1. 原理
​ 使用window.location.hash属性及窗口的onhashchange事件,可以实现监听浏览器地址hash值变化,执行加载相应的内容。

2. 理解要点
什么是hash值

hash指的是地址中#号以及后面的字符,也称为散列值。hash也称作锚点,本身是用来做页面跳转定位的。如http://localhost/index.html#abc,这里的#abc就是hash;

hash值不会发送到服务器

hash值是不会随请求发送到服务器端的,所以改变hash,不会重新加载页面;

监听 hashchange 事件

监听 window 的 hashchange 事件,当散列值改变时,可以通过 location.hash 来获取和设置hash值;

hash值变化反应到地址栏

location.hash值的变化会直接反应到浏览器地址栏;
 

2.3、history 模式


1. 原理
history 对象保存了当前窗口访问过的所有页面网址。history 对象发生改变时,只会改变页面的路径,不会刷新页面。
每当 history 对象出现变化时,就会触发 popstate事件。
2. 理解要点
History 对象

HTML5的History API为浏览器的全局history对象增加的扩展方法。一般用来解决ajax请求无法通过回退按钮回到请求前状态的问题。History 对象保存了当前窗口访问过的所有页面网址。通过 history.length 可以得出当前窗口一共访问过几个网址。

由于安全原因,浏览器不允许脚本读取这些地址,但是允许在地址之间导航。

浏览器工具栏的“前进”和“后退”按钮,其实就是对 History 对象进行操作。

改变url方法

在 history 路由中,我们一定会使用window.history中的方法,常见的操作有:

back():后退到上一个路由;
forward():前进到下一个路由,如果有的话;
go(number):进入到任意一个路由,正数为前进,负数为后退;
pushState(obj, title, url):前进到指定的 URL,不刷新页面;
replaceState(obj, title, url):用 url 替换当前的,不刷新页面;
调用这几种方式时,都会只是修改了当前页面的 URL,不会刷新页面。如果有面试官问起这个问题“如何仅修改页面的 URL,而不发送请求”,那么答案就是这 5 种方法。但前 3 个方法只是路由历史记录的前进或者后退,无法跳转到指定的 URL。

pushState和replaceState 是HTML5 新增的history对象的方法,提供了对历史记录进行修改的功能。页面不会刷新,只是导致 History 对象发生变化,地址栏会有变化。

共同点

改变url地址,不刷新页面
监听url地址变化,加载相应内容
区别

hash会在浏览器地址后面增加#号,而history可以自定义地址。
hash路由不需要服务端的支持,history需要服务端支持,因为hash值不会发给后端,而history模式修改URL地址后,再进行刷新会使用该地址发送请求。

img


3.style标签的scoped属性的原理

 Vue style 属性 scoped 原理详解_薛定谔的panda的博客-CSDN博客_scoped的原理

当 style 标签有 scoped 属性时,它的 CSS 只作用于当前组件中的元素。通过该属性,可以使组件之间的样式互不污染,实现样式的模块化。

通过给 dom 增加一个动态属性,然后 css 选择器也额外添加对应的属性来选择该 dom ,达到该样式只作用于含有该属性的 dom,实现组件样式的模块化。

scoped 原理

主要通过使用 PostCSS 来实现以下转换:

通过给 dom 增加一个动态属性,然后 css 选择器也额外添加对应的属性来选择该 dom ,达到该样式只作用于含有该属性的 dom,实现组件样式的模块化。




 转换结果:




scoped 穿透(深度作用选择器)

如果你希望 scoped 样式中的一个选择器能够作用得“更深”,例如影响子组件,你可以使用 >>> 操作符:

权重等级

  • !important,加在样式属性值后,权重值为 10000
  • 内联样式,如:style=””,权重值为1000
  • ID选择器,如:#content,权重值为100
  • 类,伪类和属性选择器,如: .content、:hover、[data-v-7668812d] 权重值为10
  • 标签选择器和伪元素选择器,如:div、p、:before 权重值为1

通用选择器(*)、子选择器(>)、相邻选择器(+)、同胞选择器(~)、权重值为0
相同权重下:内嵌样式 > 内部样式表 > 外联样式表

我们可以通过改变权重修改样式,scoped 实质就是添加了属性选择器增加了10的权重,我们只要超过他就可以了。

如 vue-loader 提供的 >>> 实质就是为第三方组件增加了外层属性的类,并且该类也带有属性选择器,相当于增加了20的权重。

那么我们可以为组件增加一个命名空间,防止变量污染,然后在当前命名空间下添加选择器增加权重达到修改样式的目的。
 


4.常用的vue指令 说了大概十个左右

1 v-once

只会执行一次渲染,当数据发生改变时,不会再变化

2 v-show

v-show接受一个表达式或一个布尔值。相当于给元素添加一个display属性

3 v-if、v-else、v-else-if

v-if和v-show有同样的效果,不同在于v-if是重新渲染,而v-show使用display属性来控制显示隐藏。频繁切换的话使用v-show减少渲染带来的开销。

说明一下:v-if可以单独使用,而v-else-if,v-else必须与v-if组合使用

v-if、v-else-if都是接受一个条件或布尔值,v-else不需要参数。比较简单,看看案例:

4 v-for

v-for可用来遍历数组、对象、字符串。

只要连续生成一组结构相同,但是内容不同的HTML元素时,都用v-for批量生成

5 v-text和v-html

v-text是渲染字符串,会覆盖原先的字符串

v-html是渲染为html。{{}}双大括号和v-text都是输出为文本。那如果想输出为html。使用v-html,如下例子

6 v-bind

是用可以将标签内的属性值解析成js代码,在标签的属性中使用v-bind,双引号里的内容会被当作js解析(只能解析变量或三元表达式),如下:
如果给属性值设置为一个变量,那么可以使用v-bind
可以缩写为:<属性>="<变量>"

7 v-on

v-on用于事件绑定

语法: v-on:<事件类型>="<函数名>"
简写:@<事件类型>="<函数名>"

8 v-model

数据双向绑定指令,限制在