Vue相关问题总结

桃扇骨 2021-08-13 14:42 390阅读 0赞

**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: 是被代理完成之后返回的对象。