vue3 setup（详细）使用教程

vue3 setup（详细）使用教程

文章目录

• vue3 setup（详细）使用教程
• • 1：为什么使用setup
  • 2：创建vue3项目
  • 3：在组件中编写setup方法
  • 4：setup生命周期
  • • 4.1：执行时机
    • 4.2：setup 包含的生命周期
  • 5：setup使用ref对数据进行响应式绑定
  • 6：setup使用watch和computed
  • • 6.1：对变化做出反应 watch
    • 6.2：使用 computed 计算count的值：
  • 7：setup看起来似乎更笨重了
  • 8：关于 props 的值

1：为什么使用setup

当项目变大时，一个方法（methods）、一个数据（data）、一张表，相同的逻辑代码出现在多个地方，给维护带来很大的不便。 setup的出现就是为了解决这个问题。

2：创建vue3项目

开始之前首先确认vue cli 版本：Vue CLI 4.x

vue --version

安装 vue cli 4.x

npm install -g @vue/cli

创建基于vue3的项目：

vue create vue3

选择 vue3：

点击回车安装。

3：在组件中编写setup方法

<template>
  <div class="hello">
    <h1>{{ name }}</h1>
  </div>
</template>
<script>
export default {
  name: "hello",
  setup(msg) {
    console.log(msg);
    return { name:"Mr liu" };
  },
};
</script>
<style scoped>
</style>

如果一切正常，你将看到此输出：

4：setup生命周期

4.1：执行时机

setup 会在 beforeCreate 之前执行。

export default {
  name: "hello",
  setup(msg) {
    console.log(msg);
    return { name:"Mr liu" };
  },
  beforeCreate(){
    console.log("beforeCreate");
  }
};

4.2：setup 包含的生命周期

• onBeforeMount——挂载开始前调用
• onMount——挂载后调用
• onBeforeUpdate——当响应数据改变，且重新渲染前调用
• onUpdated——重新渲染后调用
• onBeforeUnmount——Vue实例销毁前调用
• onUnmounted——实例销毁后调用
• onActivated——当keep-alive组件被激活时调用
• onDeactivated——当keep-alive组件取消激活时调用
• onErrorCaptured——从子组件中捕获错误时调用

比如：onMounted：

import { onMounted } from 'vue'
export default {
  name: "hello",
  setup(msg) {
    onMounted(()=>{
      console.log("onMounted");
    })
    console.log(msg);
    return { name:"Mr liu" };
  },
  beforeCreate(){
    console.log("beforeCreate");
  }
};

5：setup使用ref对数据进行响应式绑定

响应式绑定：使用ref

<template>
  <div class="hello">
    <h1>{{ name }}</h1>
    <h5>count:{{count}}</h5>
  </div>
</template>
<script>
import { onMounted } from 'vue'
export default {
  name: "hello",
  setup(msg) {
    onMounted(()=>{
      console.log("onMounted");
    })
    console.log(msg);

    //创建定时器增加count值
    let count = 1;
    setInterval(()=>{
      count++
    },1000)
    return { name:"Mr liu",count:count };
  },
  beforeCreate(){
    console.log("beforeCreate");
  }
};
</script>
<style scoped>
</style>

虽然我们创建了定时器增加count的值，但视图并未发生变化。

换成 ref 赋值：

	//创建定时器增加count值
    let count = ref(1);
    setInterval(()=>{
      count.value++
    },1000)
    return { name:"Mr liu",count:count };

ref接受参数并返回它包装在一个带有value属性的对象中，然后可以使用该属性访问或改变反应变量的值

别忘了引入ref：

import { ref,onMounted } from 'vue'

接下来视图的数据会一直变化。

6：setup使用watch和computed

6.1：对变化做出反应 watch

使用 watch 监听count的变化：

import { ref, onMounted, watch } from "vue";
export default {
  name: "hello",
  setup(msg) {
    onMounted(() => {
      console.log("onMounted");
    });
    console.log(msg);
    //创建定时器增加count值
    let count = ref(1);
    setInterval(() => {
      count.value++;
    }, 1000);
    watch(count, (newValue, oldValue) => {
      console.log(newValue,oldValue);
      console.log(count.value);
    });
    return { name: "Mr liu", count: count };
  },
  beforeCreate() {
    console.log("beforeCreate");
  },
};

6.2：使用 computed 计算count的值：

	let count2 = computed(()=>count.value*2);
    return { name: "Mr liu", count: count2 };

数据将会展示出：2 4 6 8…

7：setup看起来似乎更笨重了

当代码多的时候，看起来似乎没有解决问题，反而看起来很笨重。

我们可以将代码分成多个部分并引入：

新建 mycount.js 文件：

import { ref } from 'vue'
export default function mycount(){
    //创建定时器增加count值
    let count = ref('1');
    setInterval(()=>{
        count.value++
    },1000)
    return{
        count:count
    }
}

引入 mycount 文件：

import mycount from '../../util/count';
export default {
  name: "hello",
  setup() {
    let {count} = mycount();
    return { name: "Mr liu" ,count};
  },
  beforeCreate() {
    console.log("beforeCreate");
  },
};

count的值会实时变化并更新视图。

8：关于 props 的值

父组件给子组件传值 user:'anny'

子组件setup可以取出该值：

import mycount from '../../util/count';
export default {
  name: "hello",
  props:{
    user:String
  },
  setup(msg) {
    console.log(msg.user)
    let {count} = mycount();
    return { name: "Mr liu" ,count};
  },
  beforeCreate() {
    console.log("beforeCreate");
  },
};