vue

Vue

1.0

vue了解

Vue.js 是一个专注于构建用户界面的渐进式 JavaScript 框架，主要用于视图层的开发。以下是关于 Vue.js 视图层的几个核心特点：

1.声明式渲染

Vue 使用模板语法，允许你以声明式的方式将数据与 DOM 显示绑定。数据发生变化时，视图会自动更新。常见的绑定包括文本插值 {{}} 和指令，如 v-bind、v-if、v-for 等。

2.组件化

Vue 的一个重要特性是组件系统，视图可以被拆分成多个独立的、可复用的组件。每个组件都有自己的 HTML 模板、JavaScript 逻辑和 CSS 样式，从而实现视图的模块化开发。

3.响应式数据绑定

Vue 的核心是一个响应式系统，当数据对象中的属性发生变化时，Vue 能自动跟踪这些变化并触发视图的更新。你无需手动操作 DOM，Vue 会自动处理视图更新。

4.单文件组件 (SFC)

Vue 支持将模板、脚本和样式都写在 .vue 文件中，这种单文件组件形式提高了开发的可维护性。

5.指令系统

Vue 提供了一系列内置指令，用于操作 DOM，如 v-model 实现表单双向数据绑定，v-for 用于列表渲染，v-if 用于条件渲染等。

6.虚拟 DOM

Vue 使用虚拟 DOM 机制，在每次数据变化时，不会直接操作真实 DOM，而是更新一个轻量级的虚拟 DOM，最后通过最小化的操作将变化应用到实际 DOM，提升性能。

vue使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
   <script src="./vue3.js"></script>//引入vue3

</head>
<body>
    <div id="counter">
        <!--vue的语法，告诉vue，这个里面放了一个变量 -->
        <p>{{num}}</p>
        <p>{{uname}}</p>
    </div>
<script>
const Counter={
         //配置对象--数据会传入
            data:function(){
                return{
                    num:0,
                    uname:"张三"
                }
            },
        }

///.mount进行了数据绑定
///创建并挂载一个 Vue 应用，并通过控制台输出应用的实例对象
   let app=Vue.createApp(Counter).mount('#counter')
   console.log(app);
</script>

</body>

</html>

这一部分表示通过 Vue.createApp() 方法创建了一个新的 Vue 应用实例，并将 Counter 组件作为这个应用的根组件。Counter 通常是一个定义好的 Vue 组件对象，可能包括模板、数据和方法等。

mount() 方法的作用是将创建的 Vue 应用挂载到 DOM 中指定的元素上。在这个例子中，它会找到页面中 ID 为 #counter 的元素，并将 Vue 应用的内容渲染到这个元素中。页面中的 #counter 可能是这样的一个元素：

vite安装

1
2
3
4
$ npm create vue@latest
输入项目名字
是否安装一堆插件
生产完毕

目录导航

image-20241019154109301

index.html

1
2
3
4
5
6
7
<body>

    <div id="app"></div>
    <script type="module" src="/src/main.js"></script>
    //引入mainjs
 </body>

main.js

1
2
3
4
5
6

import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

创建vue示例*app.vue。绑定了app.vue

app.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
<script >

</script>

<template>
 
    
</template>

<style >

</style>

Dom介绍

前端页面的数据最终需要通过 DOM（文档对象模型，Document Object Model）来显示到网页上。DOM 是浏览器用来表示和操作 HTML 或 XML 文档的一种编程接口。前端开发中，无论是纯 HTML、JavaScript、Vue、React 还是其他前端框架，最终都是通过 DOM 来将数据呈现在网页上。

DOM 与数据的关系

  • HTML 定义结构：最初，页面的内容是通过 HTML 标记定义的静态 DOM 结构。

  • <div>
  <p>这是静态的文本</p>
</div>


    1
    2
    3
    4
    5
    6
    7
    8
    9
    10

    **JavaScript 操作 DOM**：通过 JavaScript，可以动态操作 DOM，改变页面中的内容，比如添加、删除或修改元素。这种操作是手动的。

    ```java
    <div id="app"></div>
    <script>
      const data = 'Hello, World!';
      document.getElementById('app').innerText = data;
    </script>

    

**Vue/React 等框架的虚拟 DOM**：现代前端框架如 Vue 和 React 引入了虚拟 DOM（Virtual DOM）的概念，这是一种抽象层，框架首先在虚拟 DOM 中更新数据，最后将必要的变化应用到真实 DOM 中。这样做大大提高了性能。


    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    <div id="app">
      <p>{{ message }}</p>
    </div>

    <script>
      const app = Vue.createApp({
        data() {
          return {
            message: 'Hello Vue!'
          }
        }
      }).mount('#app')
    </script>

声明式渲染

声明式渲染的核心在于数据的响应式特性。在Vue.js中，响应式系统确保当数据变化时，视图（DOM）会自动更新以反映这些变化。这种机制使得开发者可以专注于数据本身，而不是数据如何影响DOM。Vue 将根据数据的变化自动更新视图

dom监测数据变化-更新视图-vue实现了这个自动的过程

1.数据驱动

Vue 的核心理念是数据驱动的视图更新。你只需定义数据，并在模板中使用该数据，Vue 会自动将数据绑定到视图中。例如：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<template>
 <div>
<p>{{ num }}</p>
<p>{{ uname }}</p>
 </div>
    
</template>

它将数据对象中的 `message` 自动渲染在 DOM 元素中。当 `message` 的值改变时，Vue 会自动更新页面中的文本内容，而无需手动修改 DOM。


<script >
///数据导出-进行绑定
export default{
data()
{
  return{
    num:0,
    uname:"张三"
  }
}

}
</script>

image-20241019161001285

2.双向绑定

Vue 提供了双向数据绑定，通过 v-model 指令可以将输入的值直接与数据绑定。当用户在输入框中输入内容时，数据会自动更新，视图也会相应变化：–将数据与dom绑定了

1
2
<input v-model="message"> 
<p>{{ message }}</p>
3.指令与模板语法

Vue 的声明式渲染还包含一系列常用的指令，比如：

  • v-bind: 动态绑定属性。
  • v-if / v-show: 条件渲染。
  • v-for: 列表渲染。
  • v-on: 事件绑定。

这些指令允许开发者通过数据来控制 DOM 的显示和行为。

声明式渲染实现

Vue 的声明式渲染基于其响应式系统与虚拟 DOM，它通过跟踪数据变化来自动更新视图

1.响应式系统

Vue 创建了一个响应式数据模型，通过 Object.defineProperty（Vue 2）或 Proxy（Vue 3）实现对数据的劫持。每当数据发生变化时，Vue 能够检测到这个变化，并自动触发视图更新。

Vue 会为每个数据属性创建依赖追踪机制，当数据改变时当数据（如 message）发生变化时，Vue 记录这个变化，并将其标记为“需要更新”

2.模板编译

Vue 将模板编译为一个渲染函数，这个函数可以动态生成虚拟 DOM。它根据数据创建一个抽象的虚拟 DOM 树，而不是直接修改实际的 DOM。

3.虚拟dom

当数据变化时，Vue 会通过重新执行渲染函数生成新的虚拟 DOM 树，并与旧的虚拟 DOM 树进行比较（Diff 算法）。这个过程确保了 Vue 只更新必要的 DOM 节点，而不是重新渲染整个页面，极大地提高了性能。

4.dom更新

最后，Vue 会将虚拟 DOM 的变化应用到真实的 DOM 中。通过最小化的 DOM 操作（只更新变化部分），Vue 能够在性能和开发效率之间找到平衡。

5.自动更新视图

最终，用户在浏览器中看到的视图就会自动根据数据的变化进行更新，开发者不需要手动操作 DOM。

模板语法

Vue 的模板语法是一种声明式的 HTML 扩展，它允许你将数据绑定到 DOM 结构中。通过 Vue 的模板语法，你可以轻松地将数据、属性、事件等与 HTML 模板绑定，完成动态更新。

1.插值
文本插值

最常见的用法是将 JavaScript 表达式的值插入到 HTML 中。

1
2
<p>{{ message }}</p>

绑定 HTML

可以使用 v-html 指令将 HTML 内容插入到元素中。

1
2
<div v-html="rawHtml"></div>

如果 rawHtml 是 '<span>Bold</span>'，那么页面会显示 Bold 作为内嵌 HTML，而不仅仅是普通文本。

2.指令

指令是带有 v- 前缀的特殊属性，用来动态地绑定 DOM 的功能。

1.条件渲染

条件渲染（v-if、v-else-if、v-else）

根据条件动态渲染元素。

1
2
<p v-if="seen">现在你看到我了</p>

当 seen 为 true 时，<p> 标签会显示，否则不会显示。

2.循环渲染

循环遍历一个数组或者对象并渲染出相应的 DOM 结构。

1
2
3
4
<ul>
  <li v-for="item in items" :key="item.id">{{ item.text }}</li>
</ul>

在这个例子中，items 是一个数组，item.text 被插值显示在列表项中。

3.事件监听

v-on 用于监听 DOM 事件，并在事件触发时执行 JavaScript 代码。

1
2
<button v-on:click="doSomething">点击我</button>

简写形式：@click="doSomething"。

4.双向数据绑定

v-model 实现了表单元素的双向数据绑定，它会自动同步用户输入与 JavaScript 数据。

1
2
3
<input v-model="message">
<p>{{ message }}</p>

当用户在输入框中输入时，message 的值会自动更新，并实时反映在 <p> 中。

3.属性绑定

v-bind 用于动态地绑定 HTML 属性。它可以让你根据数据动态更改属性值。

1
2
<img v-bind:src="imageSrc">

简写形式：:src="imageSrc"。如果 imageSrc 是图片的 URL，它会被绑定到 <img> 标签的 src 属性。

4.计算属性

当模板中的表达式过于复杂时，可以使用计算属性来简化。

1
2
<p>{{ reversedMessage }}</p>

1
2
3
4
5
6
computed: {
  reversedMessage() {
    return this.message.split('').reverse().join('')
  }
}

计算属性会基于其依赖进行缓存，只有依赖的数据变化时，才会重新计算。

5.侦听器

vue 通过 watch 选项提供了一个更通用的方法，来响应数据的变化。 更适合异步操作

1.监听普通变化数据
1
2
3
4
5
6
7
8
watch:{
  //监听数据变化
  message:function(newValue,oldValue)
  {
    console.log(newValue);
    console.log(oldValue);
  }
}
1
2
3
4
5
6
message: {
   immediate: true, //初始化的时候调用函数
   handler: function (newValue) {
     console.log(newValue);
   },
 },
2.对象监听

深度监听

1
2
3
4
5
6
7
8
  user:{
    deep:true,
    handler:function(newValue){
            console.log(newValue);
     },
//深度遍历根值-给每个值上侦听器

  },
1
2
3
4
5
6
7
8
//单个侦听器
"user.name":{
  deep:true,
  handler:function(newValue)
  {
    console.log(newValue);
  }
}

6.事件修饰符

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!-- .stop 阻止事件冒泡 -->
   <div @click="divClick">
     <button @click.stop="btnClick">按钮</button>
   </div>
    //默认点击会直接调用两个函数-但是阻止后只会执行btnClick
   <!-- .prevent 阻止默认行为 -->
   <form action="">
     <input type="submit" value="提交" @click.prevent="submitClick">
   </form>
    //修改表单提交后的代码
   <!-- .once 只触发一次回调-->
   <button @click.once="onceClick">只触发一次once</button>
    //防止多次点击
   <!-- .{keyCode（键盘编码） | keyAlias （键盘的简写）}监听键盘的某个键帽 -->
   <input type="text" @keyup.enter="keyUp">
    //回车提交

7.Data

data 是一个组件选项，用于定义组件实例的初始数据。 它返回一个对象-这个对象有内部数据

作用 1.存储组件数据2.方便数据响应式3.初始化数据

缩写

Vue 为常用的指令提供了缩写形式：

  • v-bind 缩写为 :
  • v-on 缩写为 @
1
2
3
<img :src="imageSrc">
<button @click="doSomething">点击我</button>

1
2
<button v-on:click="changeUname">更改名字2</button>
<button @click="changeUname">更改名字</button>

一些指令能够接收一个“参数”，在指令名称之后以冒号表示。

例子-:id=:”id”

id就是动态参数 

1
2
3
4
<p :id="id">v-binde绑定</p>
 id:"xxs"
// 语法糖 :=v-bind
 <p v-bind:id="id + 1">v-bind绑定</p>

例子

1.计算属性 监听器
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82


<script >
///数据导出-进行绑定
export default{
data()
{
  return{
    message: "helloWorld",
    user:{
      name: "张三",
        age: 18,
        sex: "男",
    }
  }
},
methods:{
  setmessage:function()
  {
    this.message="你以"
  }


},
computed:{
  reverseMsg:{
    //有set和get方法

    get: function (){
      return this.message.split("").reverse().join("");
    },
    set : function(){
   //在设置或者更改计算属性的时候调用
   console.log(newValue);//你好
        this.message=newValue
    }
  }


},
watch:{
  //监听数据变化
  message:function(newValue,oldValue)
  {

    console.log(newValue);
    console.log(oldValue);
  },
  user:{
    deep:true,
    handler:function(newValue){
            console.log(newValue);
     },
//深度遍历根值-给每个值上侦听器

  },
  //单个侦听器
  "user.name":{
    deep:true,
    handler:function(newValue)
    {
      console.log(newValue);
    }
  }


}
}
</script>

<template>
 <div>
<P>{{reverseMsg}}</P>
<button @click="setmessage">改变message</button>
 </div>
    
</template>

<style >

</style>

2.模板语法插值
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<script >
///数据导出-进行绑定
export default{
data()
{
  return{
    num:0,
    uname:"张三",
    msg: "<h2>标题</h2>",
    id:"1",
    dtcs:"id",
    mouseEvent:"click"
  }
},
methods:{
  changeUname:function()
  {
    this.uname="李四"
  }

}

}
</script>

<template>
 <div>
<p>{{ num }}</p>
<p>{{ uname }}</p>
<p  v-once>{{ uname }}</p>
<button @click="changeUname">更改名字</button>
<p v-html="msg"></p>
<p :id="id">v-binde绑定</p>
//语法糖
<button v-on:click="changeUname">更改名字2</button>
<p v-bind:id="id + 1">v-bind绑定</p>
<p :[dtcs]="id">动态参数</p>


<button @[mouseEvent]="changeUname"> 动态事件</button>
<button @click="mouseEvent='mouseover'">改变事件</button>
 </div>
    
</template>

<style >

</style>

2.0

组件

Vue.js 组件是构建用户界面的基本单元，它允许我们将应用程序分割为独立的、可复用的模块。每个组件本质上是一个具有特定功能的 Vue 实例，可以包含 HTML 模板、CSS 样式和 JavaScript 逻辑。通过这种方式，我们可以构建模块化、可维护的代码。

image-20241019202515650

例如一个页面-有导航-有侧边-我们只需要单独写组件-达到分模块开发

1.编写一个组件
1
2
3
4
5
<template>

<P>女孩</P>

</template>

使用组件–局部组件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
import WelcomeItem from './components/WelcomeItem.vue';
//导入组件

//2.注册组件
components:{
  WelcomeItem
}

///3.使用
<template>
 <div>
<h1>ww</h1>
<WelcomeItem></WelcomeItem>
 </div>

    
</template>


全局组件

1
2
3
4
Vue.component('MyComponent', {
  // 组件定义
})

2.组件父子关系探究

image-20241019203254583

1
2
3
4
5
6
7
8
9
10
///3.使用
<template>
 <div>
<h1>ww</h1>
<WelcomeItem></WelcomeItem>
 </div>

    
</template> 
//假设组件未APP.VUE

那么APP.VUE的子组件就是

3.父子组件通信探究
1.父传子

父组件

1
2
3
<WelcomeItem :message="msg"></WelcomeItem>
message 是 WelcomeItem 组件的一个 props 名称。
msg 是一个父组件中的数据属性，它的值会被动态地传递给 WelcomeItem 组件的 message props。

子组件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<template>
<P>女孩</P>
<h2>{{ messaget }}</h2>
</template>
<script>
 export default{
props:{//这里接受数据
    messaget:{
    typE:String,
  
    required:true
  }
  }
  //对象
}
</script>
2.props特性
1
2
3
4
5
6
props:{//这里接受数据
    messaget:{
    typE:String,//传递的数据类型
      default:"你好",
    required:true//是否未必传
  }

向下数据流–父传子数据-父数据改变数据会随之改变-

但如果在子数据内发生改变 数据不会具有响应性

ps：思考怎么写

传递数据 ->传递的是指针数据-父组件

子组件拿到数据-进行拷贝一份展示-同时监听真实的指针数据-如果更改就修改拷贝数据

3.子传父 emit

通过自定义事件向父组件传值

子组件传递数据

1
<button @click="sendMessage">发送数据</button>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

data(){
   return{
     msg:"xxw1w1s"
   }
 },
 methods:{

   sendMessage:function()
   {
     console.log(this.msg);
     this.$emit('inMeg',this.msg)//点击子组件的按钮-触发inMEg,传递参数
     ////$emit 是一个实例方法，用于在 Vue 实例上触发自定义事件。
   }
 }

–父组件中监听该事件

1
2
3
4
5
6
7
8
9
10
11
<WelcomeItem @inMeg="getme"></WelcomeItem>//监听事件
///////
methods:{
getme:function(value)
{
      this.msg=value
      console.log(value)

}

}
4.父组件拿取子组件数据 ref

props-是父传递给子-现在是主动拿 -

采取refs特性

注册组件-将组件的空间首地址or(指向空间首地址)保存下来给父组件留一份

父组件通过该地址访问数据

1
2
3
4
5
6
7
8
9
10
<template>
 <div>
//勾起引用-hello

<WelcomeItem ref="hello"></WelcomeItem>
//将子组件的地址引用拿到->编译器拿取
 </div>

    
</template>

数据访问

1
2
3
4
5
6
mounted()
{
  ///$refs是一个对象，其中包含了注册在组件上的所有引用。
  ///这些引用可以是子组件或者是具有ref特性的DOM元素。
  console.log(this.$refs.hello.msg);
}
子组件访问父组件和根组件

访问方式-子组件开辟-保持了父组件和根组件的指向

1
2
3
4
5
6
//对象
mounted()
{
  console.log(this.$parent.msg)
  console.log(this.$root)
}直接访问即可

组件跨级通信

1.跨级通信问题

image-20241019210620933

数据从-父组件-子组件

1.props传递

2.子组件一次访问嵌套下去

都浪费资源

跨级通信-不能嵌套传

解决方法1

父组件有一个provide选项来提供数据 子组件接收 inject

1.父组件提供数据 provide inject

1
2
3
4
5
6
7
8
9
10
11
12
13
mounted()
{
  ///$refs是一个对象，其中包含了注册在组件上的所有引用。
  ///这些引用可以是子组件或者是具有ref特性的DOM元素。
  console.log(this.$refs.hello.msg);
},
provide:{
messageqq:"wsum"
        
    }//提供数据


}

2.n子组件接受数据

1
2
3
4
5
6
7
8
9
10
11
12
<script>
export default{
    data()
    {
        return{
            message:"sumsumsum"
        }
    },
    inject:['messageqq']
 
}
</script>
2.data传递

–访问组件实例属性–要根据函数形式返回对象–返回对象传递给子组件

1
2
3
4
5
6
7
8
provide(){
  return{
    messageqq:this.msgto
  }
  
    }

}
3.传递响应式

provide-inject传递的数据非响应式-我们如何让他具有响应式呢

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
data()
{return {

  msgto:"我APP",
  obj:{
                message:"我是你"
            }
    }
    listq:[1,2,3,4]
},

provide(){
  return{
    obj:this.obj,//传递对象过去->指针传递
  }

        
    }


}

子组件

1
2
3
4
5
6
7
8
 inject:['obj','messa']
  <template>
<div>
<h1>{{obj.message}}</h1>
<h1>{{messa()}}</h1>
</div>

</template>

方法2.函数返回

父组件

1
2
3
4
5
6
7
8
9
10
provide(){

 return{
  messa:()=>this.msgto
 }


  }

}

子

1
2
3
 inject:['obj','messa']

<h1>{{messa()}}</h1>

插槽

多个页面共用一个组件-需要展示的各不相同-

就可以使用插槽

插槽（Slots）是一种允许组件的使用者传递内容到组件内部的机制。这使得组件在结构上更加灵活和可复用。插槽的主要作用是让组件可以接受任意外部传递的模板内容，而不局限于组件自身的模板定义。

插槽的使用
具名插槽

具名插槽可以让我们定义多个插槽，并根据名称向不同的插槽中插入不同的内容。

组件内附带插槽

1
2
3
4
5
6
7
8
<template>
<P>女孩</P>


<slot name="text">      <button>按钮text</button>        </slot>//备用插槽

<slot name="h2"> </slot>
</template>

插槽显示

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<template>
 <div>
//勾起引用-hello

<WelcomeItem ref="hello">
<template v-slot:text>  <h1>占领插槽</h1>   </template>
<template v-slot:h2>    <h1>h2插槽</h1>     </template>

</WelcomeItem>

 </div>

    
</template>
作用域插槽

作用域插槽允许子组件将数据传递给父组件，并由父组件决定如何渲染这些数据。这种模式特别适合需要高度自定义的组件，如列表或卡片等。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!-- 父组件 -->
<template>
  <ChildComponent>
    <template v-slot:default="slotProps">
      <p>User: {{ slotProps.user.name }}</p>
    </template>
  </ChildComponent>
</template>

<!-- 子组件 -->
<template>
  <div>
    <!-- 作用域插槽，子组件传递数据给父组件 -->
    <slot :user="user"></slot>
  </div>
</template>

<script>
export default {
  data() {
    return {
      user: { name: 'Alice' }
    }
  }
}
</script>

3.0

生命周期

自行配图-整个vue的特性围绕此展开
虚拟dom和dom的交换

image-20241020102751407Vue.js 组件的生命周期包括一系列的钩子函数，它们可以让我们在组件的不同阶段执行自定义的逻辑。这些生命周期钩子函数可以分为三大类：创建阶段、更新阶段和销毁阶段。
创建阶段

创建阶段

1
2
3
4
5
6
7
beforeCreate：
    在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。
    此时组件实例还未初始化完成，无法访问 data、methods、computed、watch 等数据和方法。

created：
    在实例创建完成后被立即调用。
    可以访问 data、methods、computed、watch 等数据和方法，但 DOM 元素尚未被挂载。

挂载阶段

1
2
3
4
5
6
beforeMount：
    在挂载开始之前被调用：相关的 render 函数首次被调用。

mounted：
    el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子函数。
    实例已经挂载到 DOM 上，可以执行 DOM 操作。

更新阶段

1
2
3
4
5
6
beforeUpdate：
    数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。

updated：
    由于数据更改导致的虚拟 DOM 重新渲染和打补丁后调用。
    可以执行依赖于 DOM 的操作，但大部分的 DOM 操作应该在 mounted 钩子中完成。

销毁阶段

1
2
3
4
5
beforeDestroy：
    实例销毁之前调用。在这一步，实例仍然完全可用。

destroyed：
    实例销毁后调用。该钩子被调用时，Vue 实例指示的所有东西都会解绑定，所有事件监听器会被移除，所有子实例也会被销毁。

激活与停用阶段

除了上述主要的生命周期钩子，Vue 还提供了激活 (activated) 和停用 (deactivated) 钩子，这些钩子是用于 Vue 实例在 keep-alive 组件中切换时调用的。

1
2
3
4
5
activated：
    被 keep-alive 缓存的组件激活时调用。

deactivated：
    被 keep-alive 缓存的组件停用时调用。

错误处理阶段

另外还有一个错误捕获钩子：

1
2
errorCaptured：
    当捕获一个来自子孙组件的错误时被调用

这些生命周期钩子函数提供了在组件生命周期不同阶段执行代码的能力，帮助我们管理组件的初始化、数据更新、销毁以及错误处理等情况。通过合理利用这些钩子，可以更好地控制和优化 Vue.js 应用的行为和性能。

使用示例

1
2
3
4
5
6
7
8
9
10
export default{
    beforeCreate()
    {

    },
    created()
    {
        
    }
}

组合式API

组合式 API（Composition API）是 Vue 3 中引入的一种新的代码组织方式，旨在替代 Vue 2 中的选项式 API（Options API）。它通过函数和钩子等形式，使得开发者可以更加灵活地组合和复用逻辑，尤其是在项目复杂度较高时，逻辑的拆分和复用变得更加清晰。

在组件被创建前创建-很多数据的访问只能通过挂载的方式

核心概念
1.setUP函数

setup 函数：组合式 API 的核心，组件创建时调用，在 setup 中定义响应式数据、计算属性、侦听器等逻辑。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
import { reactive, ref } from 'vue';

export default {
  setup() {
    const count = ref(0); // 响应式数据
    const state = reactive({ name: '组合式 API' }); // 响应式对象

    function increment() {
      count.value++;
    }

    return { count, state, increment }; // 公开这些数据和方法给模板使用
  },
};

2.响应式api

ref：用于定义基本类型的响应式变量。

reactive：用于定义对象类型的响应式数据。

computed：创建计算属性，基于现有响应式数据自动更新。

3.生命周期钩子

在 setup 中使用 onMounted、onUpdated、onUnmounted 等函数来处理组件的生命周期事件。

1
2
3
4
5
6
7
8
9
10
import { onMounted } from 'vue';

export default {
  setup() {
    onMounted(() => {
      console.log('组件已挂载');
    });
  },
};

4.自定义组合函数

可以将功能逻辑封装到独立的函数中，并在不同组件中复用。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
import { ref } from 'vue';

function useCounter() {
  const count = ref(0);
  const increment = () => {
    count.value++;
  };
  return { count, increment };
}

export default {
  setup() {
    const { count, increment } = useCounter();
    return { count, increment };
  },
};

5.watch使用

image-20241020104252644

-———
对象深度监听-上面无法获取到旧值

watcheffect
-——–

image-20241020104326723

收集函数体内监听的数据-创建完后执行回调watcheffect方法

监听区别

image-20241020104337713

6.computed

image-20241020104430727

只需要调用computed即可

特性一样

本地拿取-是对象-需要指定值
外部会自动解析

7.props探究

接收

image-20241020104627902

8.props context

props-context-

image-20241020104731622

context作用

1.拿到属性和id-
2.插槽
3.触发事件
子传父-事件触发

image-20241020105131325

父组件

image-20241020105241638

4.渲染换上

image-20241020105313336

h-渲染函数
其余数据丢失-div-+数据-替换contect内容

image-20241020105343253

替换

image-20241020105355304

9.setup property

image-20241020105507358

跨级通信解决

父-传子-多层级问题

image-20241020105541229

父组件

image-20241020105602164

子组件

image-20241020105621717

响应式-就需要ref传递-传递name-ref的对象引用 方便监听

10.set Up语法糖

自动导出

setup组合式语法糖
SFC语法模范

image-20241020105704880

image-20241020105716014

例子
无需注册–vue3

image-20241020105733803

内数据不需要自己导出

原因

image-20241020105756613

4.0

Vue-Router

1.了解路由

Vue-Router是官方路由 它与vue.js集成-让构建单体应用更加简单

可实现页面跳转
核心:改变url-不会整体刷新-部分地方刷新

路由本质上是一种路径（key）与处理逻辑（value）之间的映射。路径代表 URL 中的特定部分，而处理逻辑则决定了当用户访问该路径时应该执行的操作或显示的内容。

路由表是这种映射的集合，每个路由（路径）对应一种处理方式。无论是在前端还是后端，路由表的结构通常遵循类似的逻辑：

  • Key：路径（URL），例如 /home、/profile/:id，它表示用户在浏览器地址栏中访问的具体位置。
  • Value：当用户访问该路径时，应该执行的处理逻辑。在后端，这通常是一个函数（处理请求），而在前端，它通常是一个组件（渲染页面）。

指向-
路由表-映射表-一个路由就是映射关系
key-vaule
key-路径
vaule-函数或者组件
后端-function
component-组件 -前端内容

2.路由案例

1.安装

2.创建路由实例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
import { createRouter,createMemoryHistory, createWebHashHistory } from "vue-router";

import sumsum from "@/components/sumsum.vue";
import WelcomeItem from "@/components/WelcomeItem.vue";
//定义路由表
const routes=[
    {path:'/',component:home},
    {path:'about',component:About},
]
//创建路由实例
const router=createRouter(

    {
        history:createWebHashHistory(),//路由历史模式
        routes,//路由表

    }
)
export default router

3.路由表挂载

1
2
3
const app=createApp(App)
app.use(router)
app.mount('#app')

4.路由使用

1
2
3
4
5
6
7
8
9
10
<template>
 <div>

<RouterLink to="/">Go to home</RouterLink>
<RouterLink to="/about">go about</RouterLink>
<RouterView></RouterView>//路由出口
 </div>

    
</template>

使的不重新刷新页面也能获得数据

3.动态路由匹配

例子-ID不同显示的数据不同

lu.js

1
2
3
4
const routes=[
    {path:'/',component:sumsum},
    {path:'/about/:id',component:WelcomeItem},
]

app.vue

1
<RouterLink to="/about/123">go about</RouterLink>

数据拿取 :WelcomeItem

1
2
3
<div>
     <h1>{{this.$route.params.id}}</h1>
 </div>

setup周期拿

1
2
3
4
5
    <script setup>
    import { useRoute  } from 'vue-router';
console.log(useRoute().params.id)

</script>
4.404规则匹配

使用正则

1
2
{path:'/:path(.*)' ,component:NotFound},
:动态
5.路由正则

image-20241020111220037

-——
多参数

image-20241020111229197

-———
参数有无

image-20241020111252156

6.嵌套路由

image-20241020111315638

如图路径/aboute/sum展示

在路由出口后继续展示

1.main.js

1
2
3
4
5
6
7
8
9
10
11
{path:'/about/:id/',component:WelcomeItem
    ,children:[
        {
            path:'styleone',
            component:styleone
        },{
            path:'wo',
            component:styleTwo
        }
    ]
},

2.组件内

1
2
3
4
5
6
7
8
9
<template>
    <div>
        <h1>{{this.$route.params.id}}</h1>
    </div>
  
      <RouterLink to="/about/12/styleone">样式1</RouterLink>
      <RouterLink to="/about/12/wo">样式2</RouterLink>
      <RouterView></RouterView>
    </template>
7.命名视图 路由

1.命名路由

直接命名路由

1
{path:'/',name:'sy',component:sumsum},
1
<RouterLink :to="{name:'sy'}">Go to home</RouterLink>

2.命名试图

给对于的组件试图命名-来展示选择

一个页面展示多个路由-而不是嵌套展示

1
2
3
4
5
6
7

{path:'/gogogo' ,components:{

    default:styleone,
    styleTwo:styleTwo,
    sumsum:sumsum
}},
1
2
3
4
5
<RouterLink to="/gogogo">go mmm
</RouterLink>
<RouterView></RouterView>
<RouterView name="styleTwo"></RouterView>
<RouterView name="sumsum"></RouterView>

路由编程导航

1.push

routre-link很难进行逻辑

我们通过routre实例方法来进行

例如routre.push-该方法向history栈添加记录-用户可使用浏览器回退功能

1
<button @click="$router.push('/about/123')">about</button>

使用方式2

1
<button @click="goabout">about</button>
1
2
3
4
5
6
7
8
9
methods:{
  goabout:function()
  
  {
    //逻辑判断
    this.$router.push('/about/123')
  }

}

带参数方式

1
2
3
4
5
6
7
8
9
methods:{
  goabout:function()
  {
    this.$router.push({path:"/about",query:{id:'123'}})
  }

}

http://localhost:5173/#/about?id=123
2.go 前后跳
1
2
3
4
5
6
7
8
9
10
methods:{
  goabout:function()
  {
   this.$router.go(1)
  }

}

.back -go(-1)
.forword go(1)

数字为正向前跳转

为负向后跳转

必须保证栈中中有值

重定向路由

1
<RouterLink :to="{name:'sy'}">Go to home</RouterLink>

重定向路由-路径不会刷新-但是内容会更改属于内部操作

动态路由

1
2
3
4
5
6
7
8
9
//定义路由表
const routes=[
    {path:'/',name:'sy',
    
    redirect:(to)=>{
        console.log(to)
        return{path:"/about.to"}
    }
},

例如登录可以在不需要守卫的情况下写

路由别名

路由多路径

路径->映射的还是path页面

1
2
3
4
5
6
{path:'/gogogo' ,    alias:'/father',components:{

    default:styleone,
    styleTwo:styleTwo,
    sumsum:sumsum
}},

路由组件传参

1
2
3
4
5
6
7
8
9
10
11
12
13

<script>

export default{
  props:['id'],
  mounted()
{
  console.log(this.$router.params.id)
  console.log(this.id)
}
}

</script>
1
2
3
4
5
6
7
8
9
10
11
12
{path:'/about/:id/',component:WelcomeItem,
props:true//开启
    ,children:[
        {
            path:'styleone',
            component:styleone
        },{
            path:'wo',
            component:styleTwo
        }
    ]
}

也就是-拿到路径参数-会以id_传递给子组件-子组件有对应的就接收

2.组合式api使用

image-20241020112441902

image-20241020112446164

命名试图开启props

image-20241020112454784

不同历史模式

不同的历史模式

1.Hash模式

image-20241020112520315

不会向服务器发起请求

2.Html

image-20241020112537360

-—-
设置

image-20241020112545948

有#的区别

全局前置守卫

路由守卫
—-登录-验证-就需要守卫路由

image-20241020112638856

1.路由全局前置守卫
全局拦截器

image-20241020112658230

to -去 from-来字哪里
进入每个路由都要执行

参数next->拦截下个路径
next-导航守卫

next()-继续路由

———全局守卫

单独守卫

单独守卫

image-20241020112745683

组件内守卫

image-20241020112759086

生命周期钩子

image-20241020112808400

路由懒加载

image-20241020112849959

全部引入-消耗过大

当路由被访问才加载

——–静态导入改动态载入

image-20241020112917835

image-20241020112925215

image-20241020112931653

5.0

0.Vuex 认识

Vuex 是 Vue.js 的状态管理库，用于在 Vue 应用中集中管理多个组件共享的数据。它能有效地管理应用的全局状态，并提供统一的方式来更新和读取数据。

1.vuex 状态管理

data-中设置的参数-进行集中管理-数据管理仓库

例子-发送一次请求得到的数据 不长久变化-让所有人都能拿取

实现vuex

1.实现响应式

ref reactive-
对象中存储状态

2.app提供出去-别人也能使用 仓库

image-20241020215717314

app.vue导入

image-20241020215741919

拿取数据

image-20241020215751400

实现了数据共享-数据状态集中管理

2.请求发送

1.fetch

原生JS发送请求

image-20241020220053097

2.axios

自己查文档

原生的fe-的封装

image-20241020220127372

1.安装
2.引入
3.使用

image-20241020220134869

具体项目会创建请求栏

3.跨域解决

image-20241020220150604

image-20241020220202130

3.vue cli

Vue CLI 是 Vue.js 官方提供的脚手架工具，用于快速搭建 Vue.js 项目。它的主要特性包括：

Vue CLI 的强大之处在于其插件化系统。它内置了大量插件，可以通过命令行工具添加不同的功能，比如 Babel、TypeScript、PWA、ESLint、Vue Router 等。

Vue CLI 提供了一个开箱即用的开发环境，支持开发服务器、自动热更新、Lint 校验、单元测试等功能。开发者不需要手动配置 Webpack，只需要运行简单的命令即可启动开发。

1.安装

1.安装
2.创建项目

image-20241020220406061

配置保存
最后一个手动配置 *选中

image-20241020220412052

image-20241020220415545

Vuex

1.vuex认识

vuex 是专门为vue.j开发的状态管理模式

单向数据流 破坏问题

image-20241020220446670

状态管理

image-20241020220510206

2.vuex使用

1.安装

2.特性

image-20241020220637799

1.创建 vuex-核心仓库-state

image-20241020220653742

2.main使用仓库

image-20241020220712645

3.使用仓库

image-20241020220736583

3.mutation

唯一途径修改状态管理内数据
记录哪个组件改变数据

1.改变count

image-20241020220822042

2.外面改变需要执行mutation函数

image-20241020220947466

image-20241020221018726

这样根据devtools-知道谁更改了数据–

4.计算属性

1.添加计算属性

image-20241020221127828

计算属性特性
使用

image-20241020221156087

5.异步操作

image-20241020221228613

vuex
action-vuex异步操作

1.fetch

image-20241020221240034

派生触发=dispatch

image-20241020221515299

5.跨域解决

image-20241020221531442

image-20241020221535554

6.vue x-Module

使用单一状态管理，整个项目的状态管理过于复杂，我们以模块化为分割

image-20241020221646942

image-20241020221723175

案例

image-20241020221748228

使用需要定义

image-20241020223752704

包裹进入

使用

image-20241020223803046

7.子模块获取根模块数据

image-20241020223919232

image-20241020223935500

8.mapState

辅助函数

将信息给导出。就可以直接使用

image-20241020224020666

image-20241020224030486

8.对象展开运算符

image-20241020224049175

image-20241020224348866

image-20241020224354839

不需要引用方式

9.命名空间

image-20241020224411542

image-20241020224418492

访问方法

image-20241020224435701

400604430443dd5a23ae463ce3d0170d

5100a1a83cbb647b275745f92dd60e0d

命名空间。使程序更模块化
1.命名空间后的调用
2.命名空间后辅助函数导出的导出方法

Vue
vue
http://example.com/2024/10/19/前端/vue/Vue/
作者
John Doe
发布于
2024年10月19日
许可协议