VUE的小知识

89 阅读4分钟

MVVM和MVC****

MVC:当页面发生交互的时候,C会调用model层,完成对数据的修改,然后再通知页面的view更新

MVVM:m和v不直接进行关联,通过vm这个桥梁进行联系,m和vm进行着双向绑定,当m发生变化的时候v会触发更新,

双向数据绑定****

vue数据双向绑定是通过数据劫持结合发布者-订阅者模式的方式来实现的。

在init的时候会利用Object.defineProperty方法(不兼容 IE8)监听Vue实例的响应式数据的变化从而实现数据劫持能力(利用了 JavaScript 对象的访问器属性get和set,在未来的 Vue3 中会使用 ES6 的Proxy来优化响应式原理)。在初始化流程中的编译阶段,当render function被渲染的时候,会读取Vue实例中和视图相关的响应式数据,此时会触发getter函数进行依赖收集(将观察者Watcher对象存放到当前闭包的订阅者Dep的subs中),当数据发生变化或者视图导致的数据发生了变化时,会触发数据劫持的setter函数,setter会通知初始化依赖收集中的Dep中的和视图相应的Watcher,告知需要重新渲染视图,Wather就会再次通过update方法来更新视图

详细图解:www.cnblogs.com/canfoo/p/68…

Vue 2 数据绑定的缺陷****

1.无法监测到对象属性的动态添加和删除
2.无法监测到数组的下标和length属性的变更
解决方案
Vue2.0提供Vue.set方法用于动态给对象添加属性
Vue2.0提供Vue.delete方法用于动态删除对象的属性
使用数组的方法,用于监测数组的变更this.arr.splice(0, 0)   

vue中的虚拟DOM有什么好处 ****

虚拟DOM :执行渲染函数会生成虚拟树节点,在虚拟DOM渲染视图的过程中,会将新生成的vnode与上一次渲染的vnode进行对比,找出真正需要更新的节点。而这个对比的过程成为diff算法,通过patch函数实现,

Key:原理是vue在patch过程中通过key可以精准判断两个节点是否是同一个,从而避免频繁更新不同元素,使得整个patch过程更加高效,提高性能。

能解决的问题:真实DOM是很慢的,其元素非常庞大,操作DOM的代价是昂贵的,频繁操作还是会出现页面卡顿,影响用户的体验。

Vue.js 中的 DIFF 算法是怎么处理的?****

通过patch函数,里面有两个参数:oldVnode,vnode,比较之后给真实的DOM打补丁 image.png

This .$nextTick() **作用和原理

作用;由于性能,Vue 在修改数据后,视图不会立刻更新,而是等同一事件循环中的所有数据变化完成之后,再统一进行视图更新。获取更新后的 DOM。

Vue异步更新策略:Vue是异步执行dom更新的,一旦观察到数据变化,Vue就会开启一个队列,然后把在同一个事件循环 (event loop) 当中观察到数据变化的 watcher 推送进这个队列。如果这个watcher被触发多次,只会被推送到队列一次。这种缓冲行为可以有效的去掉重复数据造成的不必要的计算和Dom操作。而在下一个事件循环时,Vue会清空队列,并进行必要的DOM更新。

原理:所以当我们想在修改数据后立即看到dom执行结果就需要用到nextTick方法。nextTick方法会在队列中加入一个回调函数,通过flushCallbacks来执行更新,获取更新的数据,执行确保该函数在前面的dom操作完成后才调用  

watch监听一个对象时,如何排除某些属性的监听****

image.png

组件之间的通信****

方法一、props/$emit

方法二,通过一个空的 Vue 实例作为中央事件总线(事件中心 eventBus)使用on,on,emit

方法三,vuex

方法四 localStorage

方法五:attrs/attrs/listeners  仅仅是传递数据,而不做中间处理。

方法六:eventEmitter  通过发布和订阅模式

方法七; provide/inject,如果provide是固定的值‘浪里行舟’,即使provide的值变化了,用inject接受的值也不会发生改变

方法八:插槽

方法九:ref

为什么vue组件只能有一个根结点 ****

1.Vue 的 diff算法所有节点组成一颗树,需要有根节点才能进行同层比较,因为从效率上讲,如果树有多个根,那么就会产生多个入口,这对于 遍历、查找、比较 都不方便。

2.一个vue单文件组件就是一个vue实例,如果template下有多个div,那么无法指定vue实例的根入口。

vue的template有什么用****

template的作用是模板占位符,可帮助我们包裹元素,不会渲染在dom树中

插槽****

默认插槽:直接在自组件标签内写内容

具名插槽:带有name标识的插槽,会自动匹配子组件中slot标签的name属性

作用域插槽:可以获取子组件slot中提供的数据,在父组件中可根据不同的场景下将数据渲染成不同的样式。

父组件如何监听子组件的生命周期?****

image.png

vue中router与route区别****

$route对象表示当前的路由信息

$router对象是全局路由的实例,是new Router构造方法的实例

vue路由导航守卫执行顺序****

beforeEach(全局) 是否是从其他页面跳转:是:beforeRouteLeave 不是->beforeEnter(当前路由)是否渲染过当前组件:是->beforeRouteUpdate 否->beforeRouteEnter(当前组件)->beforeReslove—>afterEach

vue模版编译原理****

image.png

怎么理解 Vue 的单向数据流?****

Vue 的单向数据流:指数据一般从父组件传到子组件,子组件没有权利直接修改父组件传来的数据,即子组件从 props 中直接获取的数据,只能请求父组件修改数据再传给子组件。父级属性值的更新会下行流动到子组件中。