面试之一

一、第一家：

1.vue中computer和fliter和watch，适用场景区别？

computer（计算属性）：需要使用的属性不存在，要通过已有的属性计算得来，当依赖的属性发生变化时会重新调用。

computed用于处理复杂的逻辑运算，主要和methods储存方法来进行区分；methods储存方法，computed储存需要处理的数据值；methods每次都会调用，computed有缓存机制，只有改变时才执行，性能更佳；当页面中需要使用大量的表达式处理数据时使用

 

watch（监视属性）：当被监视的属性发生变化的时候，回调函数自动调用，进行操作。（可使用deep属性开启深度检测）

用于监听数据变化，其中可以监听的数据来源有三部分：props、data、computed内的数据；watch提供两个参数（newValue，oldValue），第一个参数是新值，第二个参数保存旧值；数据变化时执行异步或开销较大的操作时，（但是watch只能对某一个数据进行监听,而computed的只要函数内部涉及到的变量发生改变,就都会重新进行计算.所以大开销推荐使用watch）

 

fliter（过滤）：为我们提供的一个方法，用来帮助我们对数据进行筛选，可被用于一些常见的文本格式化。

（1）watch与computed的区别:

1.watch监控现有的属性,computed通过现有的属性计算出一个新的属性

2.watch不会缓存数据，每次打开页面都会重新加载一次，

但是computed如果之前进行过计算他会将计算的结果缓存，如果再次请求会从缓存中
得到数据（所以computed的性能比watch更好一些）

（2）compute和flite的区别：

计算属性    

依赖于一个固定的vue实例 ，在某一个实例中使用    

不接受额外参数，依赖于data属性中的变量

有缓存管理机制，可减少页面调用次数    

计算属性虽默认为只读，但可以定义为对象，开启可读可写模式  

 计算属性被作为一个类属性调用  

过滤器

不依赖于实例。可以 定义一个全局过滤器，在多个实例中使用

不要求是data中的变量，可以是临时变量。可接受额外参数。

无缓存机制，调用次数，取决于页面中有所多少过滤器

只能读取操作

过滤器被作为一个特殊方法处理
————————————————
版权声明：本文为CSDN博主「少油少盐不要辣」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_40713392/article/details/86363955

2.事件冒泡阻止和事件执行阻止的函数

1. event.stopPropagation()方法

这是阻止事件的冒泡方法，不让事件向documen上蔓延，但是默认事件任然会执行，当你掉用这个方法的时候，如果点击一个连接，这个连接仍然会被打开，

2. event.preventDefault()方法

这是阻止默认事件的方法，调用此方法是，连接不会被打开，但是会发生冒泡，冒泡会传递到上一层的父元素；

3. return false  ；

这个方法比较暴力，他会同事阻止事件冒泡也会阻止默认事件；写上此代码，连接不会被打开，事件也不会传递到上一层的父元素；可以理解为return false就等于同时调用了event.stopPropagation()和event.preventDefault()

3.vue中事件修饰符

prevent：阻止默认事件

stop：阻止事件冒泡

once：事件只触发一次

capture：使用事件捕获模式（捕获阶段执行）

self：只有event.target是当前操作元素才会触发

passive：事件默认行为立即执行，无需等待事件回调执行完毕。

4.computer能接收参数吗？情景问题：根据一个数据的状态不同返回不同的字符串。

（例如a=0，会返回一，a=2会返回二）

vue中computed计算属性无法直接进行传，如果有传参数的需求比如说做数据筛选功能可以使用闭包函数（也叫匿名函数）实现

使用计算属性来判断，当a属性发生变化时直接返回对应的字符串，watch也可以，生命周期函数也行。

二、第二家：

1.foreach（）和map（）的区别：

forEach() ：对数组的每个元素执行一次提供的函数。

map（）：它返回一个新的数组，数组中的元素为原始数组调用函数处理后的值。

forEach()和map()方法通常用于遍历Array元素，forEach()方法不会返回执行结果，而是undefined。也就是说，forEach()会修改原来的数组。而map()方法会得到一个新的数组并返回。

   arr = [0, 1, 2, 3];
        let list = arr.map(value => {
            return value * value;
        });
        console.log(arr);
        console.log('新数组' + list);
        arr.forEach((value, key) => {
            return arr[key] = value * value;
        });
        console.log(arr);

//返回
    [0, 1, 2, 3]
      新数组0,1,4,9
    [0, 1, 4, 9]

arr = [0, 1, 2, 3];
        arr.forEach((value, key) => {
            return arr[key] = value * value;
        });
        console.log(arr);
        let list = arr.map(value => {
            return value * value;
        });
        console.log(arr);
        //返回
        [0, 1, 4, 9]
         [0, 1, 4, 9]

2.同源策略和跨域

同源策略

是一个重要的安全策略，它用于限制一个origin的文档或者它加载的脚本如何能与另一个源的资源进行交互。

它能帮助阻隔恶意文档，减少可能被攻击的媒介。

所谓同源是指域名，协议，端口相同。

跨域资源共享(Cross Origin Resourse-Sharing)：

受前面所讲的浏览器同源策略的影响，不是同源的脚本不能操作其他源下面的对象。想要操作另一个源下的对象是就需要跨域。

1.JSONP实现跨域请求

简单的说，就是动态创建<script>标签，然后利用<script>的 src 属性不受同源策略约束来跨域获取数据。

2.CORS跨域资源共享
CORS是一个W3C标准，全称是"跨域资源共享"（Cross-origin resource sharing）。
它允许浏览器向跨源服务器，发出 XMLHttpRequest 请求，从而克服了 AJAX 只能同源使用的限制。使用AJAX技术跨域获取数据
刚才的例子中，用CORS实现跨域。
在b.com里面添加响应头声明允许a.com的访问，

3.服务器代理

因为只有浏览器不允许跨界，可以设置服务器和浏览器同域，在服务器端进行资源跨域。

4.iframe的方式解决跨域问题，

也种利用iframe（img）中src属性具有的跨域能力来解决跨域问题。

基于iframe实现的跨域要求两个域具有aa.xx.com,bb.xx.com 这种特点，

也就是两个页面必须属于一个基础域（例如都是xxx.com)，使用同一协议和同一端口，这样在两个页面中同时添加document.domain，就可以实现父页面调用子页面的函数

要点就是 :通过修改document.domain来跨子域

4.如果一个vue文件很大，改怎么优化代码？

1、路由懒加载

当打包构建应用时，Javascript 包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。

2、代码模块化

咱们可以把很多常用的地方封装成单独的组件，在需要用到的地方引用，而不是写过多重复的代码，每一个组件都要明确含义，复用性越高越好，可配置型越强越好，包括咱们的css也可以通过less和sass的自定义css变量来减少重复代码。

3、可以使用keep-alive

keep-alive是Vue提供的一个比较抽象的组件，用来对组件进行缓存，从而节省性能。

4、节流防抖

5、图片的懒加载

5.同步组件和异步组件

（1）异步组件

异步组件：只在组件需要渲染（组件第一次显示）的时候进行加载渲染并缓存，缓存是以备下次访问。
Vue实现按需加载 在打包的时候，会打包成单独的js文件存储在static/js文件夹里面**
在调用时使用ajax请求回来插入到html中。

（2）同步引入

例子： import Page from '@/components/page'

（3）异步引入异步组件

例子：const Page = () => import('@/components/page')


或者： const Page = resolve => require(['@/components/page'], page)

两种引入方式的不同之处在于：

同步引入时生命周期顺序为：父组件的beforeMount、created、beforeMount --> 所有子组件的beforeMount、created、beforeMount --> 所有子组件的mounted --> 父组件的mounted

异步引入时生命周期顺序：父组件的beforeCreate、created、beforeMount、mounted --> 子组件的beforeCreate、created、beforeMount、mounted

6.组件怎么向插槽通信

父级模板里的所有内容都是在父级作用域中编译的；子模板里的所有内容都是在子作用域中编译的。

slot 插槽要实现子组件向父组件传值，则需要运用 作用域插槽

1、父组件中用 标签加上 slot-scoped 的属性，属性值随性。（旧版本是scope,vue新版本必须用slot-scope)

2、子组件中给 加上一个自定义属性，在父组件中的slot-scope就能接收这个自定义属性的值

有时让插槽内容能够访问子组件中才有的数据是很有用的。例如，设想一个带有如下模板的 <current-user> 组件：

<span>
  <slot>{{ user.lastName }}</slot>
</span>

我们可能想换掉备用内容，用名而非姓来显示。如下：

<current-user>
  {{ user.firstName }}
</current-user>

然而上述代码不会正常工作，因为只有 <current-user> 组件可以访问到 user，而我们提供的内容是在父级渲染的。

为了让 user 在父级的插槽内容中可用，我们可以将 user 作为 <slot> 元素的一个 attribute 绑定上去：

<span>
  <slot v-bind:user="user">
    {{ user.lastName }}
  </slot>
</span>

绑定在 <slot> 元素上的 attribute 被称为插槽 prop。现在在父级作用域中，我们可以使用带值的 v-slot 来定义我们提供的插槽 prop 的名字：

一个不带 name 的 <slot> 出口会带有隐含的名字“default”。

<current-user>
  <template v-slot:default="slotProps">
    {{ slotProps.user.firstName }}
  </template>
</current-user>

摘抄官网

10.ts的基本类型

  Undefined;
  Number:数值类型;
  string : 字符串类型;
  Boolean: 布尔类型；
  enum：枚举类型；
  any : 任意类型，一个牛X的类型；
  Null ：空类型
  void：空类型；
  Array : 数组类型;
  Tuple : 元祖类型；

11.v-show和v-if

 1.原理
v-show指令：元素始终被渲染到HTML，它只是简单的伪元素设置css的style属性，当不满足条件的元素被设置style=“display：none”的样，是通过修改元素的的CSS属性(display)来决定实现显示还是隐藏
v-if指令：满足条件是会渲染到html中，不满足条件时是不会渲染到html中的，是通过操纵dom元素来进行切换显示
2.应用场景
v-if需要操作dom元素，有更高的切换消耗，v-show只是修改元素的的CSS属性有更高的初始渲染消耗，如果需要非常频繁的切换，建议使用v-show较好，如果在运行时条件很少改变，则使用v-if较好
————————————————
版权声明：本文为CSDN博主「卡卡西Sensei」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/zjpjay/article/details/109816049

12.网页打开的窗口和新的标签页

选项卡：又叫标签页，是在同一个浏览器界面同时打开多个页面，用标签的形式显示，点击不同标签就可以切换到不同页面。 

窗口：就是每个网址或链接都打开一个新的浏览器界面(某个具体的标签页所展示的东西)。

window.open(URL,name,features,replace);

URL —— 一个可选的字符串，声明了要在新窗口中显示的文档的 URL。如果省略了这个参数，或者它的值是空字符串，那么新窗口就不会显示任何文档。

name——一个可选的字符串，该字符串是一个由逗号分隔的特征列表，其中包括数字、字母和下划线，该字符声明了新窗口的名称。这个名称可以用作标记 <a> 和 <form> 的属性 target 的值。如果该参数指定了一个已经存在的窗口，那么 open() 方法就不再创建一个新窗口，而只是返回对指定窗口的引用。在这种情况下，features 将被忽略。

"_top"、"_blank"、"_selft"具有特殊意义的名称。
       _blank：在新窗口显示目标网页
       _self：在当前窗口显示目标网页
       _top：框架网页中在上部窗口中显示目标网页

<a href="http://www.baidu.com" target="blank">百度</a> 
<a href="http://z.baidu.com" target="blank">百度知道</a> 
上面的代码，分别点击，还是一个窗口。 

因为不是几个特殊的标签，target会为窗口赋名blank，第二个a标签如果该参数指定了一个已经存在的窗口，那么 open() 方法就不再创建一个新窗口，而只是返回对指定窗口的引用。会刷新名字为blank的窗口

features——一个可选的字符串，声明了新窗口要显示的标准浏览器的特征。如果省略该参数，新窗口将具有所有标准特征。在窗口特征这个表格中，我们对该字符串的格式进行了详细的说明。

replace——一个可选的布尔值。规定了装载到窗口的 URL 是在窗口的浏览历史中创建一个新条目，还是替换浏览历史中的当前条目。支持下面的值：