vue 必知必会

1. data 为什么要返回一个函数

返回函数是为了让组件有自己的data对象而不与其它组件共享,加入返回对象的话(对象是按引用地址传递)会造成多组件间共享data数据。

官方解释: data-必须是一个函数
参考学习: Vue 组件 data 为什么必须是函数? 从原型链的角度去认识:加入组件原型链上的data是对象的话,如果两个实例同时引用一个对象,那么当你修改其中一个属性的时候,另外一个实例也会跟着改。

2. watch 和 computed 的比较

相同处: 如果做的事情是更新其他数据,那其实与把这个要更新的数据项定义成computed是一样的,这个时候用computed更有可读性,虽然技术上讲watch也可以实现。
区别:

  1. computed 属性的结果会被缓存,除非依赖的响应式属性变化才会重新计算。主要当作属性来使用。这就意味着只要 a或b 还没有发生改变,多次访问 计算属性的结果会立即返回之前的计算结果,而不必再次执行函数。computed是用于定义基于数据之上的数据。
  2. watch 一个对象,键是需要观察的表达式,值是对应回调函数。 主要用来监听某些特定数据的变化,从而进行某些具体的业务逻辑操作 (比如调用一个方法,这个是computed做不到也不应该做的。) ;可以看作是 computed 和 methods 的结合体;

官方解释:计算属性和侦听器
参考学习vue中的computed和watch到底有什么不同?

3. vue 的生命周期

创建:

beforeCreate: 是获取不到data中的数据的,因为数据的初始化在initState中
created:可以访问数据,但组件还没有被挂载,所以看不到

载入:

beforeMount: 创建虚拟Dom
mounted:将虚拟Dom渲染为真实Dom,并渲染数据

更新:

beforeUpdate:数据更新前
updated:更新后

销毁:

beforeDestory:适合移除事件,定时器等,否则可能引起内存泄漏
destoryed:如果有子组件,则也是子组件都递归销毁后才执行组件中农的销毁。

keep-alive独有的生命周期:actived和deactived:
keep-alive 包裹的组件切换的时候,缓存到内存中并执行dectivated函数,命中缓存渲染后会执行actived函数。

4.虚拟Dom

Virtual DOM最主要的是保留了Element之间的层次关系和一些基本属性。
h()函数 和patch函数:
两个阶段:

  1. 为虚拟Dom的第一次渲染: 将初次生成的Dom结构挂载到指定的container上面;
  2. 使用diff算法对比两个参数的差异,进而更新参数变化的Dom节点。

核心算法:

diff算法:通过新旧两颗树的比较,通过差异去实现局部的更新

参考: 深入理解react中的虚拟DOM、diff算法

5. vue中实现双向数据绑定的原理

采用数据劫持结合发布者-订阅者模式。

  1. 实现一个数据监听器Observer: 对数据对象的所有属性监听,变动则通知订阅者
  2. 实现一个指令解析Compile: 对所有元素节点的指令进行扫描和解析,根据指令模块替换数据以及绑定相应的更新函数
  3. 实现一个watcher: 作为连接Observer和Compile的桥梁,能够订阅并受到每个属性变动的通知,执行指令绑定的相应回调函数,从而更新视图。

(:)

  1. 使用Object.defineProperty() 实现数据响应式:铜鼓该函数监听set和get事件
  2. Dep类:属性的收集和派发更新操作

6. vuex是什么?怎么使用?

是什么:

是vue生态系统中的状态管理
用于组件间的状态管理:如音乐播放,登录状态,加入购物车等。

使用:

a. store:只用来读取的状态集中存放
b. mutations(同步):改变状态的方式是提交mutations
c. actions(异步):异步逻辑封装在actions中

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章