Vue相关问题总结

1:vue组件需要注意的事项?

组件参数的data值必须是函数,同时这个函数要求返回一个对象

作用:使用函数会形成一个闭包,这样保证每个组件都是一个独立的作用域,不会相互影响。

返回对象:data里面本身就是存放数据的,不管是普通的赋值,对象,数组,怎么存数据?不就是利用键值对。

所以要求返回一个对象

2:Vue中的 key 有什么作用?

要使用key来给每个节点做一个唯一标识,Diff算法就可以正确的识别此节点,找到正确的位置区插入新的节点

key的作用主要是为了高效的更新虚拟DOM。

3:computed,watch,methods,之间的区别?

watch和computed都是以Vue的依赖追踪机制为基础的,依赖的数据,发生变化,会自动执行

computed: 计算属性是基于他们的响应式依赖进行缓存的,依赖数据不变的时候computed从缓存中获取,不会重新计算。

methods:方法是手动调用才会执行,不管依赖的数据变不变,methods都会重新计算

在computed和watch方面,一个是计算,一个是观察,在语义上是有区别的。

计算是通过变量计算来得出数据。而观察是观察一个特定的值,根据被观察者的变动进行相应的变化

4:$nextTick方法的作用:
当页面上的元素被重新渲染以后,才会指定回调函数中的代码

5:组件之间传值

  • 父组件向子组件传值
    父组件发送发送的形式是以属性绑定的形式,绑定到子组件身上
    子组件用props接收
  • 子组件向父组件传值
    子组件用$emit()触发事件
    $emit()的第一个参数为自定义事件名称,第二个参数为需要传递的数据
    父组件用v-on监听子组件的数据
  • 兄弟之间传值
    兄弟组件之间传值,需要借助事件中心,通过事件中心传递数据
    1. 提供一个事件中心: var zx = new Vue()
    2. 传递数据方: 通过一个事件触发$emit(方法名,传递的数据)
    3. 接收数据方:通过mounted(){}钩子函数,触发zx.$on()方法名
    4. 销毁事件: 通过zx.$off()方法销毁,销毁之后无法传递数据

6:vue路由钩子函数
路由钩子函数的作用:可以控制导航跳转,有beforeEach,afterEach等。需要登录才能调整页面的重定向功能。
beforeEach主要有3个参数to,from,next:

to:route即将进入的目标路由对象,

from:route当前导航正要离开的路由

next:function一定要调用该方法resolve这个钩子。执行效果依赖next方法的调用参数。可以控制网页的跳转。
7:keep-alive
keep-alive是 Vue 内置的一个组件,可以使被包含的组件保留状态,或避免重新渲染
8: vue生命周期
vue实例从创建到销毁的这个过程叫vue的生命周期
在生命周期里面有很多钩子函数,让我们在控制整个vue实例的时候,形成更好的逻辑,有四个状态,八个阶段。beforeCreate,created,beforeMount,Mounted,beforeUpdate,update,bbeforeDestory,destory
页面第一次加载的时候,,会执行beforeCreate,created,beforeMount,Mounted
常用的 created : 在这个阶段初始化数据,在项目中请求数据的时候,一般在这个钩子函数内触发
mounted:模板中的html已经渲染到页面,此时可以操作dom
9:vue-router
vue用来写SPA(单页面应用),SPA的核心之一就是跟新视图,而不请求页面。vue-router实现前端单页面路由的时候,提供了两个方式 history和hash
hash模式: 在url中,#之后包括#的字符串都叫hash,而且hash是不包含在http请求中的,所以对后端来说,即使没有做到路由的完全覆盖,也不会返回404
history模式:采用的是h5的新特性,前端的url和后端的url必须完全一致,一旦不一致就会出现404,所以要在服务端增加一个可以覆盖全局的资源,如果url匹配不到任资源,应该返回一个index.html页面
10: $ route 和$ router
$route:是路由信息对象 path,params,hash,query
$router:是路由的实例对象 包含路由的跳转方法,钩子函数
引申: params和query的区别
+. params
路由跳转的方法有哪些 push .go
路由的钩子函数有哪些 beforeEach((to,form,next()=>))
路由守卫:只有在进入入login这个路由,或者(当前的token值是有效的)才能 next(放行),否则路由跳转到登录页面
11: MVC 和MVVM
12双向数据绑定
刚开始就是通过v-model用的很舒服,后来开始结合MVVM这个整体的思想研究,双向绑定的原理。采用了数据劫持结合发布者订阅模式,通过Object.defineProperty来劫持各个属性的getter和setter(这里有一个不好的地方,要在其上定义属性的对象。要定义或者修改对象的属性(必须遍历每个属性),将要被定义或者被修改的属性的描述),数据发生变化的变动发送消息给订阅者,触发响应的监听回调

递归+遍历

target: 被代理对象。
handler: 是一个对象,声明了代理target的一些操作。
obj: 是被代理完成之后返回的对象。

发布了142 篇原创文章 · 获赞 77 · 访问量 14万+

猜你喜欢

转载自blog.csdn.net/qq_38845858/article/details/103501477
今日推荐