学习笔记

Posted 2021-09-15 小丑ba怪

1. vue组件data为什么必须是函数？
组件有一个很明显的特性是 他是可以被复用的。当修改一个属性的时候，data也会发生改变。
当data是一个函数的时候，每一个实例的data属性都是独立的，不会互相影响了。
2. vue给对象新增属性，页面没有响应
由于vue会在初始化实例时进行双向数据绑定，使用Object.defineProperty()对属性遍历添加getter/setter方法，所以属性必须在data对象上存在，才能进行此过程，这样页面才能是响应的。
如果要给对象添加新的属性，此时新属性没有进行次过程，不是响应式的，所以会出现数据变化，页面不变的情况。此时需要用到$set。
this.$set(Array, index, newValue)
3. v-model双向数据绑定原理
v-model本质上是语法糖
4. scoped属性作用
当一个style标签拥有scoped属性的时候，他的css样式只能用于当前的vue组件，可以使组件的样式不互相污染。
5. scoped样式穿透 /deep/或使用两个style标签
6. vue双向数据绑定原理
vue采用数据劫持结合发布者-订阅者的方式，通过Object.defineProperty()来劫持各个属性的setter，getters，在数据变动时发布消息给订阅者，触发相应的监听回调。
7. vue生命周期函数
vue的生命周期总共分为8个阶段: 创建前/后，载入前/后，更新前/后，销毁前/后。
(1) beforeCreate（创建前）
表示实例完全被创建出来之前，vue实例的挂载元素$el和数据对象data都为undefined，还未初始化。
(2) created（创建后）
数据对象data已存在，可以调用methods中的方法，操作data中的数据，但dom未生成，$el未存在。
(3) beforeMount（挂载前）
vue实例的$el和data都已初始化，挂载之前为虚拟的dom节点，模板已经在内存中编辑完成了，但是尚未把模板渲染到页面中。data.message未替换。
(4) mounted（挂载后）
vue实例挂载完成，data.message成功渲染。内存中的模板，已经真实的挂载到了页面中，用户已经可以看到渲染好的页面了。实例创建期间的最后一个生命周期函数，当执行完mounted就表示，实例已经被完全创建好了，DOM渲染在mounted中就已经完成了。
(5) beforeUpdate（更新前）
当data变化时，会触发beforeUpdate方法。data数据尚未和最新的数据保持同步。
(6) updated（更新后）
当data变化时，会触发update方法。页面和data数据已经保持同步了。
(7) beforeDestory（销毁前）
组件销毁之前调用，在这一步，实例仍然完全可用。
(8) destoryed（销毁后）
组件销毁之后调用，对data的改变不会再触发周期函数，vue实例已经解除事件监听和dom绑定，但dom结构依然存在。
8. promise实现原理
promise是解决异步问题的。
在promise的内部，有一个状态管理器的，有三种状态：pending、fulfilled、rejected。　　　　
(1) promise 对象初始化状态为 pending
(2) 当调用resolve(成功)，会由pending => fulfilled
(3) 当调用reject(失败)，会由pending => rejected
需要记住的是注意promsie状态 只能由 pending => fulfilled/rejected, 一旦修改就不能改变。

9. 什么是vuex？
vuex是一个专门为vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种能可预测的方式发生变化。