web学习笔记（六十）

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

javascript"><template><div><input type="text" v-model="search" /></div>
</template>
<script setup>
import { ref, watch } from "vue";
const search = ref("");
console.log(search);
watch(search, (newVal) => {console.log(newVal);
}, {immediate:true//首次允许执行watch,默认watch首次是不执行的。
});
</script>

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

Computed内部不允许操作dom以及异步任务请求，而watch可以。
他们两个都可以检测到响应式数据的变化，从动态计算结果。比如购物车总价，动态样式。
计算属性必选返回一个结果，而watch没有。
响应式数据变化，需要异步请求和操作dom的任务用watch。知识根据响应式数据的新值计算另一个新值（购物车总价，动态样式），用计算属性华人watch都可以完成。

3. vue3生命周期

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

创建阶段：

setup入口函数：主要作用就是初始化组件响应式数据以及方法；
onMounted():表示组件实例已经挂载到dom上了，页面已经完全展示出来了。此时表示组件创建阶段结束了。现在唯一的作用就是操作dom,就是页面一刷新或者是组件被卸载之后又从新创建了就要操作dom的场景。

更新阶段：

onBeforeUpdate():当响应式数据发生变化时，且没有更新dom之前执行的。(组件被卸载前执行，可以清空定时器、事件监听。)
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会造成两个问题：

列表项数据会渲染异常；选中态渲染错误；
影响渲染效率，造成不必要的dom操作；

此时设置唯一的key，就能解决以上两个问题。因为当循环列表“设置key”的时候，vue在更新dom的时候，不在按照列表项的顺序来比较dom,二十通过找相同的key值的元素进行新旧dom的对比。

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

当元素顺序不会发生变化的时候，比如只push数据，不动态插入数据。或者只渲染商品列表、直播列表，这种纯渲染的数据列表，可以使用所以作为key。当元素顺序发生改变，动态从某个索引位置新增数据时，此时不能用索引作为key。

7. 组件

在 Vue.js 中，组件是构建用户界面的基本单元。组件可以包含自己的模板、样式和逻辑，并且可以被嵌套和复用，使得代码结构更清晰、可维护性更好。组件又分为父组件和子组件。
通常在创建项目时我们会在src下创建一个componebts，然后将在页面中需要多次用到的组件单独拎出来编写一个.vue文件然后保存在该文件夹内，此处的文件作为子文件，然后再views文件夹中如果某个文件中用到了改子文件，那么这个文件就称为父文件。
父组件和子组件的关系：和标签嵌套关系一样，当前组件所在的上级就是父组件，形成父子组件。类似于父子标签的关系。每个父组件在使用子组件的时候，可能希望子组件展示到数据不同，所以，父组件可以给子组件传递数据，让子组件展示。父向子传值通过自定义prop实现；
公共组件：把重复使用的一段标签封装在componts目录下，供其他路由组件复用。这种组件叫公共组件：逻辑服用、样式复用、标签结构复用。

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

1.导入公共组件nav.vue

javascript">import Catenav from "@/components/nav.vue";

2. 如果使用了setup语法糖此时就可以直接在页面插入 <Catenav ></Catenav>标签，

反之，则需要在页面写入 components:函数

javascript"><script>
import Catenav from "@/components/nav.vue";
import { ref } from "vue";
export default {components: {// "cates_nav":CateNav,Catenav //注册的组件名称和组件实例名称保持一致时可以简写。},setup() {const count = ref(0);const setcount = () => {count.value++;};return {count,setcount};}
};
</script>

3.在<Catenav ></Catenav>标签内写入要从父页面传到子页面的数据，此时默认传递的数据都是字符串类型的，如果需要传递其他类型的数据（数字、数组、对象等）可以用v-bind进行数据绑定后再传递数据。

javascript">  <Catenavtitle="一级分类"name="nav组件":age="20":sex="true":arr="[10, 20, 30]":mycount="count"></Catenav>

4.在子组件中将父组件传过来的数据使用props进行接收，此时可以直接在页面使用{{}}来渲染数据，如果需要在js部分使用父组件传过来的数据，则需要在setup后面的括号内写入props再使用相关数据。

javascript"><script>
export default {setup(props) {console.log(props.name);},props: ["title", "name", "age", "sex", "arr", "mycount"] //子组件配置props属性，这个属性的只可以是数组，也可以是对象。它里面用来声明父组件需要传递数据的属性。//   子组件不允许修改父组件传过来的数据
};
</script>