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
$attr/$ 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规定页面元素一定要包括<html>和<body>标签，如果挂载到这两个元素上，页面没<html>标签或者<body>标签
el是Vue实例的挂载目标。在实例挂载之后，元素可以用 vm.$el 访问。

示例1： render 函数渲染的 DOM 替换 <div id="ppp"></div>

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <div id="ppp"></div>
  </body>
</html>


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

示例2：字符串模版替换 <div id="ppp"></div>

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

示例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
在实例销毁之后调用。调用后，所有的事件监听器会被移除，所有的子实例也会被销毁。该钩子在服务器端渲染期间不被调用。