【前端--面试】常见面试题(三)—— Vue

3 篇文章 0 订阅
2 篇文章 0 订阅
Vue的双向绑定数据的原理

采用数据劫持结合发布者-订阅者模式的方式,通过 Object.defineProperty() 来劫持各个属性的 setter,getter,在数据变动时发布消息给订阅者,触发相应监听回调。

Vue 如何去除url中的

vue-router 默认使用 hash 模式,所以在路由加载的时候,项目中的 url 会自带 #。如果不想使用 #, 可以使用 vue-router 的另一种模式 history。

new Router({
  mode: 'history',
  routes: [ ]
})
v-if 和 v-show 区别

使用了 v-if 的时候,如果值为 false ,那么页面将不会有这个 html 标签生成。v-show 则是不管值为 true 还是 false ,html 元素都会存在,只是 CSS 中的 display 显示或隐藏。

route和route和route和router的区别

$router 为 VueRouter 实例,想要导航到不同 URL,则使用 r o u t e r . p u s h 方 法 router.push 方法 router.pushroute 为当前 router 跳转对象里面可以获取 name 、 path 、 query 、 params 等。

NextTick的作用

$nextTick 是在下次 DOM 更新循环结束之后执行延迟回调,在修改数据之后使用 $nextTick,则可以在回调中获取更新后的 DOM。

Vue 组件 data 为什么必须是函数

因为js本身的特性带来的,如果 data 是一个对象,那么由于对象本身属于引用类型,当我们修改其中的一个属性时,会影响到所有Vue实例的数据。如果将 data 作为一个函数返回一个对象,那么每一个实例的 data 属性都是独立的,就不会相互影响了。

Vue 中怎么自定义指令
// 注册一个全局自定义指令 `v-focus`
Vue.directive('focus', {
  // 当被绑定的元素插入到 DOM 中时……
  inserted: function (el) {
    // 聚焦元素
    el.focus()
  }
})

在局部注册:

directives: {
  focus: {
    // 指令的定义
    inserted: function (el) {
      el.focus()
    }
  }
}
keep-alive 的作用

keep-alive 是 Vue 内置的一个组件,可以使被包含的组件保留状态,或避免重新渲染,还可以使用API提供的props,实现组件的动态缓存

<keep-alive>
  <component>
    <!-- 该组件将被缓存! -->
  </component>
</keep-alive>
Vue 的核心是什么

数据驱动 组件系统

vue 等单页面应用的优缺点

优点
良好的交互体验
良好的前后端工作分离模式
减轻服务器压力

缺点:
SEO难度较高
前进、后退管理
初次加载耗时多

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值