VUE

2020-06-22  本文已影响0人  hello_water

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生命周期

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对数组和独享实现数据监听。

上一篇下一篇

猜你喜欢

热点阅读