万字血书Vue-Vue进阶

Vue进阶

生命周期

组件运行的过程

组件的生命周期是：组件从创建->运行（渲染）->销毁的整个过程   
    
    
   ，是一个时间段

如何监听组件的不同时刻

vue框架为组件内置了不同时刻的生命周期函数


     


     


     

，是他在关键时刻帮我们调用的一些特殊名称的函数 




 




 




，生命周期函数会伴随着组件的运行而自动调用    
    
    
。

created函数 组件在内存中被创建完毕 mounted函数 组件第一次被渲染到页面上 unmounted函数 组件被销毁完毕了（隐藏） updated函数 当组件被重新渲染完毕后会自动调用

当组件被重新渲染完毕后   

   

   

  ，会自动调用updated生命周期函数

组件中全部的生命周期函数

问：为什么不在beforeCreate中发ajax请求？

此阶段无法访问data

     

     

     
，请求到的数据无法挂载到data中供组件渲染去使用

完整的生命周期函数

Vue2.x

Vue3.x

组件化编程

模块：向外提供特定功能的Js程序
  




  




  




，一般是一个Js文件    


     


     


   。

组件：实现应用中局部功能代码和资源的代码集合




 




 




 

。

模块化：当应用中的Js都以模块化来编写  


  


  


 ，那这个应用就是一个模块化应用   

   

   

。

组件化：当应用中的功能都是多组件的方式来编写 
     
     
     ，那这个应用就是一个组件化的应用     

     

     

  。

单文件组件：一个文件中只有一个组件

vue单文件组件的构成

template 组件的模板结构（必须）

script 组件的js行为

style 组件的样式

template节点

规定：每个组件对应的模板结构

   




   




   




，都需要定义<template>节点中,是vue提供的容器标签 



 



 



，<template>只起到包裹性质的作用                 ，不会被渲染成真正的DOM元素




  




  




  
。

在<template>节点中支持指令语法

在vue2.x的版本中


    




    




    



，DOM结构仅支持单个根节点

在vue3.x的版本中














，DOM结构仅支持多个根节点

script节点

<script> export default{} //data数据和methods方法 </script>

name节点：为组件定义一个名称

data节点：vue组件渲染期间需要用到的数据（data需指向一个函数                 ，函数中再return对象）

methods节点：组件中的事件处理函数节点

style节点

style标签上的lang=‘css’属性是可选的


     



     



     


，它表示所使用的样式语言














，默认css   
    
    
   ，还有less和scss语法

组件的基本使用

1   
    
    
   、组件的命名

kebab-case命名法（短横线命名法）


     


     


     

、Camelcase命名法（大驼峰命名法）(后者可转化为短横线使用


     


     


     

，只能在脚手架中使用)

也可以将name属性作为注册后组件的名称 




 




 




，尽可能回避HTML已有的元素名称
  


  


  


。

2 




 




 




、组件的注册

组件之间可以相互的引用   

   

   

  ，但必须先注册后使用

全局和局部注册

被全局注册的组件可以在全局如何一个组件内使用

     

     

     
，被局部注册只能在当前注册范围内使用

.component（’ 名称‘
  




  




  




，组件名）方法全局注册

component：{键值对}局部注册

使用频率高的进行全局注册  


  


  


 ，使用频率低的局部注册

3   

   

   

  、组件之间的样式冲突问题

父组件的样式会影响子组件

根本原因：SPA中 
     
     
     ，所有组件的DOM结构

   




   




   




，都基于唯一的index.html页面进行呈现 



 



 



，每个组件的样式都会影响到整个index.html页面中的DOM元素

解决：

方法一：为每个组件分配唯一的自定义属性                 ，在编写组件样式时


    




    




    



，通过属性选择器来控制样式的作用域

<template> <div data-v-001> <h1 data-v-001> 这是App.vue组件</h1> <p data-v-001>这是App中的p标签</p> </div> </template> <script> </script> <style lang="less"> p[data-v-001]{ color: red; } </style>

方法二：vue为style节点提供了scoped属性














，从而防止组件之间的样式冲突问题

但如果给当前组件的style的节点添加了scoped属性                 ，则当前组件的样式对其子组件是不生效的


     



     



     


，如果想生效














，可以使用/deep/深度选择器,vue3.x中推荐 :deep()

/deep/.title{ } 等价于 [data-v-xxx].title 等价于 :deep(title){ }

4

     

     

     
、组件的props

封装vue组件时的基本原则：

组件的DOM结构
  




  




  




、Style样式尽量复用 组件中要展示的数据   
    
    
   ，尽量由使用者提供

为了方便使用者为组件提供要展示的数据


     


     


     

，vue提供了props的概念

什么是组件的props？props是组件的自定义属性 




 




 




，组件的使用者可以通过props把数据传递到子组件内部   

   

   

  ，供子组件内部使用

作用：父组件通过props向子组件传递要展示的数据

声明：在封装vue组件时

     

     

     
，可以把动态的数据项声明为props自定义属性

(无法使用未声明的props)

<template> <div data-v-001> <h1 data-v-001> 书名：{{title}}</h1> <p data-v-001>作者：{{author}}</p> </div> </template> <script> export default{ name:MyArticle, props:[title,author] } </script>

动态绑定props的值：可以使用v-bind属性绑定的形式
  




  




  




，为组件动态绑定props的值

props的大小写命名：如果使用camelCase声明props属性的名称  


  


  


 ，则可以使用：驼峰/短横线的形式为组件绑定属性的值

5  


  


  


 、Class和Style绑定

vue允许开发者通过v-bind属性绑定指令 
     
     
     ，为元素动态绑定class属性的值和行内的style样式

   




   




   




，来动态操作元素样式

动态绑定HTML的class：可以通过三元表达式 



 



 



，动态的为元素绑定class的类名 <template> <div> <h3 class="thin" :class="isItalic ? italic: ">MyStyle组件</h3> <button @click="isItalic=!isItalic">Toggle Italic</button> </div> </template> <script> export default{ name:MyArticle, data(){//防止一个组件被多次调用时                 ，存在数据的引用关系 return{ isItalic:true, } } } </script> <style lang="less"> .thin{ font-weight: 200; } .italic{ font-style: italic; } </style> 以数组语法绑定HTML的class

如果元素需要动态绑定多个class类名


    




    




    



，可以使用数组的语法格式

<h3 class="thin" :class="[isItalic ? italic: ,isDelate ? delate: ]">MyStyle组件</h3> 以对象语法绑定HTML的class

采用数组语法会导致模板结构臃肿














，故使用对象语法进行简化

<h3 class="thin" :class="classObj">MyStyle组件</h3> <script> export default{ name:MyArticle, data(){ return{ isItalic:true, classObj:{ isItalic:true, } } } } </script> 以对象语法绑定内联的style样式 <template> <div data-v-001> <div :style="{color:active,fontsize:fsize+px,background-color:bgcolor}"></div> //不写成驼峰就得用单引号包括                 ，表示是一个字符串的属性 <button @click="isItalic=!isItalic">Toggle Italic</button> </div> </template> <script> export default{ name:MyArticle, data(){ return{ isItalic:true, active:red, fsize:30, bgcolor:pink, } } } </script> VueComponent构造函数 组件本质是一个名为VueComponent的构造函数


     



     



     


，且不是程序员定义的














，由Vue.extend生成的     
     
     
 。 调用组件时   
    
    
   ，Vue解析时会帮我们创建组件的实例对象


     


     


     

，即帮我们执行：new VueComponent(options) 注意：每次调用Vue.extend 




 




 




，返回的都是一个个全新的VueComponent

关于this指向：

组件配置中：

data函数 
     
     
     、methods中的函数

   




   




   




、watch中的函数 



 



 



、computed中的函数   

   

   

  ，this均是【VueComponent实例对象（vc）】

new Vue()配置中：

data函数                 、methods中的函数


    




    




    



、watch中的函数














、computed中的函数

     

     

     
，this均是【Vue实例对象（vm）】

一个重要的内置关系：VueComponent.prototype.__proto__==Vue.prototype

让组件实例对象可以访问到Vue原型上的属性                 、方法 




   




   




   。

单页面应用程序（SPA）

一个Web网站中只有唯一的一个HTML页面（所有的功能与交互）

特点：仅在该web页面初始化时加载相应的资源
  




  




  




，不会因为用户操作来进行页面的重新加载或跳转

有点：良好的交互体验（不会出现白屏现象）

​ 良好的前后端工作分离模式（后端专注于提供API接口  


  


  


 ，前端专注于页面的渲染）

​ 减轻服务器的压力（服务器只提供数据 
     
     
     ，不负责页面合成和逻辑处理）

缺点：首屏加载慢（解决：路由懒加载


     



     



     


、代码压缩














、CDN加速   
    
    
   、网络传输压缩）

​ 不利于SEO（引擎优化） （解决：SSR服务器端渲染）

脚手架—快速创建SPA项目

1


     


     


     

、基于vite创建SPA项目

2 




 




 




、基于vue-cli创建SPA项目

vite的基本使用

1   

   

   

  、创建vite项目

npm init vite-app 项目名称 cd 项目名称 npm install npm run dev

2

     

     

     
、梳理项目的结构

3
  




  




  




、vite项目的运行流程

在工程化项目中

   




   




   




，vue要做的事情很单纯 



 



 



，通过main.js把App.vue渲染到index.html的指定区域中

App.vue用来编写待渲染的模板结构

index.html中需要预留一个el区域

main.js把App.vue渲染到index.html所预留的区域中

Vue-cli的基本使用

1  


  


  


 、创建cli项目

npm i -g @vue/cli vue create 项目名称 cd 项目名称 npm run serve

2 
     
     
     、查看具体的webpack配置

vue inspect > output.js

组件通讯

组件之间的数据共享的6种方案 组件之间的关系 父子关系 兄弟关系 后代关系 父子组件之间的数据共享

1

   




   




   




、父->子共享数据

父组件通过v-bind属性绑定向子组件共享数据

 



 



 



。同时                 ，子组件需要使用props接受数据

2 



 



 



、子->父共享数据

子组件通过自定义事件的方式向父组件共享数据


    




    




    



，emit传参

3                 、父<->子双向数据同步

使用v-model指令维护组件内外数据的双向同步

兄弟组件之间的数据共享

4


    




    




    



、兄<->弟共享数据

共享方案：EventBus














，可以借助第三方包mitt来创建eventBus对象

安装mitt依赖包 npm install mitt@2.1.0 创建公共的EventBus模块 import mitt from mitt //创建Eventbus的实例对象 const bus=mitt() //将Eventbus的是实例对象共享出去 export default bus 在数据接收方声明自定义事件

调用bus.on（事件名称                 ，事件处理函数）方法注册一个自定义事件

<script> import bus from eventBus.js export default{ data(){return { count 0}}, created(){ bus.on(,(count)=>{ this.count=count }) } } </script> 在数据发送方触发事件

调用bus.emit（事件名称


     



     



     


，要发送的数据）方法触发自定义事件

<script> import bus from eventBus.js export default{ data(){return { count 0}}, methods:{ add(){ this.count++ bus.on(,this.count) } } } </script> 后代组件之间的数据共享

5














、父<->子孙共享数据

指的是父节点组件向其子孙组件共享数据               。此时组件之间的嵌套关系比较复杂














，可以使用provide和inject实现后代关系组件之间的数据共享

父组件通过provide共享数据 <script> export default{ data(){return { count 0}}, provide(){ return { color:this.color } } } </script> 子孙组件通过inject接收数据 <script> export default{ data(){return { count 0}}, inject:[color], } </script> 父节点对外共享响应式数据（provide非响应式） <script> import {computed} from vue//从vue中导入computed函数 export default{ data(){return {color:red}}, provide(){ return { //使用computed函数   
    
    
   ，可以把要共享的数据包装为响应式数据 color:computed(()=>this.color) } } } </script> 子孙节点使用响应式数据

子孙节点必须使用.value的形式进行使用

6                 、Vuex全局数据共享

总结

ref引用

ref用来辅助开发者在不依赖jQuery的情况下


     


     


     

，获取DOM元素或组件的引用  




    




    




    。

每个vue组件实例上 




 




 




，都包含一个$refs对象   

   

   

  ，里面存储这对应DOM元素或组件的引用

     

     

     
，默认情况下
  




  




  




，组件里的$refs指向一个空对象

使用ref引用DOM元素 <h1 ref="myh111"> nihao</h1> <button @click="getRefs"> 获取“$refs   
    
    
   ”引用 </button> <script> export default { name:MyApp, methods:{ getRefs(){ this.$refs.myh111.style.color=red } } } </script> 使用ref引用组件 <h1 ref="myh111"> nihao</h1> <button @click="getRefs"> 获取“$refs


     


     


     

”引用 </button> <my-counter ref="countRef"></my-counter> <script> export default { name:MyApp, methods:{ getRefs(){ this.$refs.countRef.reset()//调用组件内的reset()方法 } } } </script>

控制文本框的按钮的按需切换（文本框自动获得焦点.focus()方法）

组件是异步执行DOM更新的

解决：this.$nextTick(cb) cb回调被延迟到DOM重新渲染完成之后执行  


  


  


 ，保证cd回调函数可以操作最新的DOM元素

<script> export default { name:MyApp, methods:{ getRefs(){ this.$nextTick(()=>{ this.$refs.ipt.focus() }) } } } </script>

mixin混入

在components编写mixin.js文件 
     
     
     ，可以把多个组件共用的配置提取成一个混入对象
















。

export const mixin={ methods:{ showNmae(){ alert(this.name) } } } //局部混入 <script> import {hunhe} from ../mixin export default { name:MyApp, data(){ return { name: } }, mixin:[hunhe], } </script> //全局混入 Vue.mixin(xxx)

动态组件

指的是动态切换组件的显示与隐藏               。vue提供了一个内置的

   




   




   




，专门来实现组件的动态渲染

实现动态组件渲染 <component :is="组件名称"></component> 使用keep-alive保持状态(缓存)

隐藏组件时会将组件在内存中销毁 



 



 



，不会保持最后的状态                 ，可以使用组价保持动态组件的状态

<keep-alive> <component :is="组件名称"></component> </keep-alive>

scoped样式

为什么会产生样式类名冲突？

Vue解析组件时


    




    




    



，会将所有的style合并














，当类名相同时会以后引入的样式为主   



     



     



    。

使用scoped解决css样式类名冲突问题                 ，但App组件不适用
















。

插槽

什么是插槽？

插槽（slot）是vue为组件封装者提供的能力    
    
    
。允许开发者在封装组件时


     



     



     


，把不确定的














，希望用户指定的部分定义为插槽   
    
    
   ，（为用户预留的内容的占位符）    


     


     


   。

在封装组件时


     


     


     

，可以通过<slot></slot>元素定义插槽 




 




 




，从而为用户预留内容占位符

没有预留插槽的自定义内容会被丢弃(Vue不知道将该DOM渲染到何处)

<--header组件!--> <template> <div> <slot></slot> </div> </template> <--引用!--> <header> <ul> <li></li> <li></li> </ul> <--将ul插入header组件!--> </header> 插槽的默认内容（后备内容）

可以为预留的<slot>插槽提供后备内容（默认内容）   

   

   

  ，如果使用者没有提供内容

     

     

     
，则后备内容将会生效

具名插槽

上述定义的是默认插槽
  




  




  




，如果在封装组件时需要预留多个插槽节点  


  


  


 ，则需要为每个<slot>插槽指定具体的name名称 
     
     
     ，这种带有具体名称的插槽叫做：具名插槽

<slot name=" "></slot> <slot ></slot> //默认名：default <--header组件!--> <template> <div> <slot name="center"></slot> <slot name="footer"></slot> </div> </template> <--引用!--> <header> <ul slot="center"> <li></li> <li></li> </ul> <a slot="footer"></a> </header> <--另一种写法!--> <header> <ul slot="center"> <li></li> <li></li> </ul> <template v-slot:header> <h1> 滕王阁序 </h1> </template> </header> <header> <ul slot="center"> <li></li> <li></li> </ul> <template #header> <h1> 滕王阁序 </h1> </template> </header> 作用域插槽

在封装组件的过程中

   




   




   




，可以为预留的<slot>插槽绑定props数据 



 



 



，使得子组件可以向引用传参（数据逆流）                 ，这种带有props数据的<slot>叫做：作用域插槽




 




 




 

。

<--header组件!--> <template> <div> <slot :games="games"></slot> </div> </template> ...... data(){ return{ games:[first,second,third] } } <header> <template scope="games"> <ul> <li></li> <li></li> </ul> <h1> 滕王阁序 </h1> </template> </header>

解构作用域插槽的prop

scope是一个对象


    




    




    



，那么能否直接使用对象的解构赋值呢？

<header> <template scope="{games}"> <ul> <li></li> <li></li> </ul> <h1> 滕王阁序 </h1> </template> </header> <header> <template slot-scope="{games}"> <ul> <li></li> <li></li> </ul> <h1> 滕王阁序 </h1> </template> </header>