vue生命周期，vuex，v-show和v-if，双向绑定

逃离我推掉我的手 2022-12-24 08:57 109阅读 0赞

vue的生命周期  
new vue（） 后，首先初始化事件和生命周期，执行beforeCreate钩子函数执行，this指向创建的实例，不能访问到data，methods上的方法和数据。

随后初始化data，methods等数据方法初始化，接着执行Created钩子函数，这时候可以访问到data，methods上的属性方法。接着判断有没有el属性（没有使用vm.$mount() 挂载模板），有就开始编译模板，把data对象中的数据和vue语法生命的模板编辑成浏览器可读的html文件。

执行beforeMount钩子，将编译完成的html挂载到对应虚拟dom之前触发的钩子，此时页面并没有内容，接着将编译好的html替换掉el属性指向的dom。随后执行Mounted钩子函数，挂载完成之后执行的钩子。

beforeUpdate更新之前的钩子，updated 更新之后的钩子，beforeDestory实例销毁签执行的钩子，Destoried 实例销毁后执行的钩子。

https://www.jianshu.com/p/46c9d777cab1----这个链接中有两个不错的图

vuex  
优质博客：https://blog.csdn.net/dkr380205984/article/details/82185740 ----介绍得详细

https://www.cnblogs.com/msi-chen/p/12664140.html

vuex是什么；

（它采用集中式存贮管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化）。

Vuex是专门为Vue服务，用于管理页面的数据状态、提供统一数据的，相当于数据库mongoDB，MySQL等，任何组件都可以存取存取其中的数据。全局更新。

它规定所有的数据必须通过action—>mutaion—>state这个流程进行来改变状态的。再结合Vue的数据视图双向绑定实现页面的更新。统一页面状态管理，可以让复杂的组件交互变的简单清晰

vuex的核心概念；

vuex五大核心属性：state，getter，mutation，action，module

state：存储数据，状态；在根实例中注册了store 后，用 this.$store.state 来访问；对应vue里面的data；存放数据方式为响应式，vue组件从store中读取数据，如数据发生变化，组件也会对应的更新。一般这个state赋值给computed。

getter：可以认为是 store 的计算属性，它的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。

mutation：更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。

action：包含任意异步操作，通过提交 mutation 间接更变状态。

module：将 store 分割成模块，每个模块都具有state、mutation、action、getter、甚至是嵌套子模块。 -----命名空间更有利于规划

module，后访问module中的数据 用\*\*this.$store.state.User.info \*\* 其中User是模块的名称。

vuex中的数据传递过程

当组件进行数据修改的时候，需要调用dispatch来触发actions里面的方法。actions里面的每个方法（actions里面的每个函数都会有一个context参数，可以使用commit方法）中都会有一个commit方法，当方法执行的时候会通过commit来触发mutations里面的方法进行数据的修改。mutations里面的每个函数都会有一个state参数，这样就可以在mutations里面进行state的数据修改，当数据修改完毕后，会传导给页面。页面的数据也会发生改变。

为什么要使用vuex：

项目中不可避免的是某些变量需要在全局范围内引用，此时父子组件的传值，子父组件间的传值，兄弟组件间的传值成了我们需要解决的问题。虽然vue中提供了props（父传子）commit（子传父）兄弟间也可以用localstorage和sessionstorage。但是这种方式在项目开发中带来的问题比他解决的问题（难管理，难维护，代码复杂，安全性低）更多。vuex的诞生也是为了解决这些问题，从而大大提高我们vue项目的开发效率。所以我们需要把组件的共享状态抽取出来，以一个全局单例模式管理。在这种模式下，我们的组件树构成了一个巨大的“视图”，不管在树的哪个位置，任何组件都能获取状态或者触发行为！另外，通过定义和隔离状态管理中的各种概念并强制遵守一定的规则，我们的代码将会变得更结构化且易维护。

vuex的使用

state-------------------action-------------------Mutation

dispatch commit

this.$store.dispatch(“changeCity”,city)

vuex 中的代码

actions :\{ action中的函数有两个参数，一个是ctx，后面的就是传入参数  
changeCity(ctx,city)\{  
//console.log(city)  
//ctx表示的是上下文，可以拿到commit方法  
ctx.commit(“changeCity”,city)  
\}  
\},  
mutations:\{ //mutations 中也有两个参数，一个是 state，后面的就是传入参数  
changeCity(state,city)\{  
state.city=city  
\}  
\}  
1  
2  
3  
4  
5  
6  
7  
8  
9  
10  
11  
12  
相关映射：

…mapState() 中的mapState通过扩展运算符将store.state.orderList 映射this.orderList 这个this 很重要，这个映射直接映射到当前Vue的this对象上。

所以通过this都能将这些对象点出来

…mapState(\[‘orderList’,‘login’\]), ====> 可以传入数组  
…mapState(\{orderList:“orderList”,login:(state)=>state.login), ====> 也可以传入对象： (这种对象 且对象是个函数的时候还可以组合本组件的数据)

...mapState({orderList:"orderList",login:(state)=>this.str+'状态是：'+state.login)

1  
2  
3  
4  
5  
双向绑定  
https://www.cnblogs.com/wangjiachen666/p/9883916.html

https://www.cnblogs.com/fundebug/p/responsive-vue.html

v-show和v-if的使用场景：  
两者区别：  
v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。  
v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。  
相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。

汇总区别：  
（1）手段：v-if是动态的向DOM树内添加或者删除DOM元素；v-show是通过设置DOM元素的display样式属性控制显隐；  
（2）编译过程：v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件；v-show只是简单的基于css切换；  
（3）编译条件：v-if是惰性的，如果初始条件为假，则什么也不做；只有在条件第一次变为真时才开始局部编译（编译被缓存？编译被缓存后，然后再切换的时候进行局部卸载); v-show是在任何条件下（首次条件是否为真）都被编译，然后被缓存，而且DOM元素保留；  
（4）性能消耗：v-if有更高的切换消耗；v-show有更高的初始渲染消耗

适用场景  
一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。  
因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好

组件中的data为什么是返回对象  
https://www.cnblogs.com/yuerdong/p/11395410.html

一个组件被创建好之后，就可能被用在各个地方，而组件不管被复用了多少次，组件中的data数据都应该是相互隔离，互不影响的，基于这一理念，组件每复用一次，data数据就应该被复制一次，之后，当某一处复用的地方组件内data数据被改变时，其他复用地方组件的data数据不受影响。

路由模式  
hash模式：

使用URL的hash来模拟完整的URL，当URl改变的时候，页面不会重新加载，hash（\#）是URl的一个瞄点，代表网页中的一个位置， \# 是用来指导浏览器动作的，对服务器完全无用，完成前端路由。hash模式通过瞄点值的改变，根据不同的值，渲染指定DOM位置的不用数据。

history模式：

丢掉了 \# 号，给 了前端完全地自由，hash只能更改\# 后面地部分

缺点就是，如果刷信页面，后端没有处理这个情况时候，前端刷新就是实实在在地请求服务器这样会消耗很多时间。

组件间通信