Vue 问题集锦(概念)

一 .computed 和 watch 的区别和运用的场景?

  computed: 计算属性,依赖其他属性值,并且computed 的值有缓存,只有它依赖的值发生改变,下一次获取它的值才会重新计算。

  watch: 更多的是 观察 的作用,类似数据的监听回调,每次监听的数据发生变化都会执行回调然后进行操作。

二. Vue 的父组件和子组件生命周期钩子函数执行顺序?

  • 加载渲染过程

    父 beforeCreate -> 父 created -> 父 beforeMount -> 子 beforeCreate -> 子 created -> 子 beforeMount -> 子 mounted -> 父 mounted

  • 子组件更新过程

    父 beforeUpdate -> 子 beforeUpdate -> 子 updated -> 父 updated

  • 父组件更新过程

    父 beforeUpdate -> 父 updated

  • 销毁过程

    父 beforeDestroy -> 子 beforeDestroy -> 子 destroyed -> 父 destroyed

三.  组件中 data 为什么是一个函数?

   组件是用来复用的,js对象是引用类型,如果是组件的data是对象,那么作用域就没有隔离,自组件的data会相互影响,如果是函数,每个实例可以维护一份一份被返回的对象的独立拷贝,组件之间不相互影响,而 new Vue 的实例不是复用,所以不存在引用对象的问题。

四. vue-router 中常用的 hash 和 history 路由模式实现原理吗?

  1. hash:  location.hash 基于来实现

  hash 路由模式的实现主要是基于下面几个特性:

  • URL 中 hash 值只是客户端的一种状态,也就是说当向服务器端发出请求时,hash 部分不会被发送;
  • hash 值的改变,都会在浏览器的访问历史中增加一个记录。因此我们能通过浏览器的回退、前进按钮控制hash 的切换;
  • 可以通过 a 标签,并设置 href 属性,当用户点击这个标签后,URL 的 hash 值会发生改变;或者使用  JavaScript 来对 loaction.hash 进行赋值,改变 URL 的 hash 值;
  • 我们可以使用 hashchange 事件来监听 hash 值的变化,从而对页面进行跳转(渲染)。

  2. history : HTML5 提供的 History API 来实现的

  history 路由模式的实现主要基于存在下面几个特性:

  • pushState 和 repalceState 两个 API 来操作实现 URL 的变化 ;
  • 我们可以使用 popstate 事件来监听 url 的变化,从而对页面进行跳转(渲染);
  • history.pushState() 或 history.replaceState() 不会触发 popstate 事件,这时我们需要手动触发页面跳转(渲染)

五. 虚拟DOM的优缺点?

  优点:保证性能下限     无需手动操作DOM    跨平台 

  缺点:无法进行极致优化

六. Vue 中的 Key 有什么作用? 

  key 是Vue 中 Vnode的唯一标示,通过这个 Key ,diff 的操作更加准确,快速。

posted @ 2019-08-20 13:43  SaBoo  阅读(154)  评论(0编辑  收藏  举报