备案控制台
开发者社区 开发与运维 文章 正文

Vue3 —— 常用 Composition API（一）（computed函数、watch函数、watchEffect函数、生命周期钩子）

2023-06-15 61
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： Vue3 —— 常用 Composition API（一）（computed函数、watch函数、watchEffect函数、生命周期钩子）

一、computed 函数

1. 计算属性 — 简写（不考虑计算属性被修改的情况）

  1. 在 setup 中定义 person 对象，通过 reactive 设置成响应式
  2. 给 person 添加计算属性，名为 fullName，返回全名
  <template>
    <div>
      <h3>一个人的信息</h3>
      姓：<input type="text" v-model="person.firstName" /><br />
      名：<input type="text" v-model="person.lastName" /><br />
      <span>全名：{{ person.fullName }}</span><br/>
    </div>
  </template>
  <script>
  import { reactive, computed } from "vue";
  export default {
    name: "Demo",
    setup() {
      // 数据
      let person = reactive({
        firstName: "张",
        lastName: "三",
      });
      // 计算属性——简写（没有考虑计算属性被修改的情况）
      person.fullName = computed(()=>{
        return person.firstName + '-' + person.lastName
      })
      // 返回一个对象
      return {
        person,
      };
    },
  };
  </script>

计算属性显示全名：

bf2b9510425944178c57ca79beb15374.png

2. 计算属性 — 完整写法（考虑计算属性被修改的情况）

  1. 动态修改 input 框，响应式变化
  2. 完整写法，要在计算属性内配置 get 和 set
  3. get 里面是返回值，set 里面给对应属性赋值
  <template>
    <div>
      <h3>一个人的信息</h3>
      姓：<input type="text" v-model="person.firstName" /><br />
      名：<input type="text" v-model="person.lastName" /><br />
      <span>全名：{{ person.fullName }}</span><br/>
      全名：<input type="text" v-model="person.fullName">
    </div>
  </template>
  <script>
  import { reactive, computed } from "vue";
  export default {
    name: "Demo",
    setup() {
      // 数据
      let person = reactive({
        firstName: "张",
        lastName: "三",
      });
      // 计算属性——完整写法（考虑读和写）
      person.fullName = computed({
        get(){
          return person.firstName + '-' + person.lastName
        },
        set(value){
          const nameArr = value.split('-')
          person.firstName = nameArr[0]
          person.lastName = nameArr[1]
        }
      })
      // 返回一个对象
      return {
        person,
      };
    },
  };
  </script>

效果如下：

e1b1763f605e4942aabbad2e6e3b8215.png

二、watch 函数

1. 监视 ref 所定义的一个响应式数据

  1. 第一个参数：监听的是谁
  2. 第二个参数：监视的回调
  3. 第三个参数：监视的配置 => 立即执行（页面一经加载就执行一次）
  <template>
    <div>
      <h3>当前求和为：{{ sum }}</h3>
      <button @click="sum++">点我+1</button>
    </div>
  </template>
  <script>
  import { ref, watch } from "vue";
  export default {
    name: "Demo",
    setup() {
      // 数据
      let sum = ref(0);
      // 情况一：监视ref所定义的一个响应式数据
      watch(sum, (newValue, oldValue) => {
        console.log("sum变了", newValue, oldValue);
      }, {immediate: true});
      // 返回一个对象
      return {
        sum,
      };
    },
  };
  </script>

监听 ref 所定义的一个响应式数据：

16682c9cfe044b4fa687cdf12cc7710b.png

2. 监视 ref 所定义的多个响应式数据

  1. 监视多个响应式数据：sum 和 msg
  2. sum 每次 +1，msg 每次多一个 !
  3. 监听多个数据：用 [] 括起来
  <template>
    <div>
      <h3>当前求和为：{{ sum }}</h3>
      <button @click="sum++">点我+1</button>
      <hr/>
      <h3>当前的信息为：{{ msg }}</h3>
      <button @click="msg+='!'">修改信息</button>
    </div>
  </template>
  <script>
  import { ref, watch } from "vue";
  export default {
    name: "Demo",
    setup() {
      // 数据
      let sum = ref(0);
      let msg = ref('你好啊')
      // 情况二：监视ref所定义的多个响应式数据
      watch([sum, msg], (newValue, oldValue)=>{
        console.log('sum或msg变了', newValue, oldValue);
      })
      // 返回一个对象
      return {
        sum,
        msg,
      };
    },
  };
  </script>

按钮分别点击两次：

c1248e02169b430190d2a7ba925c6a02.png

3. 监视 reactive 所定义一个响应式数据的全部数据

  1. 监视 reactive 定义的响应式数据时：oldValue 无法正确获取
  2. 监视 reactive 定义的响应式数据时：强制开启了深度监视（deep 配置失效）
  <template>
    <div>
      <h3>姓名：{{person.name}}</h3>
      <h3>年龄：{{person.age}}</h3>
      <button @click="person.name+='~'">修改姓名</button>
      <button @click="person.age++">增长年龄</button>
    </div>
  </template>
  <script>
  import { reactive, watch } from "vue";
  export default {
    name: "Demo",
    setup() {
      // 数据
      let person = reactive({
        name: '张三',
        age: 18,
      })
      /* 
        情况三：监视reactive所定义一个的响应式数据的全部数据
          1.注意：此处无法正确的获取oldValue
          2.注意：强制开启了深度监视（即deep配置无效）
      */
      watch(person, (newValue, oldValue)=>{
        console.log('person变化了', newValue, oldValue);
      }, {deep: true})
      // 返回一个对象
      return {
        person
      };
    },
  };
  </script>

都是显示的 newValue：

9611e0c082a541538121255d2226e775.png

4. 监视 reactive 所定义一个响应式数据中的某个属性

  1. 要写成函数的形式 () => person.age
  <template>
    <div>
      <h3>姓名：{{person.name}}</h3>
      <h3>年龄：{{person.age}}</h3>
      <button @click="person.name+='~'">修改姓名</button>
      <button @click="person.age++">增长年龄</button>
    </div>
  </template>
  <script>
  import { reactive, watch } from "vue";
  export default {
    name: "Demo",
    setup() {
      // 数据
      let person = reactive({
        name: '张三',
        age: 18,
      })
      // 情况四：监视reactive所定义一个响应式数据中的某个属性
      watch(() => person.age, (newValue, oldValue)=>{
        console.log('person的age变化了', newValue, oldValue);
      })
      // 返回一个对象
      return {
        person
      };
    },
  };
  </script>

某个属性：oldValue 可以获取：a5e23d169db546bdb9b767ba72a3b8c0.png


5. 监视 reactive 所定义一个的响应式数据中的某些属性

  1. 用 [] 包裹起来，写成数组的形式
  2. 多个属性分别用函数形式表示
  <template>
    <div>
      <h3>姓名：{{person.name}}</h3>
      <h3>年龄：{{person.age}}</h3>
      <button @click="person.name+='~'">修改姓名</button>
      <button @click="person.age++">增长年龄</button>
    </div>
  </template>
  <script>
  import { reactive, watch } from "vue";
  export default {
    name: "Demo",
    setup() {
      // 数据
      let person = reactive({
        name: '张三',
        age: 18,
      })
      // 情况五：监视reactive所定义一个的响应式数据中的某些属性
      watch([() => person.name, () => person.age], (newValue, oldValue) => {
        console.log('person的name或age变化了', newValue, oldValue);
      })
      // 返回一个对象
      return {
        person
      };
    },
  };
  </script>

依次点击修改姓名，增长年龄：

308dc7a7ed7c4da4a415685f7719c66a.png

6. 监视 reactive 定义的响应式数据中某个属性时：deep配置有效。

  1. 若设置 deep: false ，则控制台没有输出
  2. 监视 reactive 定义的响应式数据中某个属性时：deep配置有效。
  <template>
    <div>
      <h3>姓名：{{person.name}}</h3>
      <h3>年龄：{{person.age}}</h3>
      <h3>薪资：{{person.job.j1.salary}}K</h3>
      <button @click="person.name+='~'">修改姓名</button>
      <button @click="person.age++">增长年龄</button>
      <button @click="person.job.j1.salary++">增加薪资</button>
    </div>
  </template>
  <script>
  import { reactive, watch } from "vue";
  export default {
    name: "Demo",
    setup() {
      // 数据
      let person = reactive({
        name: '张三',
        age: 18,
        job: {
          j1:{
            salary: 20
          }
        }
      })
      // 特殊情况：监视reactive定义的响应式数据中某个属性时：deep配置有效。
      watch(() => person.job, (newValue, oldValue) => {
        console.log('person的job变化了', newValue, oldValue);
      }, {deep: false})
      // 返回一个对象
      return {
        person
      };
    },
  };
  </script>

开启深度监视：

ba8ebdda09ed496988eb3d1e4c8c1acf.png

三、watchEffect 函数

1. 对比 watch 和 watchEffect

  1. watch 的套路：既要指明监视的属性，也要指明监视的回调
  2. watchEffect 的套路：不用指明监视哪个属性，监视的回调中用到哪个属性，那就监视哪个属性

2. watchEffect 类似于 computed

  1. 但 computed 注重的计算出来的值（回调函数的返回值），所以必须要写返回值
  2. 而 watchEffect 更注重的是过程（回调函数的函数体），所以不用写返回值

当点击 点我+1 和 增加薪资 时会被监视：

  <template>
    <div>
      <h3>当前求和为：{{ sum }}</h3>
      <button @click="sum++">点我+1</button>
      <hr/>
      <h3>薪资：{{person.job.j1.salary}}K</h3>
      <button @click="person.job.j1.salary++">增加薪资</button>
    </div>
  </template>
  <script>
  import { ref, reactive, watchEffect } from "vue";
  export default {
    name: "Demo",
    setup() {
      // 数据
      let sum = ref(0);
      let person = reactive({
        job: {
          j1:{
            salary: 20
          }
        }
      })
      watchEffect(()=>{
        const x1 = sum.value
        const x2 = person.job.j1.salary
        console.log('watchEffect所指定的回调执行了', x1, x2);
      })
      // 返回一个对象
      return {
        sum,
        msg,
        person
      };
    },
  };
  </script>

第一个按钮点击一次，第二个按钮点击两次：

519588f1cc8e487a991f41e5f5c5d629.png

四、生命周期钩子

1. 官方图解


c3791a973d0541f18a0e8270958e53b3.png

2. 通过配置项的形式使用生命周期钩子

  1. setup 就是一个配置项，通过配置项的形式使用钩子
  2. 下面对生命周期钩子进行简单测试

App.vue

  <template>
    <div>
      <button @click="isShowDemo = !isShowDemo">切换隐藏/显示</button>
      <Demo v-if="isShowDemo" />
    </div>
  </template>
  <script>
  import { ref } from "vue";
  import Demo from "./components/Demo.vue";
  export default {
    name: "App",
    components: { Demo },
    setup() {
      let isShowDemo = ref(true);
      return { isShowDemo };
    },
  };
  </script>

Demo.vue

  <template>
    <div>
      <h3>当前求和为：{{ sum }}</h3>
      <button @click="sum++">点我+1</button>
    </div>
  </template>
  <script>
  import { ref } from "vue";
  export default {
    name: "Demo",
    setup() {
      // 数据
      let sum = ref(0);
      // 返回一个对象
      return { sum };
    },
    // 通过配置项的形式使用生命周期钩子
    beforeCreate(){
      console.log('---beforeCreate---');
    },
    created(){
      console.log('---created---');
    },
    beforeMount(){
      console.log('---beforeMount---');
    },
    mounted(){
      console.log('---mounted---');
    },
    beforeUpdate(){
      console.log('---beforeUpdate---');
    },
    updated(){
      console.log('---updated---');
    },
    beforeUnmount(){
      console.log('---beforeUnmount---');
    },
    unmounted(){
      console.log('---unmounted---');
    }
  };
  </script>

页面一加载：1df1c733720d40e48bc90da847c3e9af.png


点击求和：

c1bedc094da5463c94aae3f6d2a0ff39.png

点击切换/隐藏显示：

74a497c2993f41869a0149b729f14054.png

3. 通过组合式API的形式去使用生命周期钩子

  1. 把生命周期钩子写入 setup 配置项里面
  <template>
    <div>
      <h3>当前求和为：{{ sum }}</h3>
      <button @click="sum++">点我+1</button>
    </div>
  </template>
  <script>
  import { ref, onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted } from "vue";
  export default {
    name: "Demo",
    setup() {
      // 数据
      let sum = ref(0);
      // 通过组合式API的形式去使用生命周期钩子
      onBeforeMount(() => {
        console.log('---onBeforeMount---');
      })
      onMounted(() => {
        console.log('---onMounted---');
      })
      onBeforeUpdate(() => {
        console.log('---onBeforeUpdate---');
      })
      onUpdated(() => {
        console.log('---onUpdated---');
      })
      onBeforeUnmount(() => {
        console.log('---onBeforeUnmount---');
      })
      onUnmounted(() => {
        console.log('---onUnmounted---');
      })
      // 返回一个对象
      return { sum };
    },
  };
  </script>

不积跬步无以至千里 不积小流无以成江海

文章标签：
API
关键词：
API函数
API vue3
vue3 API
API composition
vue3 API函数
前端杂货铺
目录
相关文章
热爱嵌入式的小佳同学
|
1天前
|
API
Qt 窗口常用位置API函数 & 绘图原理 & 双缓冲机制 总结
Qt 窗口常用位置API函数 & 绘图原理 & 双缓冲机制 总结
热爱嵌入式的小佳同学
12 1
风与烈酒
|
1天前
|
JavaScript API 开发者
Vue3有哪些常用的API
Vue3有哪些常用的API
风与烈酒
12 1
桃李春风一杯酒
|
1天前
|
JavaScript 前端开发 API
组合API：掌握Vue的组合式API（Composition API）
【4月更文挑战第24天】Vue.js的组合式API是Vue 3中的新特性，旨在提供更灵活的组件逻辑组织方式。它允许开发者像React Hooks一样定义和复用逻辑单元——组合函数。通过组合函数，可以跨组件共享和管理状态，提升代码复用和维护性。本文介绍了如何开始使用组合式API，包括安装Vue CLI、引入API、使用组合函数以及组织和复用逻辑。掌握组合式API能增强开发复杂应用的能力，改善代码结构和可读性。
桃李春风一杯酒
21 2
微芒不朽
|
1天前
|
JavaScript API
Vue3 API函数及功能
Vue3 API函数及功能
微芒不朽
8 0
刻刻帝的海角
|
1天前
|
JavaScript 前端开发 API
Vue3 组合式 API
Vue3 组合式 API
刻刻帝的海角
24 0
宁波阿成.
|
1天前
|
JavaScript
VUE里的find与filter使用与区别
VUE里的find与filter使用与区别
宁波阿成.
22 0
1529723250799936
|
1天前
|
JavaScript
vue页面加载时同时请求两个接口
vue页面加载时同时请求两个接口
1529723250799936
14 1
宁波阿成.
|
1天前
|
JavaScript
vue里样式不起作用的方法，可以通过deep穿透的方式
vue里样式不起作用的方法，可以通过deep穿透的方式
宁波阿成.
14 0
1529723250799936
|
1天前
|
移动开发 JavaScript 应用服务中间件
vue打包部署问题
Vue项目`vue.config.js`中，`publicPath`设定为&quot;/h5/party/pc/&quot;，在线环境基于打包后的`dist`目录，而非Linux的`/root`。Nginx代理配置位于`/usr/local/nginx/nginx-1.13.7/conf`，包含两个相关配置图。
1529723250799936
16 1
vue打包部署问题
宁波阿成.
|
1天前
|
JavaScript 前端开发
iconfont 图标在vue里的使用
iconfont 图标在vue里的使用
宁波阿成.
17 0

热门文章

最新文章

  • 1
    阿里云微服务引擎及 API 网关 2024 年 3 月产品动态
  • 2
    私有化部署 Llama3 大模型, 支持 API 访问
  • 3
    Flink DataStream API 批处理能力演进之路
  • 4
    Serverless 应用引擎产品使用之在阿里函数计算中开启函数计算 API 接口如何解决
  • 5
    【AI大模型应用开发】0.2 智谱AI API接入详细步骤和简单应用
  • 6
    NL2SQL技术方案系列(1)：NL2API、NL2SQL技术路径选择；LLM选型与Prompt工程技巧，揭秘项目落地优化之道
  • 7
    IDEA 版 API 接口神器来了，一键生成文档，贼香！
  • 8
    在 Spring Boot 中使用 OpenAI ChatGPT API
  • 9
    第7章 Spring Security 的 REST API 与微服务安全（2024 最新版）（上）
  • 10
    Serverless 应用引擎产品使用之在阿里函数计算中，使用阿里云API或SDK从函数计算调用ECS实例的服务如何解决
  • 1
    Vue中的数据变化监控与响应——深入理解Watchers
    18
  • 2
    vue3+threejs+koa可视化项目——模型文件上传(第四步)
    18
  • 3
    vue3+threejs+koa可视化项目——实现登录注册（第三步）
    42
  • 4
    vue3+threejs可视化项目——搭建vue3+ts+antd路由布局（第一步）
    38
  • 5
    Vue 项目中的权限管理：让页面也学会说“你无权访问！
    35
  • 6
    【vue】iview如何把input输入框和点击输入框之后的边框去掉
    21
  • 7
    【vue实战】父子组件互相传值
    19
  • 8
    vue2_引入Ant design vue
    18
  • 9
    【Vue】绝了！这生命周期流程真...
    17
  • 10
    【vue】框架搭建
    10

    • 相关课程

    更多
  • 体验-K8S API 基础及Pod 基本应用

    • 相关电子书

    更多
  • CUDA MATH API
  • API PLAYBOOK
  • 传统企业的“+互联网”-API服务在京东方的实践

    • 相关实验场景

    更多
  • 快速体验智能体API应用
  • 使用函数计算FC部署TodoList应用
  • Elasticsearch Java API Client 开发
    • 下一篇
    2024年阿里云免费云服务器及学生云服务器申请教程参考