web学习笔记（六十）

码农世界 2024-06-04 前端 102 次浏览 0个评论

1.watch监听器

2. 计算属性和watch的区别是什么？

3. vue3生命周期

4. 什么是虚拟dom?

5. 为什么在v-for循环时要绑定key？

6. 能否用V-for循环的索引做为key?

7. 组件

8. 如何使用公共组件来编写页面

1.watch监听器

在 Vue.js 中，watch 是一个用来监听数据变化并执行相应操作的功能。可以使用 watch 来监视特定的数据，当数据发生变化时执行一些逻辑。比如当输入框中内容发生改变时，在控制台实时输出对应的内容。
特点：watch监听响应式数据的变化，从而触发回调函数，可以在函数内部计算结果，发送给异步请求，操作dom等内容。
使用场景：实时搜索，购物车加个计算，计算动态样式。
当一条数据影响多条数据的时候就需要用watch。Deep(深度监听)，immediate用来判断首次是否执行。
watch是深度监听，任意内部属性的变化，都会触发watch
```
 
```
2. 计算属性和watch的区别是什么？
1. Computed内部不允许操作dom以及异步任务请求，而watch可以。
2. 他们两个都可以检测到响应式数据的变化，从动态计算结果。比如购物车总价，动态样式。
3. 计算属性必选返回一个结果，而watch没有。
4. 响应式数据变化，需要异步请求和操作dom的任务用watch。知识根据响应式数据的新值计算另一个新值（购物车总价，动态样式），用计算属性华人watch都可以完成。
3. vue3生命周期

生命周期:指的是一个组件实例对象，从创建、更新、销毁的整个周期。每一个组件，包括路由组件、公共组件，只要是组件就有生命周期，在vue3中生命周期分为创建阶段、更新阶段和卸载阶段。

创建阶段：
1. setup入口函数：主要作用就是初始化组件响应式数据以及方法；
2. onMounted():表示组件实例已经挂载到dom上了，页面已经完全展示出来了。此时表示组件创建阶段结束了。现在唯一的作用就是操作dom,就是页面一刷新或者是组件被卸载之后又从新创建了就要操作dom的场景。
更新阶段：
1. onBeforeUpdate():当响应式数据发生变化时，且没有更新dom之前执行的。(组件被卸载前执行，可以清空定时器、事件监听。)
2. onUpdated():当响应式数据发生变化，且更行dom之后执行的。向获取数据更新后最新的dom可以在这儿获取。
卸载阶段：
- 当一个组件小时的时候，vue会将这个组件被卸掉，就是删除dom内容。v-if/v-show为dalse时，dom被删除了，其实就是组件被卸载了。
- 当切换路由的时候，有一个路由组件消失就是被卸载了，有一个组件被加载了，就是被创建了。onUnmounted()用于在组件实例被卸载（销毁）时执行清理逻辑，此时组件卸载完成。
  4. 什么是虚拟dom?
  
  虚拟dom也是一个js对象，和原生dom一样，主要是为了减少dom操作而设计的。每次更新dom前都先进行新旧dom的对比，其实新旧dom的对比就是两个js对象的对比。这样对比过后vue只操作变化的dom，那么更新的dom的效率就更高了。
  
  5. 为什么在v-for循环时要绑定key？
  
  当循环列表“没有设置key”的时候，vue再更新dom的时候，会讲新增dom按照列表项的顺序进行对比，看数据是否发生变化。同位置的内容发生变化了，就更新dom。反之不更新。
  
  不设置key会造成两个问题：
  1. 列表项数据会渲染异常；选中态渲染错误；
  2. 影响渲染效率，造成不必要的dom操作；
  此时设置唯一的key，就能解决以上两个问题。因为当循环列表“设置key”的时候，vue在更新dom的时候，不在按照列表项的顺序来比较dom,二十通过找相同的key值的元素进行新旧dom的对比。
  
  6. 能否用V-for循环的索引做为key?
  
  当元素顺序不会发生变化的时候，比如只push数据，不动态插入数据。或者只渲染商品列表、直播列表，这种纯渲染的数据列表，可以使用所以作为key。当元素顺序发生改变，动态从某个索引位置新增数据时，此时不能用索引作为key。
  
  7. 组件
  - 在 Vue.js 中，组件是构建用户界面的基本单元。组件可以包含自己的模板、样式和逻辑，并且可以被嵌套和复用，使得代码结构更清晰、可维护性更好。组件又分为父组件和子组件。
  - 通常在创建项目时我们会在src下创建一个componebts，然后将在页面中需要多次用到的组件单独拎出来编写一个.vue文件然后保存在该文件夹内，此处的文件作为子文件，然后再views文件夹中如果某个文件中用到了改子文件，那么这个文件就称为父文件。
  - 父组件和子组件的关系：和标签嵌套关系一样，当前组件所在的上级就是父组件，形成父子组件。类似于父子标签的关系。每个父组件在使用子组件的时候，可能希望子组件展示到数据不同，所以，父组件可以给子组件传递数据，让子组件展示。父向子传值通过自定义prop实现；
  - 公共组件：把重复使用的一段标签封装在componts目录下，供其他路由组件复用。这种组件叫公共组件：逻辑服用、样式复用、标签结构复用。