【Vue 从入门到实战进阶式掌握完整知识体系】00

2025-07-26 21:12:49

【Vue 从入门到实战进阶式掌握完整知识体系】00 六、Composition API 组合 API ，即将数据和业务逻辑放在一起处理，而不是像vue2，将数据放在data中，业务逻辑分别放在methods，watch，computed中等 1、Setup函数的使用 Setup函数的执行时机：在 beforeCreate 之前执行；代码代码语言：javascript代码运行次数：0运行

【Vue 从入门到实战进阶式掌握完整知识体系】00

六、Composition API

组合 API ，即将数据和业务逻辑放在一起处理，而不是像vue2，将数据放在data中，业务逻辑分别放在methods，watch，computed中等

1、Setup函数的使用

Setup函数的执行时机：在 beforeCreate 之前执行；

代码

代码语言：javascript代码运行次数：0运行复制

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>hello vue</title>
  <!-- 引入Vue库 -->
  <script src="@next"></script>
</head>

<body>
  <div id="root"></div>
</body>

<script>

  ct app = ({
    // 在模板里面，可以使用 setup 函数里面提供的属性和方法
    // 因为 setup 在实例创建之前就已经执行了
    template: `
      <div @click="handleClick">name: {{name}} age: {{age}}</div>
    `,
    // 简单使用 setup 函数
    // setup 函数是在实例创建之前执行的(在 `beforeCreate` 之前)
    // setup 里面不能使用 this 关键字，因为此时实例尚未创建，不存在 this
    setup(props, context){
      return{
        name: 'zibo',
        age: 25,
        handleClick(){
          cole.log("点击了");
        }
      }
    }
  });

  ct vm = ('#root');
</script>

</html>

运行结果

image-20210614161402715

setup内部更多写法

代码语言：javascript代码运行次数：0运行复制

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>hello vue</title>
  <!-- 引入Vue库 -->
  <script src="@next"></script>
</head>

<body>
  <div id="root"></div>
</body>

<script>

  ct app = ({
    // 在模板里面，可以使用 setup 函数里面提供的属性和方法
    // 因为 setup 在实例创建之前就已经执行了
    // 再次提醒：当多个函数的时候要使用括号
    template: `
      <div @click="handleClick(), add(100), changeStudentame('大哥刘备')">name: {{name}} age: {{age}}</div>
    `,
    // 简单使用 setup 函数
    // setup 函数是在实例创建之前执行的
    // setup 里面不能使用 this 关键字，因为此时实例尚未创建，不存在 this
    setup(props, context){
      ct { reactive } = Vue;

      // 写法一：数据和逻辑分离
      ct name = "zibo";
      ct age = 25;
      // 函数写法一
      ct handleClick = () => {
        cole.log("点击了");
      }
      // 函数写法二
      function add(num){
        cole.log("数字是：" + num);
      }
      // 写法二：数据和逻辑写在一起
      function test01(){
        // 数据
        ct student = reactive({
          name: 'zibo',
          age: 25
        });
        // 逻辑
        function changeStudentame(name){
           = name;
          cole.log("student", student);
        }
        return { student, changeStudentame};
      }
      // 从 test01 中拿
      ct {student, changeStudentame} = test01();
      return{
        name,
        age,
        handleClick,
        add,
        student,
        changeStudentame
      }
    }
  });

  ct vm = ('#root');
</script>

</html>

运行结果

image-20210615175607740

Composition API 和 Opti API 中的同名属性

此时Opti API 中的同名属性会失效

代码语言：javascript代码运行次数：0运行复制

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>hello vue</title>
  <!-- 引入Vue库 -->
  <script src="@next"></script>
</head>

<body>
  <div id="root"></div>
</body>

<script>

  ct app = ({
    data(){
      return{
        age: 800
      }
    },
    template: `
      <div>age: {{ age }}</div>
    `,
    setup(props, context){
      ct { ref } = Vue;
      ct age = ref(25);
      return{
        age
      }
    }
  });

  ct vm = ('#root');
</script>

</html>

运行结果

image-20210615181059947

参数props

参数 props 接收父组件传过来的参数，但是必须在当前组件中使用 props: [‘属性名’] 接收，setup 才能接收到！

代码语言：javascript代码运行次数：0运行复制

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>hello vue</title>
  <!-- 引入Vue库 -->
  <script src="@next"></script>
</head>

<body>
  <div id="root"></div>
</body>

<script>

  ct app = ({
    template: `
      <child name="name" />
    `,
    setup(props, context){
      return{ }
    }
  });

  appponent("child", {
    // 当前组件必须使用 props 关键字接收，否则 setup 函数的 props 参数为空
    props: ['name'],
    template: `
      <h1>hello {{name}}</h1>
    `,
    setup(props, context){
      cole.log(props);
    }
  });

  ct vm = ('#root');
</script>

</html>

运行结果

image-20210616111244209

props是响应式的

setup 中接受的props是响应式的，当传入新的 props 时，会及时被更新。由于是响应式的，所以不可以使用 ES6 解构，解构会消除它的响应式。

代码语言：javascript代码运行次数：0运行复制

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>hello vue</title>
  <!-- 引入Vue库 -->
  <script src="@next"></script>
</head>

<body>
  <div id="root"></div>
</body>

<script>

  ct app = ({
    template: `
      <child :name="name" />
      <input v-model="name" />
    `,
    setup(props, context) {
      ct { ref } = Vue;
      ct name = ref('zibo');
      return {
        name
      }
    }
  });

  appponent("child", {
    props: ['name'],
    template: `
      <h1>hello {{name}}</h1>
    `,
    setup(props, context) {
      ct { watchEffect } = Vue;
      watchEffect(() => {
        cole.log(`name is: ` + )
      })
    }
  });

  ct vm = ('#root');
</script>

</html>

运行结果

image-2021061611057801

使用ES6解构props

与下面”解构对象的属性不是响应式的“类似，但那个是对自定义属性的解构

代码语言：javascript代码运行次数：0运行复制

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>hello vue</title>
  <!-- 引入Vue库 -->
  <script src="@next"></script>
</head>

<body>
  <div id="root"></div>
</body>

<script>

  ct app = ({
    template: `
      <child :name="name" />
      <input v-model="name" />
    `,
    setup(props, context) {
      ct { ref } = Vue;
      ct name = ref('zibo');
      return {
        name
      }
    }
  });

  appponent("child", {
    props: ['name'],
    template: `
      <h1>hello {{name}}</h1>
    `,
    setup(props, context) {
      ct { watchEffect } = Vue;
      ct { name } = props;
      watchEffect(() => {
        cole.log(`name is: ` + name)
      })
    }
  });

  ct vm = ('#root');
</script>

</html>

运行结果

image-2021061611227270

使从props解构后的属性再次变成响应式

使用 toRefs 即可，参考”toRefs使解构对象的属性也变成响应式的“

子组件改变父组件传递过来的数据：改副本

我们在选项 API 里面写过一次了，这里再在组合式 API 里再写一次

代码语言：javascript代码运行次数：0运行复制

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>hello vue</title>
  <!-- 引入Vue库 -->
  <script src="@next"></script>
</head>

<body>
  <div id="root"></div>
</body>

<script>

  ct app = ({
    template: `
      <child :name="name" />
    `,
    setup(props, context) {
      ct { ref } = Vue;
      ct name = ref('zibo');
      return {
        name
      }
    }
  });

  appponent("child", {
    props: ['name'],
    template: `
      <h1>hello {{newame}}</h1>
      <input v-model="newame" />
    `,
    setup(props, context) {
      ct { watchEffect, ref } = Vue;
      ct newame = ref();
      watchEffect(() => {
        cole.log(`name is: ` + newame.value)
      })
      return{ newame }
    }
  });

  ct vm = ('#root');
</script>

</html>

运行结果

image-202106161401845

子组件改变父组件传递过来的数据：对外触发事件

代码语言：javascript代码运行次数：0运行复制

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>hello vue</title>
  <!-- 引入Vue库 -->
  <script src="@next"></script>
</head>

<body>
  <div id="root"></div>
</body>

<script>

  ct app = ({
    template: `
      <child :num="num" @changeum="handleChangeum" />
    `,
    setup(props, context) {
      ct { ref } = Vue;
      ct num = ref(20);
      function handleChangeum(parameter){
        num.value += parameter;
      }
      return {
        num, handleChangeum
      }
    }
  });

  appponent("child", {
    emits:['changeum'],
    props: ['num'],
    template: `
      <h1>hello {{num}}</h1>
      <button @click="changeum">点我+5</button>
    `,
    setup(props, context) {
      ct { watchEffect } = Vue;
      ct { emit } = context;
      function changeum(){
        emit('changeum', 5);
      }
      watchEffect(() => {
        cole.log(`num is: ` + )
      })
      return{ changeum }
    }
  });

  ct vm = ('#root');
</script>

</html>

运行结果

image-2021061614261428本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。原始发表：2025-01-06，如有侵权请联系 cloudcommunity@tencent 删除compositionvue函数入门api

#感谢您对电脑配置推荐网 - 最新i3 i5 i7组装电脑配置单推荐报价格的认可，转载请说明来源于"电脑配置推荐网 - 最新i3 i5 i7组装电脑配置单推荐报价格

本文地址：http://www.dnpztj.cn/biancheng/1200031.html

本站网友软件公司经营范围	5分钟前发表
props
本站网友撞撞车	26分钟前发表
setup(props
本站网友 swfupload	6分钟前发表
['name']
本站网友 html5css3	29分钟前发表
setup(props
本站网友无锡出租房	4分钟前发表
initial-scale=1.0"> <title>hello vue</title> <!-- 引入Vue库 --> <script src="@next"></script> </head> <body> <div id="root"></div> </body> <script> ct app = ({ // 在模板里面
本站网友苹果的故事	13分钟前发表
` <child
本站网友成都租车公司	23分钟前发表
changeStudentame}; } // 从 test01 中拿 ct {student
本站网友 360打不开	21分钟前发表
add(100)

【Vue 从入门到实战进阶式掌握完整知识体系】00