Vue学习笔记（day3）

第一节—子组件访问父组件和根组件-$parent-$root

第二节—插槽的基本使用

1.首先要把插槽引入进来

可以使用双标签或者单标签引入比如说

<aaa><button></button></aaa>

<aaa/>

2.通过插槽分发内容

演示一下

首先占位

然后注册组件

最后分发

第三节—具名插槽的使用

1.在向具名插槽提供内容的时候，我们可以在一个<template>元素上使用v-slot指令，并以v-slot的参数的形式提供其名称

2.父级模板里的所有内容都是在父级作用域中编译的，子级模板里的所有内容都是在子作用域中编译的。

第四节—插槽备用内容和作用域插槽的使用

1.有时为一个插槽指定备用(也就是默认的)内容是很有用的，它只会在没有提供内容的时候被渲染，例如在一个<submit-button>组件中:

作用域插槽

有时让插槽内容能够访问子组件中才有的数据是很有用的。当一个组件被用来渲染一个项目数组时，这是一个常见的情况，我们希望能够自定义每个项目的渲染方式。

步骤1.首先要子传父，传过去如下图

再由父亲节点给他显示出来（接收一下）

作用域插槽的作用：父组件替换插槽的标签，但是数据由子组件提供

第五节—组件之间的跨级通信—provide和inject

1.步骤（祖宗给孙子数据）

首先，我们需要层层注册，注册的步骤是先在开头import,然后再在Components里面引入。

层层注册之后在祖宗的export default{}里面加上provide:{message:"HelloWorld"}(message只是一个变量名字),在孙子节点加上inject:['message'],要注意的是祖宗的provide:{message:"HelloWorld"},不可以写成provide:{message:this.message},否则会报错，如果要写this.message的形式，则要写成返回对象的形式provide(){return{message:this.message}}

2.provide/inject特点，其不是响应式的也就是说如果设置改变祖宗组件的信息，点击按钮之后祖宗组件的值改变了，但是因为其先前的值已经在之前传给孙子组件了，所以孙子组件的值不会改变。即provide/inject并不是响应式数据流，而是单向数据流。

3.下一个问题就显而易见了，我们要如何实现响应式数据传递呢？别急，往下看，在祖先的data里面要这样写:data(){return{obj:{message:"HelloWorld"}}},在provide里面要这样写provide(){return{obj:this.obj}}，在孙子组件中就要这样写inject:["obj"]

第六节—Vue生命周期

第一步

app = Vue.creatApp(options)创建一个对象

app.mount(el)将对象挂载

第二步

init

events&lifecycle

初始化事件和生命周期

第三步

执行beforeCreate

第四步

init

injections&reactivity

初始化响应式

第五步

created函数

第六步

判断有无template选项

如果有就把template选项编译成渲染函数

如果没有就把el的HTML编译成template

第七步

执行beforeMount

在虚拟DOM中渲染

第八步

将编译好的HTML替换掉el里面的属性的DOM对象

第九步

mounted函数，生成真实的DOM，并完成挂载

第十步

Mounted实时监听更新数据，若数据改变执行beforeUpdate，则虚拟DOM重新渲染修补，之后执行updated，之后页面就会展示出来。

第十一步

当app.unmounted()函数被执行时

再执行beforeUnmount表示在销毁之前执行的钩子函数

实例销毁之后执行unmount（）钩子函数

第七节—vue生命周期钩子函数的基本使用

第八节—vue3组合式API的初体验

组合式API作用：将同一个逻辑关注点代码收集在一起

已经知道了组合式API的作用，为了开始使用组合式API，我们首先需要一个可以实际使用它的地方。在Vue组件中，我们将此位置称为setup。

新的setup选项在组件被创建之前执行，一旦props被解析完成，它就将被作为组合式API的入口。

第九节—vue3组合式API在模板的使用

如果想要把setup之中的数据做成响应式的数据，那么就需要引入ref函数

（在vue3.0中，我们可以通过一个新的ref函数使任何响应式变量在任何地方起作用）

语法

import { ref } from 'vue'

const counter = ref(0)

ref为我们的值创建了一个响应式引用，在整个组合式API中会经常使用引用的概念。

第十节—vue3组合式API在setup中定义变量

引入reactive来引用对象

第十一节—setup中使用watch

1.watch响应式更改

就像我们在组件中使用watch选项并在user的property上设置侦听器一样，我们也可以使用从Vue导入的watch函数执行相同的操作，它接受3个参数

#一个想要侦听的响应式引用或getter函数

#一个回调

#可选的配置选项

2.watchEffect实现深度监听

watchEffect(回调函数)注意不需要指定监听的属性，

组件初始化的时候会执行一次回调函数，自动收集依赖

e.g.

watchEffect(()=>{

console.log(user.name);

})

watch和watchEffect的区别

watchEffect不需要指定监听的属性，自动收集依赖，只要在回调中引用了响应式的属性，只要这些属性发生改变，回调就会执行，watch只能侦听指定属性。

第十二节—在setup中使用computed

1.步骤

第一步：引入（import {computed} from 'vue'）

然后

第十三节—生命周期钩子函数在setup中的应用

第十四节—setup中参数props

props说白了就是儿子接受父亲们传来的值，代码如下

第二十五节—setup中的参数context

使用toRefs来实现响应式访问

setup中父组件通过$refs调用子组件

第二十六节—在setup中使用provide-inject

provide和inject就是父传子