11 指令v-el的作用是什么?
提供一个在页面上已存在的
DOM
元素作为Vue
实例的挂载目标.可以是 CSS 选择器,也可以是一个HTMLElement
实例,
12 在Vue中使用插件的步骤
-
采用 ES6
的import ... from ...
语法或CommonJS
的require()
方法引入插件 -
使用全局方法 Vue.use( plugin )
使用插件,可以传入一个选项对象Vue.use(MyPlugin, { someOption: true })
13 请列举出3个Vue中常用的生命周期钩子函数?
-
created
: 实例已经创建完成之后调用,在这一步,实例已经完成数据观测, 属性和方法的运算,watch/event
事件回调. 然而, 挂载阶段还没有开始,$el
属性目前还不可见 -
mounted
:el
被新创建的vm.$el
替换,并挂载到实例上去之后调用该钩子。如果root
实例挂载了一个文档内元素,当mounted
被调用时vm.$el
也在文档内。 -
activated
:keep-alive
组件激活时调用
14 vue-cli 工程技术集合介绍
问题一:构建的 vue-cli 工程都到了哪些技术,它们的作用分别是什么?
-
vue.js
:vue-cli
工程的核心,主要特点是 双向数据绑定 和 组件系统。 -
vue-router
:vue
官方推荐使用的路由框架。 -
vuex
:专为Vue.js
应用项目开发的状态管理器,主要用于维护vue
组件间共用的一些 变量 和 方法。 -
axios
( 或者fetch
、ajax
):用于发起GET
、或POST
等http
请求,基于Promise
设计。 -
vuex
等:一个专为vue
设计的移动端UI组件库。 -
创建一个 emit.js
文件,用于vue
事件机制的管理。 -
webpack
:模块加载和vue-cli
工程打包器。
问题二:vue-cli 工程常用的 npm 命令有哪些?
-
下载 node_modules
资源包的命令:
npm install
-
启动 vue-cli
开发环境的 npm命令:
npm run dev
-
vue-cli
生成 生产环境部署资源 的npm
命令:
npm run build
-
用于查看 vue-cli
生产环境部署资源文件大小的npm
命令:
npm run build --report
在浏览器上自动弹出一个 展示
vue-cli
工程打包后app.js
、manifest.js
、vendor.js
文件里面所包含代码的页面。可以具此优化vue-cli
生产环境部署的静态资源,提升 页面 的加载速度
15 NextTick
在下次
dom
更新循环结束之后执行延迟回调,可用于获取更新后的dom
状态
-
新版本中默认是
mincrotasks
,v-on
中会使用macrotasks
-
macrotasks
任务的实现:
-
setImmediate / MessageChannel / setTimeout
16 vue的优点是什么?
-
低耦合。视图( View
)可以独立于Model
变化和修改,一个ViewModel
可以绑定到不同的"View"
上,当View变化的时候Model可以不变,当Model
变化的时候View
也可以不变 -
可重用性。你可以把一些视图逻辑放在一个 ViewModel
里面,让很多view
重用这段视图逻辑 -
可测试。界面素来是比较难于测试的,而现在测试可以针对 ViewModel
来写
17 路由之间跳转?
声明式(标签跳转)
<router-link :to="index">
编程式( js跳转)
router.push('index')
18 实现 Vue SSR
其基本实现原理
-
app.js
作为客户端与服务端的公用入口,导出Vue
根实例,供客户端entry
与服务端entry
使用。客户端entry
主要作用挂载到DOM
上,服务端entry
除了创建和返回实例,还进行路由匹配与数据预获取。 -
webpack
为客服端打包一个Client Bundle
,为服务端打包一个Server Bundle
。 -
服务器接收请求时,会根据 url
,加载相应组件,获取和解析异步数据,创建一个读取Server Bundle
的BundleRenderer
,然后生成html
发送给客户端。 -
客户端混合,客户端收到从服务端传来的 DOM
与自己的生成的 DOM 进行对比,把不相同的DOM
激活,使其可以能够响应后续变化,这个过程称为客户端激活 。为确保混合成功,客户端与服务器端需要共享同一套数据。在服务端,可以在渲染之前获取数据,填充到stroe
里,这样,在客户端挂载到DOM
之前,可以直接从store
里取数据。首屏的动态数据通过window.__INITIAL_STATE__
发送到客户端
Vue SSR
的实现,主要就是把Vue
的组件输出成一个完整HTML
,vue-server-renderer
就是干这事的
-
Vue SSR
需要做的事多点(输出完整 HTML),除了complier -> vnode
,还需如数据获取填充至HTML
、客户端混合(hydration
)、缓存等等。 相比于其他模板引擎(ejs
,jade
等),最终要实现的目的是一样的,性能上可能要差点
19 Vue 组件 data 为什么必须是函数
-
每个组件都是 Vue
的实例。 -
组件共享 data
属性,当data
的值是同一个引用类型的值时,改变其中一个会影响其他
20 Vue computed 实现
-
建立与其他属性(如: data
、Store
)的联系; -
属性改变后,通知计算属性重新计算
实现时,主要如下
-
初始化 data
, 使用Object.defineProperty
把这些属性全部转为getter/setter
。 -
初始化 computed
, 遍历computed
里的每个属性,每个computed
属性都是一个watch
实例。每个属性提供的函数作为属性的getter
,使用Object.defineProperty
转化。 -
Object.defineProperty getter
依赖收集。用于依赖发生变化时,触发属性重新计算。 -
若出现当前 computed
计算属性嵌套其他computed
计算属性时,先进行其他的依赖收集
原文始发于微信公众号(消失的程序员):Vue.js面试题精选–2
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
文章由极客之音整理,本文链接:https://www.bmabk.com/index.php/post/250924.html