Vue面试八股06-06

1、MVVM

VM是核心，连接V和M的桥梁，MVVM实现了V和M的自动同步

2、v-if和v-show

是什么？vue指令，根据真假值控制标签元素显示和隐藏

区别：

        ①控制手段：v-show：显示&隐藏DOM元素；v-if：添加&删除DOM元素

        ②编译过程：v-show：简单基于CSS的切换；v-if：切换过程中会销毁和重建内部的事件监听和子组件

        ③编译条件：v-show：不触发组件的生命周期；v-if：渲染条件为真时才渲染，false变true，触发beforeCreate、create、beforeMount、mounted钩子，true变false，触发beforeDestory、destoryed

场景：

        v-show适合频繁切换元素的显示和隐藏的场景，v-if相反      

3、为什么给v-for绑定key

官方：为了给 Vue 一个提示，以便它可以跟踪每个节点的标识，从而重用和重新排序现有的元素，你需要为每个元素对应的块提供一个唯一的 key attribute

在Vue的虚拟DOM (Virtual DOM) 算法中，当新旧节点进行比对时，key属性可以帮助Vue识别每个节点的身份。通过key属性，Vue可以知道哪个旧节点对应哪个新节点，从而有针对性地更新DOM，提高渲染效率。

如果没有使用key属性，Vue在更新列表时默认采用"就地复用"（in-place patch）的策略。也就是说，Vue认为具有相同索引的两个节点是相同的，会原地并复用旧节点。

4、computed和watch的区别

computed：计算属性；watch：侦听器。

①返回值：computed有返回值；watch监听不用返回值，监听的函数接收两个参数，第一个参数是：新值，第二个参数是：原来的值。

②原理：当 computed 属性的属性值是函数，那么默认会走get方法，函数的返回值就是属性的值；当数据变化时，调用set方法。

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

④是否支持异步：computed不支持异步，watch支持异步

⑤使用场景：computed多个数据影响一个数据（购物车商品结算）；watch一个数据变化影响多个数据（搜索框）

watch有两个属性：

deep：默认情况下，侦听器只会监听数据本身的改变，若要进行深度监听，那就需要使用 deep。

immediate：默认情况下，侦听器需要 data 后面值改变了才会生效，若需要侦听器一进入页面就生效，那就需要使用 immediate。

5、diff算法

用 JavaScript 对象结构表示 DOM 树的结构；然后用这个树构建一个真正的 DOM 树，插到文档当中，当状态变更的时候，重新构造一棵新的对象树。然后用新的树和旧的树进行比较(diff)，记录两棵树差异，把第二棵树所记录的差异应用到第一棵树所构建的真正的DOM树上(patch)，视图就更新了。比较情况：

• Vnode有子节点，但是OldVnode没有，则将Vnode的子节点真实化后添加到真实DOM上
• Vnode没有子节点，但是OldVnode上有，则将真实DOM上相应位置的节点删除掉
• Vnode和OldVnode都有文本节点但是内容不一样，则将真实DOM上的文本节点替换为Vnode上的文本节点
• Vnode和OldVnode上都有子节点，需要调用updateChildren函数进一步比较、

6、父子组件传值（Vue组件通讯方式之一）

父传子：props属性。子通过props接收父，父使用v-bind将子预留的变量名绑定为data里面的数据；

子传父：this.$emit遍历getData事件，首先按钮出发setData，然后遍历，最后返回this.msg

非父子：先传到父，再传到子（公共的bus文件）

7、路由懒加载

组件并非一次性全部加载，而是需要时再加载，也叫“按需加载”。

主要作用是将路由对应的组件打包成一个个的js代码块

只有在这个路由被访问到的时候，才加载对应的组件，否则不加载！

实现方法：

• 在vue-router配置路由时，将需要懒加载的组件配置为一个异步组件。在异步组件的加载函数中，使用require函数按需加载组件代码。将加载后的组件返回给vue-router，使其能够正确渲染对应的页面。
• 在需要懒加载的组件文件中，使用ES6的import()语法将组件导入。在import()中指定需要加载的组件文件路径，并使用动态导入的方式将其加载。动态导入的组件会被webpack自动分割到一个单独的文件中，按需加载。

8、vue父子组件生命周期执行顺序

加载渲染过程
父 beforeCreate -> 父 created -> 父 beforeMount -> 子 beforeCreate -> 子 created
-> 子 beforeMount -> 子 mounted -> 父 mounted
子组件更新过程
父 beforeUpdate -> 子 beforeUpdate -> 子 updated -> 父 updated
父组件更新过程
父 beforeUpdate -> 父 updated
销毁过程

父 beforeDestroy -> 子 beforeDestroy -> 子 destroyed -> 父 destroyed
总结： 父组件先开始 子组件先结束

9、cookies的十个属性

Name: Cookie名

Value: Cookie值

Domain: Cookie的域。如果设成.test.com，那么子域名a.test.com和b.test.com，都可以使用.test.com的Cookie。

Path: Cookie的路径。如果设成/path/，则只有路径为/path/的页面可以访问该Cookie。如果设为/，则本域名下的所有页面都可以访问该Cookie。

Expires / Max-Age:Cookie的超时时间。若设置其值为一个时间，那么当到达此时间后，此Cookie失效。不设置的话默认值是Session，意思是Cookie会和Session一起失效。当浏览器关闭（不是浏览器标签页，而是整个浏览器）后，此Cookie失效。

Size: Cookie大小。

HttpOnly: 若此属性为true，则只有在http请求头中会带有此Cookie的信息，而不能通过document.cookie来访问此Cookie。

Secure: 设置是否只能通过https来传递此条Cookie。

SameSite:用来防止 CSRF 攻击和用户追踪。可以设置三个值：Strict、Lax 和 None。
        Strict: Strict最为严格，完全禁止第三方 Cookie，跨站点时，任何情况下都不会发送 Cookie。换言之，只有当前网页的 URL 与请求目标一致，才会带上 Cookie。Lax: Lax规则稍稍放宽，大多数情况也是不发送第三方 Cookie，但是导航到目标网址的 Get 请求除外。None: 关闭SameSite属性，提是必须同时设置Secure属性（Cookie 只能通过 HTTPS 协议发送），否则无效。

Priority: 优先级。定义了三种优先级，Low/Medium/High，当Cookie数量超出时，低优先级的Cookie会被优先清除。

来源：Cookie的属性_cookie属性-CSDN博客