Vue2.x(3)

目录

一、slot槽口/插槽

1.1、基本slot

1.2、具名槽口--带有名字的槽口

二、生命周期的钩子函数

2.1、什么是生命周期的钩子函数？

2.2、生命周期第一次执行那些？

2.3、生命周期几个阶段

2.4、第一次页面加载触发那些

2.5、dom在那个阶段渲染完毕？

2.6、说一下实例创建的流程与原理

三、mixin混入

3.1、全局混入---mixin

3.2、局部混入---mixins

四、ref

4.1、使用场景1--绑定到DOM元素身上

4.2、使用场景2--绑定到组件身上

五、$set

六、动态组件

七、keep-alive--保存组件的状态

7.1、使用

7.2、keep-alive 属性与钩子

八、$nexttick

8.1、使用场景

---

一、slot槽口/插槽

用来混合父组件与子组件自己的模板

slot其实就是让组件接受一个外部插入进来的dom元素 并且进行显示 通过slot就可以扩展组件的复用性

默认情况下 给组件的开关标签中写入dom页面不显示原因是因为 组件是一个完整地独立地个体 外部的内容默认插入不进来

1.1、基本slot

在组件中想接受外部插入的dom位置 直接写slot标签 即可接受外部的dom

<!-- 定义基本的插槽 -->
      <slot></slot>

1.2、具名槽口--带有名字的槽口

语法：在定义slot的时候 使用name属性起个名字

<template>
  <div>
      <!-- 定义具名槽口 -->
      <slot name="xiaoming"></slot>
      zizizizizizzizizi
      <slot name="xiaobai"></slot>
  </div>
</template>

在使用的时候使用slot属性 指定那个槽口

<Zicom>
          <h1 slot="xiaoming">你好么么哒1</h1>
          <h1>你好么么哒2</h1>
          <h1>你好么么哒3</h1>
          <h1>你好么么哒4</h1>
          <h1 slot="xiaobai">你好么么哒5</h1>
          <h1>你好么么哒6</h1>
 </Zicom>

二、生命周期的钩子函数

2.1、什么是生命周期的钩子函数？

vue实例从创建到销毁的过程中被自动执行的函数

2.2、生命周期第一次执行那些？

实例创建之前-----beforeCreate

实例创建之后-----created

模板渲染之前-----beforeMount

模板渲染之后-----mounted

2.3、生命周期几个阶段

4大阶段 8个钩子

2.4、第一次页面加载触发那些

实例创建前后 模板渲染前后

2.5、dom在那个阶段渲染完毕？

mounted

2.6、说一下实例创建的流程与原理

实例创建

实例创建之前-----beforeCreate 数据的观测与事件的初始化 属性的创建 还没有进行

实例创建之后-----created 在此时vue实例已经创建完毕 所以 数据的观测 属性 方法等内容都已经创建完毕（el属性还没有挂载）

模板渲染

模板渲染之前-----beforeMount 在页面挂载前调用的 所以在此阶段 页面还没有进行渲染与模板的编译 程序在此时会把数据绑定到页面上 但是页面并没有显示

模板渲染之后-----mounted 页面已经渲染出来了 html的内容会在dom中进行加载展示

可进行如下操作：

        开启定时器、发送网络请求、订阅消息、绑定自定义事件等初始化操作

数据更新

数据更新之前-----beforeUpdate 在此时数据会不停的在dom中进行修改

数据更新之后-----updated 把修改之后的dom内容已经在页面成功的展示了

实例销毁

实例销毁之前-----beforeDestory 此时vue实例还能用

可进行如下操作：

        关闭定时器、取消订阅消息、解绑自定义事件等初始化操作

实例销毁之后-----destoryed 什么都没有了 vue实例等内容都没了

三、mixin混入

就是vue组件中的一个封装技巧 。

他的作用就是对组件中重复出现的数据、方法、生命周期等内容进行封装，方便其他组件复用。 在组件中引用了混入内容之后， 就可以直接在当前组件中进行使用。

3.1、全局混入---mixin

全局混入 能不用尽量不要用 因为会造成全局的污染

1.新建一个文件夹 mixin 用来存储混入的代码

let demo={
    methods:{
        fun(){
            console.log("你好")
        }
    }
}
export default demo

2.main.JS中进行配置

// 全局混入
import demo from "./mixin/demo.js"
// 全局混入
Vue.mixin(demo)

3.2、局部混入---mixins

1.新建一个文件夹 mixin 用来存储混入的代码

2.在你想使用的组件中 引用 使用

<template>
  <div>
      <!-- 3.你就可以在组件内容任意的使用混入的内容 -->
      aaaaaaaa-- <button @click="fun()">点我--{{newnum}}</button>
  </div>
</template>

<script>
// 1.引用
import demo from "@/mixin/demo.js"
export default {
    // 2.使用mixins调用
    // 与data  methods同级使用
    mixins:[demo]
}
</script>

四、ref

ref就是对页面的dom进行操作

4.1、使用场景1--绑定到DOM元素身上

进行基本的页面dom操作。

1.在标签的dom之上使用ref=“随便起个名字”

2.this.$refs.你的那个名字即可找到指定元素

<template>
  <div>
    <!-- 1.绑定 -->
    <h1 ref="wangcai">找到我</h1>
  <button @click="fun()">点我修改上面的内容</button>
  </div>
</template>
<script>
export default {
  methods:{
    fun(){
      // 2.找到他
      this.$refs.wangcai.style.color="red";
    }
  }
}
</script>

4.2、使用场景2--绑定到组件身上

因为组件的核心就是自定义标签 上面的ref可以绑定到标签之上 我们的自定义标签能不能使用ref 如果可以使用那么得到的是什么？

可以得到绑定的那个组件所有的信息（得到了vue组件对象）

<template>
  <div>
    <h1>我是home</h1>
    <!-- 1.把ref绑定到组件身上 -->
    <Rc ref="com"/>
    <button @click="fun()">点我</button>
  </div>
</template>

<script>
import Rc from "@/components/refcom.vue"
export default {
  components:{
    Rc
  },
  methods:{
    fun(){
      // 2.把ref绑定到组件身上父组件就可以得到子组件的所有属性和方法
      console.log(this.$refs.com)
    }
  }
}
</script>

五、$set

在vue中 数据改变视图不变怎么解决？

在vue数据改变视图有的时候是不会更新的，

在vue2.0中 数据的双向绑定 是基于数据劫持与发布者订阅者模式的

其中数据劫持是通过Object.defineProperty()这个方法来拦截劫持data中的数据的 因为有了这个方法。所以数据改变试图也会更新，但是 Object.defineProperty()有个问题 他是会监听初始化的数据 如果中途给数组或者对象添加新属性的时候 Object.defineProperty() 就不会监听到 不会监听到就没有数据劫持 没有数据劫持就没有双向绑定 没有双向绑定就没有数据变、视图变

如果我就是想在程序运行的时候 给vue的data中对象或者数组添加新属性 并且让视图改变怎么办？

$set() 就是在程序运行的时候给对象或者数组添加新属性并且让视图改变

语法：

This.$set("你要给谁添加","你要添加的key","你要添加的val")

<template>
  <div>
      <h2>数据变试图不会改变</h2>
      <h3>{{obj.age}}</h3>
      <button @click="funb()">点我</button>
  </div>
</template>

<script>
export default {
    methods:{
        funb(){
            // this.obj.age=18
            // console.log(this.obj.age)
            this.$set(this.obj,"age",18)
        }
    },
    data(){
        return {
            obj:{
                name:"xixi"
            }
        }
    }
}
</script>

六、动态组件

多个组件 使用同一个挂载点 并且动态切换

1.需要有多个组件

2.设置挂载点

<component :is="你要显示组件的变量名"></component>
   <h1>动态组件</h1>
  <component :is="Com"></component>

3.动态切换 修改挂载点上绑定的变量即可

<template>
  <div>
      <h1>动态组件</h1>
      <button @click="fun('Da')">显示a</button>
      <button @click="fun('Db')">显示b</button>
      <button @click="fun('Dc')">显示c</button>
    <component :is="Com"></component>
  </div>
</template>

<script>
import Da from "@/components/demoa.vue"
import Db from "@/components/demob.vue"
import Dc from "@/components/democ.vue"
export default {
    methods:{
        fun(val){
            this.Com=val
        }
    },
    data(){
        return {
            Com:"Dc"
        }
    },
    components:{
        Da,Db,Dc
    }
}
</script>

七、keep-alive--保存组件的状态

在路由或者动态组件中 页面用户填写的数据可能会随着页面的切换 而丢失（原因是因为 在我们每次切换的时候 vue都会创建一个新的组件实例 ）

如果我就是想在切换的时候保存之前的页面内容呢？

keep-alive 用来保存组件切换的时候页面状态内容 使用keep-alive包裹的组件 不会随着页面的切换 而数据丢失 因为当前组件在切换的时候会被缓存起来 那么这样一来 在组件切换的时候能减低性能上的损耗

7.1、使用

动态组件

包裹挂载点即可

<keep-alive>
           <component :is="Com"></component>
</keep-alive>

路由

包裹路由出口即可

   <keep-alive>
      <router-view/>
    </keep-alive>

7.2、keep-alive 属性与钩子

属性

incloud 你要缓存谁

excloud 你不想缓存谁

如果 我把两个都写了 excloud的优先级大于incloude

   <keep-alive exclude="Db">
      <!-- 设置动态组件的挂载点 -->
      <component :is="com"></component>
    </keep-alive>

钩子函数

activated 在进入被kepp-alive管理的组件时候触发

deactivated 在离开被kepp-alive管理的组件时候触发

这两个钩子应该写在被keep-alive管理的组件中 与data等属性同级

<template>
  <div>
    aaaaaaaa
    <input type="text" />
  </div>
</template>
<script>
export default {
  activated() {
    console.log("进入到了被keep-alive管理的组件中了");
  },
  deactivated() {
    console.log("离开到了被keep-alive管理的组件中了");
  },
};
</script>

八、$nexttick

观察下面得代码

分析上面的代码发现：Vue 实现响应式并不是数据发生变化之后 DOM 立即变化，而是按一定的策略进行 DOM 的更新

简单来说，Vue 在修改数据后，视图不会立刻更新，而是等同一事件循环中的所有数据变化完成之后，再统一进行视图更新。

原理：

1.首先修改数据，这是同步任务。同一事件循环的所有的同步任务都在主线程上执行，形成一个执行栈，此时还未涉及DOM。

2.Vue开启一个异步队列，并缓冲在此事件循环中发生的所有数据变化。

3.同步任务执行完毕，开始执行异步队列的任务，更新DOM

8.1、使用场景

（1）created()进行的DOM操作，一定要放在vue.nextTick()的回调函数中

（2）v-if/v-show根据字段变化显隐，这个操作也应该放进去

为了在数据变化之后等待 Vue 完成更新 DOM 可以在数据变化之后立即使用Vue.nextTick(callback)。这样回调函数在 DOM 更新完成后就会调用。

在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。

<template>
  <div>
    <h1>nexttick</h1>
    <h1 ref="demoh">{{ text }}</h1>
  </div>
</template>

<script>
export default {
  created() {
    //   在这个实例创建完毕的钩子函数中  我如果想获取到h1里面的显示内容可以吗？
    // 但是我就是想获取怎么办？
    this.$nextTick(()=>{
        console.log(this.$refs.demoh.innerText)
    })
  },
  data() {
    return {
      text: "你好",
    };
  },
};
</script>