vue 中常见考点

1、计算属性和方法的区别

参考官方回答:https://cn.vuejs.org/v2/guide/computed.html

2、父组件访问子组件实例的方法

  • vm.$children——不保证顺序,也不是响应式的
  • vm. s l o t s 访 ( s l o t = " f o o " v m . slots——用来访问被插槽分发的内容。每个具名插槽 有其相应的属性(例如:slot="foo" 中的内容将会在vm. slots.foo 中被找到)。default 属性包括了所有没有被包含在具名插槽中的节点。
  • vm.$refs——一个对象,持有注册过 ref 特性 的所有 DOM 元素和组件实例。

3、Vue的双向绑定原理
Vue实现这种数据双向绑定的效果,需要三大模块:

  • Observer:能够对数据对象的所有属性进行监听,如有变动可拿到最新值并通知订阅者

  • Compile:对每个元素节点的指令进行扫描和解析,根据指令模板替换数据,以及绑定相应的更新函数

  • Watcher:作为连接Observer和Compile的桥梁,能够订阅并收到每个属性变动的通知,执行指令绑定的相应回调函数,从而更新视图。

4、Object.defineProperty()对数据劫持有什么弊端?

  • 该方法对数组的支持不是很好。例如数组arr,对此数组通过Object.defineProperty()方法设置setter,getter函数。当对arr整个赋值操作时会触发setter函数,例如arr=[1,3]。若对arr的某个下标进行赋值操作,则不会触发setter函数,例如arr[1]=3,不会触发。

  • 为解决此类问题,官方框架重写了数组的一些方法。
    push()、pop()、shift()、unshift()、splice()、sort()、reverse() 7中方法进行了重写。

5、vue-router 中hash 和history模式的原理

  • hash模式:默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL,于是当 URL 改变时,页面不会重新加载。
    hash模式背后的原理是onhashchange事件,可以在window对象上监听这个事件:

    window.onhashchange = function(event){
    console.log(event.oldURL, event.newURL);
    }

  • history模式:这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面。
    URL 就像正常的 url,例如 http://yoursite.com/user/id
    还需要后台配置支持。因为我们的应用是个单页客户端应用,如果后台没有正确的配置,当用户在浏览器直接访问 http://oursite.com/user/id 就会返回 404
    所以呢,你要在服务端增加一个覆盖所有情况的候选资源:如果 URL 匹配不到任何静态资源,则应该返回同一个 index.html 页面,这个页面就是你 app 依赖的页面。
    相关事件:pushState,replaceState

  • 在hash模式下,前端路由修改的是#中的信息,而浏览器请求时是不带它玩的,所以没有问题.但是在history下,你可以自由的修改path,当刷新时,如果服务器中没有相应的响应或者资源,会分分钟刷出一个404来。

6、nextTick是干嘛的?

  • 在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,获取更新后的 DOM。修改数据是一个同步任务,而更新DOM是异步任务。

  • 注意 mounted 不会承诺所有的子组件也都一起被挂载。如果你希望等到整个视图都渲染完毕,可以用 vm.$nextTick 替换掉mounted

7、axios做一些缓存优化的功能,key如何定义
~~~

猜你喜欢

转载自blog.csdn.net/qq_36131788/article/details/85112572