3、vue 的调试工具

vue 2.x 调试工具：

vue 基础入门https://blog.csdn.net/ClearloveYt/article/details/131478972?spm=1001.2014.3001.5502#t0

 vite 的基本使用

1. 创建 vite 的项目

npm init vite-app 项目名称

> cd 项目名称
> npm install
> npm run dev

组件的基本使用

1. 组件的注册

1.1 注册组件的两种方式

•  被全局注册的组件，可以在全局任何一个组件内使用
•  被局部注册的组件，只能在当前注册的范围内使用

1.2 全局注册组件

app.component('注册标签'，导入组件名)

3. 组件的 props

props 是 组件的 自定义属性 ，组件的 使用者 可以通过 props 把数据传递到子组件内部 ，供子组件内部进行使 用

• props 的作用：父组件通过 props 向子组件传递要展示的数据。
• props 的好处：提高了组件的复用性。

 在组件中声明 props

在封装 vue 组件时，可以把 动态的数据项 声明为 props 自定义属性。自定义属性可以在当前组件的模板结构 中被直接使用。

动态绑定 props 的值

可以使用 v-bind 属性绑定 的形式，为组件动态绑定 props 的值

props 验证

使用 对象类型 的 props 节点，可以对每个 prop 进行 数据类型的校验

① 基础的类型检查

② 多个可能的类型

③ 必填项校验

④ 属性默认值

⑤ 自定义验证函数

如果某个 prop 属性值的 类型不唯一 ，此时可以通过数组的形式，为其指定多个可能的类型

可以通过 default 来 定义属性的默认值 
可以通过 type 来 定义属性的值类型 。
可以通过 required 选项，将属性设置为 必填项 ，强制用户必须传递属性的值

在封装组件时，可以为 prop 属性指定 自定义的验证函数 ，从而 对 prop 属性的值进行更加精确的控制 ：
 

4. Class 与 Style 绑定

在实际开发中经常会遇到 动态操作元素样式 的需求。因此，vue 允许开发者通过 v-bind 属性绑定指令，为元 素动态绑定 class 属性的值 和 行内的 style 样式 。

动态绑定 HTML 的 class

可以通过 三元表达式 ， 动态的为元素绑定 class 的类名

以 数组语法 绑定 HTML 的 class

如果元素需要动态 绑定多个 class 的类名，此时可以使用 数组的语法格式

以 对象语法 绑定 HTML 的 class

使用 数组语法 动态绑定 class 会导致 模板结构臃肿 的问题

以 对象语法 绑定内联的 style

:style 的 对象语法 十分直观——看着非常像 CSS，但其实是一个 JavaScript 对象

5、计算属性

计算属性 本质上 就是一个 function 函数 ，它可以 实时监听 data 中数据的变化，并 return 一个计算后的新值 ，供组件渲染 DOM 时使用。

计算属性需要以 function 函数 的形式声明到组件的 computed 选项 中

① 计算属性 必须定义在 computed 节点中

② 计算属性 必须是一个 function 函数

③ 计算属性 必须有返回值

④ 计算属性 必须当做普通属性使用

计算属性 vs 方法

相对于方法来说， 计算属性会缓存计算的结果 ，只有计算属性的 依赖项发生变化 时，才会 重新进行运算 。

6、自定义事件

在封装组件时，为了让组件的使用者可以监听到组件内状态的变化，此时需要用到组件的自定义事件。

自定义事件的 3 个使用步骤

在封装组件时：

• ① 声明自定义事件
• ② 触发自定义事件

在使用组件时：

• ③ 监听自定义事件

开发者为自定义组件封装的自定义事件，必须事先在 emits 节点中声明

 

在 emits 节点下声明的自定义事件，可以通过 this.$emit('自定义事件的名称') 方法进行触发

 

在使用自定义的组件时，可以通过 v-on 的形式 监听自定义事件

自定义事件 传参

在调用 this.$emit() 方法触发自定义事件时，可以通过 第 2 个参数 为自定义事件传参

7、组件上的 v-model

v-model 是双向数据绑定指令，当 需要维护组件内外数据的同步 时，可以在组件上使用 v-model 指令

父向子同步数据

① 父组件通过 v-bind: 属性绑定的形式，把数据传递给子组件

<MyComponent :num="count"></MyComponent>

② 子组件中，通过 props 接收父组件传递过来的数据

props :['num']

子向父同步数据

① 在 v-bind: 指令之前添加 v-model 指令

父组件中
<MyComponent v-model:num="count">

② 在子组件中声明 emits 自定义事件，格式为 update: xxx

 
emits: ['update:num'],

③ 调用 $emit() 触发自定义事件，更新父组件中的数据

子组件中
methods : {
add(){
this.$emit( 'update:num',this.num + 1)
}
}

组件高级 (上)

1、watch 侦听器

watch 侦听器 允许开发者监视数据的变化，从而 针对数据的变化做特定的操作 。

基本语法

开发者需要 在 watch 节点 下，定义自己的侦听器。

// 所有的侦听器，都应该被定义到 watch 节点下
      watch: {
        // 侦听器本质上是一个函数，要监视哪个数据的变化，就把数据名作为方法名即可
        // 新值在前，旧值在后
        username(newVal,oldVal) {
         console.log(neVal,oldVal)
         
        }

immediate 选项

默认情况下，组件在初次加载完毕后不会调用 watch 侦听器。如果想让 watch 侦听器 立即被调用 ，则需要使 用 immediate 选项  true

deep 选项

当 watch 侦听的是一个对象 ，如果 对象中的属性值发生了变化 ，则 无法被监听到 。此时需要使用 deep 选项

如果 只想监听对象中单个属性的变化 ，

// 如果要侦听的是对象的子属性的变化，则必须包裹一层单引号
        'info.username'(newVal) {
          console.log(newVal)
        }

计算属性 vs 侦听器

计算属性和侦听器 侧重的应用场景不同 ：

计算属性侧重于监听 多个值 的变化，最终计算并 返回一个新值

侦听器侧重于监听 单个数据 的变化，最终 执行特定的业务处理，不需要有任何返回值

2、组件的生命周期

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

vue 框架 为组件 内置了 不同时刻的 生命周期函数 ，生命周期函数会 伴随着 组件的运行而 自动调用 。例如：

① 当组件 在内存中被创建完毕 之后，会自动调用 created 函数

② 当组件被成功的 渲染到页面上 之后，会自动调用 mounted 函数

③ 当组件 被销毁完毕 之后，会自动调用 unmounted 函数

监听 组件的 更新

当组件的 data 数据更新 之后，vue 会 自动重新渲染组件 的 DOM 结构，从而保证 View 视图 展示的数据和 Model 数据源 保持一致。

当组件被 重新渲染完毕 之后，会自动调用 updated 生命周期函数。

 

完整的 生命周期图示

可以参考 vue 官方文档给出的“ 生命周期图示 ”，进一步理解组件生命周期执行的过程：

https://www.vue3js.cn/docs/zh/guide/instance.html#生命周期图示

3、组件之间的数据共享

1. 组件之间的关系

在项目开发中，组件之间的关系分为如下 3 种：

① 父子关系

② 兄弟关系

③ 后代关系

2. 父子组件之间的数据共享

父子组件之间的数据共享又分为：

① 父 -> 子 共享数据

• 父组件通过 v-bind 属性绑定向子组件共享数据。同时，子组件需要使用 props 接收数据。

② 子 -> 父 共享数据

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

③ 父 <-> 子 双向数据同步

• 父组件在使用子组件期间，可以使用 v-model 指令维护组件内外数据的双向同步：

3. 兄弟组件之间的数据共享

兄弟组件之间 实现数据共享的方案是 EventBus 。可以借助于第三方的包 mitt 来创建 eventBus 对象 ，从而实 现兄弟组件之间的数据共享。

1、在项目中运行如下的命令，安装 mitt 依赖包：

npm i mitt@2.1.0 -S

2、在项目中创建公共的 eventBus 模块 如下：

import mitt from 'mitt'

const bus = mitt()

export default bus

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

import bus from './eventBus.js'

data(){return {}count : 0 }
cerated(){
   bus.on('countChange',(count) =>{
   this.num = count
})
}

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

import bus from './eventBus.js'

data(){return {}count : 0 }

methods: {
   add(){
this.count++ 
bus.emit('countChange' ,this.count)
}
}

4. 后代关系组件之间的数据共享

后代关系组件之间共享数据，指的是 父节点的组件 向其 子孙组件 共享数据。此时组件之间的嵌套关系比较复杂， 可以使用 provide 和 inject 实现后代关系组件之间的数据共享

父节点的组件可以通过 provide 方法 ，对其 子孙组件 共享数据：

data() {return {color: 'red' } },
provide(){ return{color : this.color } }

子孙节点可以使用 inject 数组，接收父级节点向下共享的数据

inject : ['color']

父节点使用 provide 向下共享数据时，可以结合 computed 函数 向下共享 响应式的数据

// 从vue中按需导入 computed 函数
import { computed } from 'vue'
//使用computed 函数 把数据共享包装为响应式
provide(){ return{color : computed( () => this.color ) } }

如果父级节点共享的是 响应式的数据 ，则子孙节点必须以 .value 的形式进行使用

<h1>子孙组件  {{color.value}}</h1>

5. vuex

vuex 是 终极的 组件之间的数据共享方案。在企业级的 vue 项目开发中，vuex 可以让组件之间的数据共享变得 高 效 、 清晰 、且 易于维护 。

import axios from 'axios'


axios.defaults.baseURL = '请求根路径'

app.config.globalProperties.$http = axios

get请求：

  methods: {
    async getInfo() {
      const { data: res } = await this.$http.get('/api/get', {
        params: {
          name: 'ls',
          age: 20,
        },
      })

      console.log(res)
    },
  }

post请求：

methods: {
    async postInfo() {
      const { data: res } = await this.$http.post('/api/post', { name: 'zs', age: 20 })
      console.log(res)
    },
  }

组件高级 (下）

1、ref 引用

ref 用来辅助开发者在 不依赖于 jQuery 的情况下 ，获取 DOM 元素或组件的引用。
每个 vue 的组件实例上，都包含一个 $refs 对象 ，里面存储着对应的 DOM 元素或组件的引用。默认情况下，组件的 $refs 指向一个空对象 。

<template>
<button @click="showThis">打印 this</button> 
</template> 
export default {
 methods: {
 showThis() {
      // this 是当前 App 组件的实例对象
      console.log(this)
   }
}

使用 ref 引用 DOM 元素

<h1 ref="myh1">App 根组件</h1>   //加ref属性  起名字
    <button @click="showThis">打印 this</button>
export default {
 methods: {
 showThis() {
      // this 是当前 App 组件的实例对象
      console.log(this)
 this.$refs.myh1.style.color = 'red'  //这里的myh1与上面名称对应
  } 
}

使用 ref 引用组件实例

//子组件
 
<template>
  <div class="left-container">
    <h3>Left 组件 --- {{ count }}</h3>
    <button @click="count += 1">+1</button>
    <button @click="resetCount">重置</button>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      count: 0
    }
  },
  methods: {
    resetCount() {
      this.count = 0
    }
  }
}
</script>

/父组件中  使用ref属性  为组件添加引用名称

通过this.$refs.引用名称  可以引用组件的实力

<button @click="onReset">重置 Left 组件的 count 值为 0</button>
 
 
  <Left ref="comLeft"></Left>
 
  methods: {
onReset() {
      this.$refs.comLeft.resetCount()
      // this.$refs.comLeft.count = 0
    }
}

控制文本框和按钮的按需切换

通过布尔值 inputVisible 来控制组件中的文本框与按钮的按需切换
当文本框展示出来之后，如果希望它立即获得焦点，则可以为其添加 ref 引用，并调用原生 DOM 对象的 .focus() 方法  

组件的 $nextTick(cb) 方法，会把 cb 回调 推迟到下一个 DOM 更新周期之后执行 。通俗的理解是：等组件的 DOM 更新完成之后，再执行 cb 回调函数。从而能保证 cb 回调函数可以操作到最新的 DOM 元素。
 

 
    <input type="text" v-if="inputVisible" @blur="showButton" ref="iptRef" />
    <button v-else @click="showInput">展示输入框</button>
export default {
  data() {
    return {
      // 控制输入框和按钮的按需切换；
      // 默认值为 false，表示默认展示按钮，隐藏输入框
      inputVisible: false
    }
  },
 methods: {
    // 点击按钮，展示输入框
    showInput() {
      // 1. 切换布尔值，把文本框展示出来
      this.inputVisible = true
      // 2. 让展示出来的文本框，自动获取焦点 引用this.$nextTick(cb) 方法
      this.$nextTick(() => {
        this.$refs.iptRef.focus()
      })
    }，
showButton() {
      this.inputVisible = false
    }
}

2、动态组件

动态组件指的是 动态切换组件的显示与隐藏 

 <!-- 1. component 标签是 vue 内置的，作用：组件的占位符 -->
 <!-- 2. is 属性的值，表示要渲染的组件的名字 -->
 <!-- 3. is 属性的值，应该是组件在 components 节点下的注册名称 -->
 <button @click="comName = 'Left'">展示 Left</button>
 <button @click="comName = 'Right'">展示 Right</button>
<component :is="comName"></component> 
data() {
    return {
      // comName 表示要展示的组件的名字
      comName: 'Left'
    }
  },

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

组件中
<!-- 声明一个插槽区域 -->
    <!-- vue 官方规定：每一个 slot 插槽，都要有一个 name 名称 -->
    <!-- 如果省略了 slot 的 name 属性，则有一个默认名称叫做 default -->
<slot  name="default"></slot>

<Left>
 <!-- 默认情况下，在使用组件的时候，提供的内容都会被填充到名字为 default 的插槽之中 -->
        <!-- 1. 如果要把内容填充到指定名称的插槽中，需要使用 v-slot: 这个指令 -->
        <!-- 2. v-slot: 后面要跟上插槽的名字 -->
        <!-- 3. v-slot: 指令不能直接用在元素身上，必须用在 template 标签上 -->
        <!-- 4. template 这个标签，它是一个虚拟的标签，只起到包裹性质的作用，但是，不会被渲染为任何实质性的 html 元素 -->
        <!-- 5. v-slot: 指令的简写形式是 # -->

<template #default>
          <p>这是在 Left 组件的内容区域，声明的 p 标签</p>
        </template>
</Left>