vue总结

一，MVC与MVVM的差别在哪里

MVC缺点：1，前后端没法独立开发，必须等接口做好了，我才能往下走。

                    2，前端不够独立，前端没有自己的数据中心，太过依赖于后台。

MVVM：拥有一个data 称之为vm，连接了视图，相当于前端拥有了一个自己的控制器，所以才能做到前后端分离

二，从输入url到浏览器显示页面发生了什么？

1.输入网址
浏览器查找域名的IP地址
3.建立TCP链接
4.浏览器向WEB服务器发起Http请求
5.服务器端处理
6.关闭TCP链接
7.浏览器解析资源
8.浏览器布局渲染
三，vue实现数据双向绑定的原理？

1.vue实现双向数据绑定的原理就是利用了 Object.defineProperty() 这个方法重新定义了对象获取属性值(get)和设置属性值(set)的操作来实现的。它接收三个参数,要操作的对象,要定义或修改的对象属性名,属性描述符。重点就是最后的属性描述符。属性描述符是一个对象,主要有两种形式:数据描述符和存取描述符。这两种对象只能选择一种使用,不能混合两种描述符的属性同时使用。上面说的get和set就是属于存取描述符对象的属性。

2.vue 双向数据绑定是通过数据劫持结合发布订阅模式的方式来实现的，也就是说数据和视图同步，数据发生变化，视图跟着变化，视图变化，数据也随之发生改变

四，vue里的data数据更新了，但视图没有更新是什么原因导致的，怎么解决？

原因：
1.Vue 无法检测实例被创建时不存在于 data 中的 property；
2.Vue 无法检测对象 property 的添加或移除；
3.Vue 不能检测通过数组索引直接修改一个数组项；
4.Vue 不能监测直接修改数组长度的变化；
5.在异步更新执行之前操作 DOM 数据不会变化；
解决办法：

使用this.$set()修改数据；
this.$forceUpdate()，强制视图更新 
在数据变化之后立即使用 Vue.nextTick(callback)

五，vue中router的原理？

1.Hash模式: hash(#)是URL 的锚点,代表的是网页中的一个位置,单单改变#后的部分,浏览器只会滚动到相应位置,不会重新加载网页,也就是说 #是用来指导浏览器动作的,对服务器端完全无用,HTTP请求中也不会不包括...

History模式: HTML5 History API提供了一种功能,能让开发人员在不刷新整个页面的情况下修改站点的URL,就是利用 history.pushState API 来完成 URL 跳转而无须重新加载页面;
六，VUE的单页面应用首页加载白屏是什么原因？怎么解决？

原因：

因为它是一个单页应用，需要将所有需要的资源都下载到浏览器端并解析，首页需要加载比较大的js文件。

解决办法：

优化 webpack 减少模块打包体积，code-split 按需加载
服务端渲染，在服务端事先拼装好首页所需的 html
首页加 loading 或 骨架屏 （仅仅是优化体验）
服务端开启gzip压缩
打包文件分包，提取公共文件包

七，哪几种情况会导致js内存泄漏？

闭包
意外的全局变量 
定时器setTimeout setInterval
如果在mounted/created 钩子中使用了$on，需要在      beforeDestroy 中做对应解绑($off)处理
给DOM对象添加的属性是一个对象的引用；
DOM对象与JS对象相互引用
从外到内执行appendChild。这时即使调用removeChild也无法释放
反复重写同一个属性会造成内存大量占用(但关闭IE后内存会被释放)
八，什么是函数防抖和节流？

所谓防抖，就是指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。
非立即执行版：

function debounce(func, wait) {

    let timeout;

    return function () {

        let context = this;

        let args = arguments;

        if (timeout) clearTimeout(timeout);

        

        timeout = setTimeout(() => {

            func.apply(context, args)

        }, wait);

    }}

非立即执行版的意思是触发事件后函数不会立即执行，而是在 n 秒后执行，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。

立即执行版：

function debounce(func,wait) {

    let timeout;

    return function () {

        let context = this;

        let args = arguments;

        if (timeout) clearTimeout(timeout);

        let callNow = !timeout;

        timeout = setTimeout(() => {

            timeout = null;

        }, wait)

        if (callNow) func.apply(context, args)

    }}

立即执行版的意思是触发事件后函数会立即执行，然后 n 秒内不触发事件才能继续执行函数的效果。

2.所谓节流，就是指连续触发事件但是在 n 秒中只执行一次函数。节流会稀释函数的执行频率。

定时器版:

function throttle(func, wait) {

    let timeout;

    return function() {

        let context = this;

        let args = arguments;

        if (!timeout) {

            timeout = setTimeout(() => {

                timeout = null;

                func.apply(context, args)

            }, wait)

        }

    }}

九，如何解决跨域问题？

跨域，指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器施加的安全限制。所谓同源是指，域名，协议，端口均相同，只要有一个不同，就是跨域

解决方案：使用JSONP
服务器端使用cors
PHP端修改header
document.domain
window.name
postMessage

十，如何实现深拷贝？使用递归的方式实现深拷贝；
通过JSON对象实现深拷贝；
通过Object.assign()拷贝；
通过jQuery的extend方法实现深拷贝；
lodash函数库实现深拷贝；
十一，iframe之间传值的方法？

不同frame是同源的：
不同框架之间能够通过iframe元素的contentWindow属性，获取到彼此的window对象，就能通过window.document访问各自的属性和对象。

同源的不同框架共用同一个本地存储localStorage，可以通过监听storage事件（webkit不支持此事件），来进行通信

不同iframe不同源:
不同框架可以获取到彼此的window对象，但是不同源的话就不能使用获取到window对象的属性和方法，此时可以通过设置为同样的document.domain，就能访问相应的属性和方法。

通过HTML5中的window.postMessage来跨域传送数据，接收消息的框架监听message事件，消息内容存储在事件对象的data属性中。

十二，v-if和v-show的区别？

1.v-show 只是简单的控制元素的 display 属性,而 v-if 才是条件渲染(条件为真,元素将会被渲染,条件为假,元素会被销毁);

2.v-if 有配套的 v-else-if 和 v-else,而 v-show 没有

十三，什么是js事件循环？

1.遇到同步任务直接执行,遇到异步任务分类为宏任务(macro-task)和微任务(micro-task)。

2.如果微任务列表里面有任务 会执行完毕后在执行宏任务。

反复执行以上步骤 就是事件循环(event loop)

十四，什么是宏任务和微任务？

宏任务：

(macro)task，可以理解是每次执行栈执行的代码就是一个宏任务（包括每次从事件队列中获取一个事件回调并放到执行栈中执行）。

浏览器为了能够使得JS内部(macro)task与DOM任务能够有序的执行，会在一个(macro)task执行结束后，在下一个(macro)task 执行开始前，对页面进行重新渲染

包括：

script(整体代码)

setTimeout

setInterval

I/O

UI交互事件

postMessage

MessageChannel

setImmediate(Node.js 环境)

微任务：

microtask,可以理解是在当前 task 执行结束后立即执行的任务。也就是说，在当前task任务后，下一个task之前，在渲染之前。

所以它的响应速度相比setTimeout（setTimeout是task）会更快，因为无需等渲染。也就是说，在某一个macrotask执行完后，就会将在它执行期间产生的所有microtask都执行完毕（在渲染前）。

包含：

Promise.then

Object.observe

MutationObserver

process.nextTick(Node.js 环境)

十五，什么情况下会考虑封装VUE组件？封装的时候一般考虑到哪些问题？以及封装移动端组件的时候如何考虑它的适配性问题？

一个组件在项目中出现两次就开始考虑是否应该进行封装，出现三次就肯定要封装；

封装时要考虑的问题：

1.可读性；2.逻辑功能合理性；3.数据设计的合理性；4.样式的一致性；5.可扩展性

封装移动端组件的适配问题：

在index.html中加入<meta name="viewport"content="width=device-width, initial-scale=1, maximum-scale=1">
安装postcss-pxtorem等插件，在项目根目录添加 .postcssrc.js 文件设置根字体大小
使用vw和vh单位设置样式
十六，js垃圾回收机制说下你的理解？

原理

找到不再被使用的变量，然后释放其占用的内存，但这个过程不是时时的，因为其开销比较大，

所以垃圾回收器会按照固定时间间隔周期性的执行

回收方式

a.标记清除

当变量进入环境时，将这个变量标记为“进入环境”;当变量离开环境时，则将其标记为“离开环境”。

标记“离开环境”的就回收内存

b.引入计数(低级浏览器)

当变量声明，第一次赋值时记为1，然后当这个变量值改变时，记录为0，将计数为0的回收

十七，vue项目中怎么储存账号密码？

前端实现记住密码功能有两种方式：1.浏览器自带保存功能

2.将登陆信息储存在cookie中

下面我们说一下第二种方法的实现思路：

1.在向后台提交登陆信息成功后，判断用户是否勾选记住密码，如果勾选，将账号，密码以及token（需要封装拦截器）储存在cookie中，如果没勾选，向cookie中存入账号和密码字段为空

2.密码需要加密，目前加密方式有很多种sha1,base64和md5等

3.npm安装base64依赖：

4.在页面加载时从cookie中获取登录信息，判断是否存在，如果存在，需要先将密码解密，将其赋值给登录表单，并将记住密码选择框勾选

十八，VUE项目中苹果端和安卓端遇到的兼容性问题有哪些？

1. 日期格式问题. 这个问题应该是遇到最多的.也是最多被熟知的.safari不识别2018-08-08的日期格式.会显示NaN.

  解决方式: 在处理日期之前转换为2018/08/08的格式.

2. 设置了input背景颜色在safari颜色异常显示的问题. 这是由于safari对于input有默认的渲染背景颜色.必须把input原生颜色清除.否则会造成颜色显示特别不纯正.

解决方式: 所有的input加上-webkit-appearance: none;属性.

3.safari不兼容select居中属性text-align-last.

解决方式:如果内容宽度固定:  这个如果你的select内的内容的宽度是固定的还好办.直接用空格或者padding就能解决.

十九，VUEX的原理？

Vuex采用MVC模式中的Model层，规定所有的数据必须通过action—>mutaion—>state这个流程进行来改变状态的。再结合Vue的数据视图双向绑定实现页面的更新。统一页面状态管理，可以让复杂的组件交互变的简单清晰，同时在调试时也可以通过DEVtools去查看状态。
————————————————
版权声明：本文为CSDN博主「hhcya」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/hhcya/article/details/122966208