vue学习 --- 第十一天 Composition API

目录：

1、computed函数使用

2、组件的生命周期函数

3、Provide/Inject使用

4、watch/watchEffect

5、自定义Hook练习

6、script setup语法糖

一、computed函数使用

注意：

（1）computed设置的变量也是具有响应式的，就是说想改变值的时候需要使用.value来改变值。 

 注意：

（1）过去我们是这样子获取元素的

（2）需要在setup里面获取元素，需要通过方法（注册了方法之后通过点击事件触发）或者ommounted时机来获取

 

（3）ref可以获取子组件，通过获取子组件可以调用子组件的函数

 

 

二、组件的生命周期函数

可以注册多个同样的生命周期钩子

三、Provide/Inject使用

 

如果是通过options api里面获取的数据需要在{{ }}模板里面加.value  

可以设置默认值inject：

四、watch/watchEffect

 

 

 

下面这个方法写法可以去掉代理获取普通的对象内容：

 

停止监听的名字可以不一定是stopWatch，可以是其他的任何名字。

五、自定义Hook练习

注意：

（1）自定义的hook函数怎么调用？或者

下面这个usetitle的作用是当我们跳转到其他组件里面的时候都可以改变浏览器页面的title名字同时这也是正常封装hooks函数的方法（这样子可以使你使用函数的时候给函数设置名字，在之后要重新输入参数的时候可以使用设置的名字.value来改变参数）：

 或者用这种写法（不好，但是容易理解）：

 

 

六、script setup语法糖

下图注意：

（1）在<script setup ></script>里面编写的内容都不用return什么的就可以在template里面使用

（2）在<script setup ></script>里面编写的函数、方法里面的变量什么的在template不能直接使用，作用域不同 

 

 下面这个是获取dom的，主要用于获取子组件，然后调用子组件script里面的函数、方法的：