vue面试常见问题汇总

https://www.cnblogs.com/AlbertP/p/10754880.html

v-show 与 v-if 区别

v-show是css切换,v-if是完整的销毁和重新创建。
使用频繁切换时用v-show,运行时较少改变时用v-if
v-if=‘false’ v-if是条件渲染,当false的时候不会渲染


计算属性和 watch 的区别

计算属性是自动监听依赖值的变化,从而动态返回内容,监听是一个过程,在监听的值变化时,可以触发一个回调,并做一些事情。
所以区别来源于用法,只是需要动态值,那就用计算属性;需要知道值的改变后执行业务逻辑,才用 watch,用反或混用虽然可行,但都是不正确的用法。
说出一下区别会加分
computed 是一个对象时,它有哪些选项?
computed 和 methods 有什么区别?
computed 是否能依赖其它组件的数据?
watch 是一个对象时,它有哪些选项?

有get和set两个选项
methods是一个方法,它可以接受参数,而computed不能,computed是可以缓存的,methods不会。
computed可以依赖其他computed,甚至是其他组件的data
watch 配置
handler
deep 是否深度
immeditate 是否立即执行
总结

当有一些数据需要随着另外一些数据变化时,建议使用computed。
当有一个通用的响应数据变化的时候,要执行一些业务逻辑或异步操作的时候建议使用watcher


事件修饰符

绑定一个原生的click事件, 加native,
其他事件修饰符
stop prevent self

组合键
click.ctrl.exact 只有ctrl被按下的时候才触发


你知道双向绑定和单向数据流吗,vue里面是怎么做的?
  • vue是单向数据流,不是双向绑定
  • vue的双向绑定不过是语法糖 .sync v-model
  • Object.definePropert是用来响应式更新的
vue中不同层级的组件共享数据有哪些方案?
  • vuex
  • prop/ $emit
  • listener
  • provider/ inject
  • event bus

懒加载方案?

滚动到当前页面才加载
addEventListener(scroll,handle)
getBoundingClientRect()
new Image()
Throttle or debounce


修饰符.passive

如何检测元素出现在视窗中?

intersectionObserver API


vue中el解析
未命名.png
  • 如果存在 render 函数或 template 属性,则挂载元素会被 Vue 生成的 DOM 替换;否则,挂载元素所在的 HTML 会被提取出来用作模版
  • el不能挂载到body或者html元素上,因为最后渲染的时候vue会把挂载的元素被template或者render替换掉。W3C规定页面元素一定要包括和标签,如果挂载到这两个元素上,页面没标签或者标签
  • el是Vue实例的挂载目标。在实例挂载之后,元素可以用 vm.$el 访问。

示例1: render 函数渲染的 DOM 替换



  
    
    
  
  
    

new Vue({
  el: '#ppp',
  router,
  store, 
  render: h => h(App)
})

示例2:字符串模版替换

new Vue({
  el: '#ppp',
  router,
  components: { App },
  template: ''
})

示例3:手动挂载且不存在render函数和template属性

new Vue({
  router,
  store,
}).$mount('#ppp')

vue生命周期

https://blog.csdn.net/weixin_34301132/article/details/87964549

      initLifecycle(vm);
      initEvents(vm);
      initRender(vm);
      callHook(vm, 'beforeCreate');
      initInjections(vm); // resolve injections before data/props
      initState(vm);
      initProvide(vm); // resolve provide after data/props
      callHook(vm, 'created');
  • beforeCreate
    在数据观测和初始化事件还未开始
  • created
    完成数据观测,属性和方法的运算,初始化事件,$el属性还没有显示出来
  • beforeMount
    在挂载开始之前被调用,相关的render函数首次被调用。实例已完成以下的配置:编译模板,把data里面的数据和模板生成html。此时还没有挂载html到页面上。
    -mounted
    在el 被新创建的 vm.$el 替换,并挂载到实例上去之后调用。实例已完成以下的配置:用上面编译好的html内容替换el属性指向的DOM对象。完成模板中的html渲染到html页面中。此过程中进行ajax交互。
    -beforeUpdate
    在数据更新之前调用,发生在虚拟DOM重新渲染和打补丁之前。可以在该钩子中进一步地更改状态,不会触发附加的重渲染过程。
    -updated
    在由于数据更改导致的虚拟DOM重新渲染和打补丁之后调用。调用时,组件DOM已经更新,所以可以执行依赖于DOM的操作。然而在大多数情况下,应该避免在此期间更改状态,因为这可能会导致更新无限循环。该钩子在服务器端渲染期间不被调用。
    -beforeDestroy
    在实例销毁之前调用。实例仍然完全可用。
    -destroyed
    在实例销毁之后调用。调用后,所有的事件监听器会被移除,所有的子实例也会被销毁。该钩子在服务器端渲染期间不被调用。
Vue数据劫持

你可能感兴趣的:(vue面试常见问题汇总)