#Vue面试题
关注
分享
扫一扫
Buildy_j
只是一个小白程序猿啦！
展开
-
JS 封装一个函数计算距离某一天还有多少天
要求：restDays('xxxx/xx/xx')返回剩余天数// JS 封装一个函数计算距离某一天还有多少天function restDate(date) { const target = +new Date(date); const today = +new Date(); const A_DAY = 1000 * 60 * 60 * 24; const A_HOUR = 1000 * 60 * 60; const A_MINUTE = 1000 * 60原创 2021-10-06 00:21:53 · 761 阅读 · 0 评论 -
Vue.js 组件通信都有哪些？
Vue组件间通讯遵循单项数据流的原则：父组件→子组件。如果子组件想要更改父组件的数据，需要通知父组件去修改，本质上还是父组件自己去更改数据。组件间的通信归纳为以下：目录Props 父组件-> 子组件 传参$emit 子组件 -> 父组件 传参Props 父组件-> 子组件 传参页面展示描述：父组件中子组件<son />绑定了share属性，值为父组件的data："father_share_data"。同时子组件这边使用props接...原创 2021-10-05 00:11:31 · 336 阅读 · 0 评论 -
Vue.js 组件的生命周期函数钩子有哪些？
8个钩子：创建Create: beforeCreate(), created() 挂载Mount: beforeMount(), mounted() 更新update: beforeUpdate(), updated() 销毁destroy: beforeDestroy, destroyed()原创 2021-09-28 00:47:54 · 210 阅读 · 0 评论 -
Vue.js 中模板编译原理
答：将template转化成render函数。源码：function baseCompile ( template: string, options: CompilerOptions) { const ast = parse(template.trim(), options) // 1.将模板转化成ast语法树 if (options.optimize !== false) { // 2.优化树 optimize(ast, options) }转载 2021-09-28 00:27:49 · 155 阅读 · 0 评论 -
Vue.js 简单描述nextTick原理?
①调用nextTick函数传入回调函数②JS中调用栈（call stack）的执行规则是先执行同步代码，空闲时进行事件循环（event loop）执行任务队列（task queue）里的函数。像操作DOM的代码就是同步代码，会先于nextTick函数传入的回调函数执行。③实际上问题就是怎么写异步函数的问题，Vue中采用了4种执行异步函数的代码判断，Promise类 => MutationObserver类 => SetImmediate函数 => SetTimeout函数P原创 2021-09-28 00:24:15 · 342 阅读 · 0 评论 -
Vue.js 响应式数据的原理
核心：Object.defineProperty 或 Proxy类 去操作底层默认行为。Object.defineProperty 简单版：/*html... <body> <p>请输入:</p> <input type="text" id="input"> <p id="p"></p> </body> <script>原创 2021-09-27 23:34:50 · 104 阅读 · 0 评论 -
Vue.js MVC框架和MVVM框架有什么不同？
看了一圈帖子，其实我感觉就2个词——拆分和改进。以下是个人理解，打个容易理解的比喻：在MVC框架中：M——后台数据池：即后端数据库，并提供接口给前端调用；V——HTML页面：即用户所看到界面，如一个input框用户可以输入信息；一个链接用户可以点击跳转C——JS代码：即我们在js文件中写的业务逻辑，如何处理用户的操作？View→Control：解析用户操作行为，转化为代码； Control(parse...)：写业务逻辑处理数据，准备好后台需要的数据； Control→Model原创 2021-09-26 21:43:41 · 438 阅读 · 0 评论 -
Vue3.0你知道有哪些改进?
Vue3采用了Type Script来编写 支持 Composition API Vue3中响应式数据原理改成proxy vdom的对比算法更新，只更新vdom的绑定了动态数据的部分转载 2021-09-25 17:51:02 · 275 阅读 · 0 评论 -
Vue.js 谈谈常见性能优化
1.编码优化:不要将所有的数据都放在data中，data中的数据都会增加getter和setter，会收集对应的watcher （vue 2.x 响应式原理Object.defineProperty） vue在 v-for 时给每项元素绑定事件需要用事件代理 （多个子元素绑定事件的场景下，可以把事件帮给父元素（wrapper层），通过e.target事件冒泡抓住事件原来写逻辑） SPA页面采用keep-alive缓存组件 （SPA即单页面应用，通过js切换元素显示与隐藏，不会刷新页面重.转载 2021-09-25 16:48:54 · 228 阅读 · 0 评论 -
Vue中相同逻辑如何抽离？
1、使用mixin全局混入功能，可以给每个组件合并抽离出来的逻辑。但过于简单粗暴，应写相应的逻辑限制混入实际的作用范围，比如使用 if 判断某个组件是否包含某个数据，如果存在则执行混入的规则。2、公共方法可以抽离成一个 util.js 文件单独保存，某个组件需要时再import..from/ require('...')导入公共方法。3.大量使用的公共方法可以直接定义在 Vue.prototype 上，在入口文件可以操作。...原创 2021-09-25 00:16:51 · 1607 阅读 · 0 评论 -
Vue.js ajax请求放在哪个生命周期中？
答：在created的时候，视图中的dom并没有渲染出来，所以此时如果直接去操dom节点，无法找到相关的元素 在mounted中，由于此时dom已经渲染出来了，所以可以直接操作dom节点 一般情况下都放到mounted中,保证逻辑的统一性,因为生命周期是同步执行的，ajax是异步执行的一般情况下都放到mounted中,保证逻辑的统一性,因为生命周期是同步执行的，ajax是异步执行的服务端渲染不支持mounted方法，所以在服务端渲染的情况下统一放到created中...转载 2021-09-25 00:05:33 · 825 阅读 · 0 评论 -
Vue.js 组件中 data 什么时候可以使用对象形式定义
答：当我们 new Vue() 创建根实例时，此时也是创建了根组件，此组件不会被复用而造成对象内属性一变其他复用组件也跟着变的问题，此时data可以写成对象形式而不是函数返回对象的形式。/* html */<div id="app"> {{data1 + data2}}</div><script src='./vue.js' /><script> const vm = new Vue({ el:'#app',原创 2021-09-25 00:02:46 · 477 阅读 · 0 评论 -
Vue.js NextTick有什么用？
答：下次 DOM 更新循环结束之后再执⾏延迟回调，⽤于获得更新后的 DOM。/*...*/ <div id="app"> <div v-if='msg'>{{msg}}</div> <div v-if='msg1'>{{msg1}}</div> <div v-if='msg2'>{{msg2}}</div> <button @click='ha原创 2021-09-24 23:10:01 · 73 阅读 · 0 评论 -
Vue.js 中如何使用一个插件？
采⽤ ES6 的 import … from … 语法或 CommonJS 的 require() ⽅法引⼊插件 使⽤全局⽅法 Vue.use( plugin ) 使⽤插件,可以传⼊⼀个选项对象 Vue.use(MyPlugin, { someOption: true })转载 2021-09-24 18:24:20 · 147 阅读 · 0 评论 -
Vue.js ＜keep-alive＞＜/keep-alive＞ 的作用是什么?
答：缓存组件的状态，并在再次激活组件时使用缓存。如某个组件因触发事件改变某些数据，当组件切换时，会默认回到未操作的状态。使用<keep-alive>包裹组件就可以保持组件操作后的状态。...原创 2021-09-24 18:21:53 · 260 阅读 · 0 评论 -
Vue.js $route 和 $router 的区别是什么？
$route 是“路由信息对象”，包括 path ， params ， hash ， query ，fullPath ， matched ， name 等路由信息参数。 ⽽ $router 是“路由实例”对象包括了路由的跳转⽅法（push，go等），钩⼦函数等转载 2021-09-24 18:13:38 · 155 阅读 · 0 评论 -
vuex是什么？怎么使用？使用场景有哪些？
Q: vuex是什么？A: vuex形象的说是一个数据共享仓库，用于在组件关系复杂的情景下也能轻松地进行组件间数据通信。官方的说法是“一个专为 Vue.js 应用程序开发的状态管理模式，用于集中式存储管理应用的所有组件的状态”。传统的，子组件向父组件通信依赖调用实例的$emit函数，父组件向子组件通信使用props属性传参，但是关系较远的两个组件再使用这种方式必然十分繁琐。或许在根实例上注入共享数据，子组件通过 this.$root 去访问根实例的数据，在少量组件的情况下较为方便，而在大量组件的应用场.原创 2021-09-24 18:10:59 · 2914 阅读 · 0 评论 -
Vue.js 路由的钩子函数有那些？（即导航守卫）
全局守卫：（在router.js中用 'router.xxx守卫' 的方法调用钩子函数）1、全局前置守卫 beforeEach ——② 2、全局解析守卫 beforeResolve ——⑥ 3、全局后置钩子 afterEach ——⑦const router = new VueRouter({ ... })router.beforeEach((to, from, next) => { // ...})路由独享守卫：befo...原创 2021-09-24 16:44:06 · 550 阅读 · 0 评论