vue框架（状态管理库，组合API）

状态管理库vuex（组件之间共享的数据）

1.定义：vuex是一个专为Vue.js应用程序开发的状态管理库，状态就是指组件之间共享的数据

2.vue项目中配置状态管理库vuex的流程

（1）下载并引入vuex相关内容

（2）创建状态管理库对象store

（3）对外抛出store对象

（4）在main.js中将store对象与当前项目相关联

 

 

3.store状态管理库对象重要组成部分

（1）state：组件之间共享的数据集合

组件中获取方法：

直接获取this.$store.state.xxx;

使用对象展开运算符的形式获取 ...mapState(['count','users'])

（2）getters:相当于store对象计算属性（主要用于对state的数据进行过滤）

组件中获取方法：

直接获取  this.$store.getters.xxx;

使用对象展开运算符的形式获取...mapGetter(['adults'])

（3）mutations:定义了修改state数据的同步方法（要修改的数据不是ajax异步获取的）

组件中如何触发：

直接使用commit触发this.$store.commit('xxxx',传递的参数)

使用对象展开运算符mapMutations形式获取...mapMutations(['xxx','xxx'])

（4）actions:定义了修改state数据异步方法（修改数据是Ajax获取的异步数据）

组件中如何触发：

直接使用dispatch触发this.$store.dispatch('xxx',传递的参数)

使用对象展开运算符mapActions的形式获取...mapActions(['xxx','xxx'])

--------------------------------------------------------------------------------------------

 vue3合成API---setup()

1.vue3中最重要的新特性之一

作用：之前vue对象规定了我们必须把某一类数据放到某一结构，这样在一定程度上对我们的代码进行了强制的分割。在vue3中我们引入了setup()合成API语法，它可以将某数据关联的内容整合到一个部分，即使setup()中的内容越来越多，也会围绕着大而不乱的形式开发项目。

2.setup()特点

1.setup()结构中定义的变量，函数都需要return之后才可以在模板中使用。
2.setup()是处于created生命周期之前的函数，也就是说data,methods中的数据是无法访问到的，setup()结构中的this指向undefined
ref ：在setup中只能包装字符串或数字形式的数据（值），使其变成响应式数据 reactive ：在setup中包装对象，数组形式的数据（对象、数组），使其变成响应式数据 toRefs ：可以直接在HTML模板中使用对象的属性名当变量，不需要用. 访问

3.setup()结构中如何使用生命周期函数

 

 

 4.vue对象的生命周期函数

（1）vue对象创建成功之前与创建成功之后：

     beforeCreate

     created

（2）vue与model绑定成功之前与绑定成功之后：

    beforeMount

    mounted

（3）view与model数据更新之前与数据更新之后：

   beforeUpdate

   updated

（4）vue对象销毁之前与销毁之后

   beforeDestroy

   destroyed

-----------------------------------------------------

页面布局

1.PC端页面布局

盒模型+浮动（定位）

2.移动端页面布局

弹性盒模型（display:flex)

3.响应式页面

媒体查询：根据屏幕设备的宽度大小，引入不同的css样式，编写响应式

响应式框架bootstrap：