1、Vue 的 nextTick 的原理是什么?
-
为什么需要 nextTick ，Vue 是异步修改 DOM 的并且不鼓励开发者直接接触 DOM，但有时候业务需要必须对数据更改--刷新后的 DOM 做相应的处理，这时候就可以使用 Vue.nextTick(callback)这个 api 了。
-
理解原理前的准备 首先需要知道事件循环中宏任务和微任务这两个概念,常见的宏任务有 script, setTimeout, setInterval, setImmediate, I/O, UI rendering 常见的微任务有 process.nextTick(Nodejs),Promise.then(), MutationObserver;
-
理解 nextTick 的原理正是 Vue 通过异步队列控制 DOM 更新和nextTick 回调函数先后执行的方式。如果大家看过这部分的源码，会发现其中做了很多 isNative()的判断，因为这里还存在兼容性优雅降级的问题。可见 Vue 开发团队的深思熟虑，对性能的良苦用心。
2、在 Vue 实 例 中 编 写 生 命 周 期 hook 或 其 他option/propertie 时，为什么不使用箭头函数？
箭头函数自己没有定义 this 上下文，而是绑定到其父函数的上下文中。当你在 Vue 程序中使用箭头函数（=>）时，this 关键字病不会绑定到 Vue 实例，因此会引发错误。所以强烈建议改用标准函数声明。
3、is 这个特性你有用过吗？主要用在哪些方面？
1）动态组件
<component :is="componentName"></component>， componentName 可以是在本页面已经注册的局部组件名和全局组件名,也可以是一个组件的选项对象。当控制 componentName 改变时就可以动态切换选择组件。
2）is 的用法
有些 HTML 元素，诸如 <ul>、<ol>、<table>和<select>，对于哪些元素可以出现在其内部是有严格限制的。
而有些 HTML 元素，诸如 <li>、<tr> 和 <option>，只能出现在其它某些特定的元素内部。
4、scss 是什么？在 Vue.cli 中的安装使用步骤是？有哪几大特性？
scss是css 的预编译。
使用步骤：
第一步：先装 css-loader、node-loader、sass-loader 等加载器模块
第二步：在 build 目录找到 webpack.base.config.js，在那个 extends 属性中
加一个拓展.scss
第三步：在同一个文件，配置一个 module 属性
第四步：然后在组件的 style 标签加上 lang 属性 ，例如：lang=”scss”
特性:
可以用变量，例如（$变量名称=值）；
可以用混合器，可以嵌套
5、Vue3 优点 (对Vue3了解)
-
Composition API</font> ，能够更好的组织、封装、复用代码，RFCs。
-
性能更高：打包大小减少 41%、初次渲染快 55%、更新渲染快 133%、内存减少 54%，主要原因在于 Proxy，VNode，Tree Shaking support。
-
体积更小: 支持按需导入, 能配合 Webpack 支持 Tree Shaking
-
对 TS 的支持更好了, Better TS support，源码。
-
新特性：Fragment、Teleport、Suspense。
-
趋势：未来肯定会有越来越多的企业使用 Vue3.0 + TS 进行大型项目的开发。
-
对于个人来说：适应市场需求，学习流行的技术提升竞争力，加薪！
6、Vite 是什么
下一代前端开发与构建工具，热更新、打包构建速度更快，但目前周边生态还不如 Webpack 成熟，所以实际开发中还是建议使用 Webpack。
-
Webpack：会将所有模块提前编译、打包，不管这个模块是否被用到，随着项目越来越大，打包启动速度自然越来越慢。
-
Vite：瞬间开启一个服务，并不会先编译所有文件，当浏览器用到某个文件时，Vite 服务会收到请求然后编译后响应到客户端。
7、什么vuex 谈谈你对它的理解？
-
首先vuex的出现是为了解决web组件化开发的过程中，各组件之间传值的复杂和混乱的问题
-
将我们在多个组件中需要共享的数据放到store中，
-
要获取或格式化数据需要使用getters，
-
改变store中的数据，使用mutation，但是只能包含同步的操作，在具体组件里面调用的方式
this.$store.commit('xxxx') -
Action也是改变store中的数据，不过是提交的mutation，并且可以包含异步操作，在组件中的调用方式
this.$store.dispatch('xxx')； 在actions里面使用的commit('调用mutation')
8、token是什么？
-
token也可以称做令牌，一般由
uid+time+sign(签名)+[固定参数]组成uid: 用户唯一身份标识 time: 当前时间的时间戳 sign: 签名, 使用 hash/encrypt 压缩成定长的十六进制字符串，以防止第三方恶意拼接 固定参数(可选): 将一些常用的固定参数加入到 token 中是为了避免重复查库 -
token在客户端一般存放于localStorage，cookie，或sessionStorage中。在服务器一般存于数据库中
-
token 的认证流程
用户登录，成功后服务器返回Token给客户端。 客户端收到数据后保存在客户端 客户端再次访问服务器，将token放入headers中 或者每次的请求 参数中 服务器端采用filter过滤器校验。校验成功则返回请求数据，校验失败则返回错误码 -
token可以抵抗csrf，cookie+session不行
-
session时有状态的，一般存于服务器内存或硬盘中，当服务器采用分布式或集群时，session就会面对负载均衡问题。负载均衡多服务器的情况，不好确认当前用户是否登录，因为多服务器不共享session
-
客户端登陆传递信息给服务端，服务端收到后把用户信息加密（token）传给客户端，客户端将token存放于localStroage等容器中。客户端每次访问都传递token，服务端解密token，就知道这个用户是谁了。通过cpu加解密，服务端就不需要存储session占用存储空间，就很好的解决负载均衡多服务器的问题了。这个方法叫做JWT(Json Web Token)
9、什么是mvvm 、 mvc 模型？
MVC: MVC即model-view-controller（模型-视图-控制器）是项目的一种分层架构思想，它把复杂的业务逻辑，抽离为职能单一的小模块，每个模块看似相互独立，其实又各自有相互依赖关系。它的好处是：保证了模块的智能单一性，方便程序的开发、维护、耦合度低。
mvvm: MVVM：MVVM即 Model-View-ViewModel，(模型-视图-控制器)它是一种双向数据绑定的模式，用viewModel来建立起model数据层和view视图层的连接，数据改变会影响视图，视图改变会影响数据
10、vue双向数据绑定的原理？
vue.js 是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。
具体步骤：
第一步：需要 observe 的数据对象进行递归遍历，包括子属性对象的属性，都加上 setter 和 getter 这样的话，给这个对象的某个值赋值，就会触发setter，那么就能监听到了数据变化
第二步：compile解析模板指令，将模板中的变量替换成数据，然后初始化渲染页面视图，并将每个指令对应的节点绑定更新函数，添加监听数据的订阅者，一旦数据有变动，收到通知，更新视图
第三步：Watcher订阅者是Observer和Compile之间通信的桥梁，主要做的事情是:
1、在自身实例化时往属性订阅器(dep)里面添加自己
2、自身必须有一个update()方法
3、待属性变动dep.notice()通知时，能调用自身的 update() 方法，并触发Compile中绑定的回调，则功成身退。
第四步：MVVM作为数据绑定的入口，整合Observer、Compile和Watcher三者，通过Observer来监听自己的model数据变化，通过Compile来解析编译模板指令，最终利用Watcher搭起Observer和Compile之间的通信桥梁，达到数据变化 -> 视图更新；视图交互变化(input) -> 数据model变更的双向绑定效果。
扫一扫
414
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
