vue知识点总结2

一、 组件生命周期
beforeCreate  在实例初始化之后data observer和事件配置之前被调用

created   data 已经初始化，计算属性、event/watch事件回调，但dom属并未挂载

beforeMount  在挂载前被调用render函数首次被调用生成虚拟dom

mounted   挂载完成，dom树已经完成渲染到页面，可进行dom操作

beforeDestroy   清楚watcher 、 子组件事件监听器等

destroyed   组件销毁 所有数据和方法不可被访问

二、 组件之间的数据共享
组件之间的关系
1、父子关系

2、兄弟关系父组件向子组件共享数据
父组件：

<child :msg="message"></child>

data(){

        return{

        message:"hello"

}

}

子组件：

<div>{{msg}}</div>

export default {

        props:{

                msg:{type:string,default:nihao}

}

}

2.子组件向父组件共享数据
子组件：

export default{
         data(){
                return{
                        count:0
        }
},       

methods:{
           add(){
                        this.count++;
                         this.$emit('change-count',this.count)

                }

        }

}

父组件：

<child @change-count="changeCount"></child>

data(){

        return{

                parentCount:0

        }

}

methods:{

        changeCount(count){

                this.parentCount=count

        }

}

2.2.4 兄弟组件之间的数据共享
1、创建eventBus.js模块，并向外共享一个Vue的实例对象

2、在数据发送方，调用bus.$emit('事件名称'，要发送的数据)方法触发自定义事件

3、在数据接收方，调用bus.$on（'事件名称'，事件处理函数）方法注册一个自定义事件

3.1 ref引用
ref用来辅助开发者在不依赖jQuery的情况下，获取DOM元素组件的引用

每个vue的组件实例上，都包含一个$refs对象，里面存储着对应的DOM元素和组件的引用。默认情况下，组建的$refs指向的一个空对象

<div ref="myRef">ref 组件</div>

<button @click="getRef">获取 $refs 引用</button>

methods: {
    getRef() {
      通过 this.$refs 引用的名称，可以获取到 DOM 元素的引用 
      console.log(this.$refs.myRef);
       操作 DOM 元素，把文本颜色改为红色 
      this.$refs.myRef.style.color = 'red';
    }
  }

3.1.2 路由
路由模式
1、hash路由

2、历史记录路由

mode："hash"|"history"

哈希路由不依赖后端，刷新并没有问题

历史记录没有后端配置刷新会404

路由原理
地址栏更新页面不刷新，监听变化切换div模板页面的切换

哈希路由：监听onhashchange事件

历史路由：监听onpopstate

路由的配置
普通配置

{path："路径",name:"名称",component:"组件"}

路由懒加载（vite打包需要二次处理）

{path:"路径",name:"名称",component:()=>import(组件)}

子路由

{path:"路径",name:"名称",component:组件,children:[

        {path:路径,component:组件},
        ...
]}

传参路由

{path:"/produce/:id",name:"名称",componnent:组件}

<router-link to="/produce/abc"></router-link>

$route.params.id

路由传参
1、路径传参

{path："/produce/:id",name:"名称",component:组件}

<router-link to="/produce/abc"></router-link>

$route.params.id

2、query查询传参
<route-link to="/user?name=gs">

$route.query获取

3、meta 元数据传参
没有hasTabs 底部栏

{path:"/user",component:xxx,meta:{hasTabs:true}}

<router-view/>

<tabs v-if=""$route.meta.hasTabs></tabs>

keep-alive缓存路由页面
在原信息页面定义keep值为true会被缓存

{path:"category",meta:{keep:true},component:xxx}

App.vue

<keep-alive v-if="$route.meta.keep">

        <route-view/>

</keep-alive>

<route-view v-else/>

路由组件内部钩子函数
beforeRouteEnter(to,from,next){}

路由进入前(函数不能用this)

beforeRouteUpdate(to,from,next){}

路由更新前(/produce/123)=>(/produce/789)

beforeRouteLeave(to,from,next){}

路由离开前(还差一点就能获取。。。)

全局导航守卫构造函数
作用：权限管理，进入页面前操作(提前获取数据..)

判断to的meta是否需要鉴权，判断是否有token(是否登录)

有就next，没有就next("/login")

一定要有next被执行

1、beforeEach((to,from,next)=>{})

2、afterEeach((to,from)=>{})

路由独享守卫
{path:"",component:xx,beforeEnter:(to,from,next){}}

vuex
什么是vuex：
vuex是应用程序开发的状态管理模式，它采用 了集中式存储管理的应用的所有组件状态

什么时候用vuex
多个视图使用同一个状态：传参的方法对于多层嵌套的组件将会很麻烦，当你使用vuex这个状态会在你的项目任何地方都可以使用这个状态；

不同试图需要变同一个状态：采用父子组件或者通过事件来变更和同步状态的多份拷贝，通常会导致无法维护代码

使用vuex的注意事项
1、数据都是单项向的

2、组件能够调用actions

3、actions用来派发mutations

4、只有mutation可以改变状态

5、store是响应式的，无论state什么时候更新，组件都会同步更新

vuex与Storage的几个区别
1、从存储位置来说，vuex用的是内存，而Storage用的是文件存储；

2、从易失性来说，vuex与页面的生命周期相同(如关闭页面、刷新数据就会消失)，而localStorage是永久存储的，sessionStorage生存于应用会话期间；

3、从存储空间来看，vuex取决于内存和浏览器的限制，Storage都有个默认的大小(至少5MB,浏览器决定)，超出大小则需要用户同意增加空间；

4、从共享来看，vuex无法跨标签、跨物理页面共享、而Storage则可以在同一域名地下共享；

5、从用途来看，vuex是用于管理页面内容及组件的状态，而Storage主要是用于存储数据；

另外，缓存是应用级的概念，你可以根据需要，采用符合要求的存储来做缓存。因此，vuex也可以作为缓存来使用。同时，浏览器通常也会为应用提供缓存设施。现代浏览器都会提供几个类别的存储：

1、storage：包括LocalStorage、Session Storage、WebSQL、Cookies等；

2、其他文件缓存，如图片、请求等；

vuex中的五大函数的作用

1、state ： 统一定义公共数据(类似于data（）return)

2、mutations：使用它来修改数据

3、getters：类似于computed(计算属性，对现有的状态进行计算得到新的)

4、actions：发起异步请求

5、modules：模块拆分

vuex的工作流程
首先通过dispatch去提交一个actions，在actions接收到这个事件后，在actions中进行一些异步或同步操作，根据情况分发给不同的mutations，actions通过commit触发mutations，然后mutations去更新state，在state更新后，就会通知vue进行渲染。步骤如下

1、通过dispatch去提交一个actions

2、在actions接收到事件后，在actions中执行一些异步或者同步操作

3、根据不同的情况分发给不同的mutations，actions通过commit触发mutations

4、mutations在触发后就会去更新state

5、在state更新完毕后，就会通知vue进行渲染