当前位置: 首页 > Web前端 > vue.js

学习笔记

时间:2023-03-31 18:15:04 vue.js

1.为什么vue组件数据一定要是函数?组件的一个明显特征是它们可以被重用。当修改一个属性时,数据也会改变。当data为函数时,各个实例的data属性是独立的,不会互相影响。2.vue给对象添加属性,页面没有响应。因为vue在初始化实例的时候会进行双向数据绑定,使用Object.defineProperty()为属性遍历添加getter/setter方法,所以属性必须存在于数据对象上才能够做这个过程,这样页面有反应。如果要给对象增加一个新的属性,这个时候新的属性还没有处理,没有响应式,所以数据会变,页面不会变。这时候就需要用到$set了。this.$set(Array,index,newValue)3.v-model双向数据绑定原理v-model本质上是语法糖4.scoped属性的作用当style标签具有scoped属性时,其cssstyle只能用于当前的vue组件,这样组件的样式就不会相互污染。5、scoped样式穿透/deep/或者使用两个样式标签6、vue双向数据绑定原理Vue采用数据劫持结合publisher-subscriber的方式,通过Object劫持各个属性的setter和getter。defineProperty(),当数据发生变化时向订阅者发布消息,并触发相应的监听回调。7、vue生命周期函数vue的生命周期分为创建前/后、加载前/后、更新前/后、销毁前/后8个阶段。(1)beforeCreate(创建前)表示在实例完全创建之前,挂载元素$el和vue实例的数据对象数据是未定义的,还没有初始化。(2)创建的(创建后)数据对象数据已经存在,可以调用methods中的方法操作data中的数据,但是dom没有生成,$el不存在。(3)BeforeMount(挂载前)vue实例的$el和data已经初始化。在挂载之前,它是一个虚拟dom节点。模板已经在内存中编辑过,但是模板还没有渲染到页面。data.message没有被替换。(4)mounted(mount后)vue实例挂载,data.message渲染成功。内存中的模板其实已经挂载到页面上了,用户已经可以看到渲染后的页面了。实例创建过程中的最后一个生命周期函数,当mounted被执行时,表示实例已经完全创建,DOM渲染已经在mounted中完成。(5)beforeUpdate(更新前)当数据改变时,会触发beforeUpdate方法。data数据尚未与最新数据同步。(6)updated(更新)当数据发生变化时,会触发update方法。页面和数据数据一直保持同步。(7)beforeDestory(销毁前)在组件销毁之前调用。在这一步中,实例仍然是完全可用的。(8)destroyed(销毁)组件销毁后调用,data的改变不会再次触发periodic函数,vue实例解除了事件监听和dom绑定,但dom结构仍然存在。8.Promise实现原理Promise是为了解决异步问题。在promise中,有一个具有三种状态的状态管理器:pending、fulfilled和rejected。    (1)promise对象的初始化状态为pending(2)调用resolve(success)时为pending=>fulfilled(3)调用reject(failed)时为pending=>rejectedWhat你需要记住的是要注意Promsie状态只能通过pending=>fulfilled/rejected来改变,一旦修改就不能改变。9.什么是vuex?Vuex是专门为vue.js应用开发的状态管理模式。它使用集中存储来管理应用程序所有组件的状态,并使用相应的规则来确保状态以可预测的方式变化。