vue生命周期
vue数据双向绑定
vue虚拟dom
computed和watch运行机制1
computed和watch运行机制2
vue30道面试题
VUE面试点:
需要熟悉:生命周期,钩子函数,钩子函数参数
单文件开发(需要使用webpack,项目暂时无法使用 例子:http://div.io/topic/1701)
v-if 对条件块会创建、销毁、创建
v-show 一开始就会创建组件,根据css属性display来显示、隐藏条件块
prop
单向数据流 -- 当父组件更新时,子组件中的所有prop都会更新会最新的值,所以不应该在子组件中更改prop。子组件通过$emit 自定义事件通向父组件发通知。
子组件中可以用data属性存储prop,也可以使用计算属性来转换prop。
computed和watch运行机制:
https://segmentfault.com/a/1190000016368913
https://juejin.im/post/5d59f2a451882549be53b170
watch允许异步操作
为什么vue不能给数组元素直接赋值呢?
vue的双向绑定是通过object.defineProperty给对象添加setter/getter方法实现的。object.defineProperty是针对已有项的设置,数组中新加的项是不会被设置的,也不会触发响应。data中的属性是预先定义好的。
动态添加的数组项不能被劫持而产生响应,给数组的每一项做劫持,性能低且笨拙。
vue生命周期
keep-alive的了解?
https://cn.vuejs.org/v2/api/#keep-alive
组件中的data为什么是一个函数?而不是对象?
组件是复用的,并且js里对象是引用关系,如果组件data是对象,作用域就没隔离,子组件中的data属性值会相互影响。
如果组件data是函数,每个组件实例都返回一份对象的独立拷贝,组件实例间的data属性就不会相互影响。
而new vue的实例只有一份,是不会被复用的,所以不存在引用对象的问题。
v-model的原理?
v-mode本质上是语法糖,它为不同的输入元素使用不同的属性并且抛出不同的事情。
text和textarea使用value属性和input事件
checkout和radio使用checked属性和change事件
select将value作为prop,并将change作为事件
vue组件间通信方式?
props和$emit 父子间通信。
ref和$parent/$children
eventbus($emit和$on)--一个空vue实例,用它来触发事件和监听事件,父子、兄弟、隔代组件间都可以通信。
$attrs和$listeners--
provide和inject--
vuex
你使用过vuex吗?
vue-router的路由模式有几种?
能说下 vue-router 中常用的 hash 和 history 路由模式实现原理吗?
1.hash模式实现原理--hash路由模式实现主要基于以下几个特性
早期前端路由是由 location.hash 实现的。 location.hash 的值就是URL#后面的内容,#是用来指导浏览器动作的,对服务端无用,发送的请求中不带有#。只改变#后面的内容,不会刷新页面,页面会滚动到#指定的锚点位置。
hash每次改变,会在浏览器的访问历史中增加一个记录(IE6、7不支持),所以可以通过浏览器前进、回退按钮控制hash的切换。
可以通过a标签,设置href属性,用户点击标签后hash会发生变化。或者使用javascript对location.hash复制来URL hash。
html5事件onhashchange 监听hash的变化,从而对页面进行跳转(渲染)。
2.history模式实现的原理--
html5提供了history api来实现URL变化。history.pushState和history.replaceState,这两个api在不刷新的情况下,操作浏览器的历史记录。history.pushState是新增一条历史记录,history.replaceState是替换当前的历史记录。
window.history.pushState(null, null, path);window.history.replaceState(null, null, path);
history路由模式实现主要基于以下几个特性
pushState和replaceState两个api来操作实现url变化。
使用popstate监听url变化,从而对页面进行跳转(渲染)
pushState和replaceState不会触发popstate,需要手动触发页面跳转(渲染)
什么是MVVM?
https://juejin.im/post/5d421bcf6fb9a06af23853f1
vue怎么监听对象和数组的?
-- object.defineProperty只能劫持属性。不能劫持整个对象和数组,vue通过遍历数组和递归遍历对象,利用object.defineProperty对数组和独享实现数据监听。