Vue3 setup语法糖勾子函数使用简易教程

1. 新生命周期(setup)

vue3删除了create生命周期，其他方法前面加上on进行访问，例如onMounted、onUpdated，同时新增setup属性（比created更早执行,同时setup中this不会指向实例），更贴近于html写法，这个方法在onBeforeMounted之前被调用，同时vue3在生命周期中也删除了this指向，所有的方法必须自己在vue实例中调用

<template>
  <div>123</div>
</template>
<script setup>
  //setup写法，自带语法糖（推荐）
  //在setup中没有this，所有的方法必须引入后使用
  import {ref} from 'vue'
  let up =ref(123)
</script>

等同于（使用语法糖后系统自动renturn，更方便）

<template>
  <div>123</div>
</template>
<script>
import {ref} from 'vue'
export default{
  setup() {
    //定义数据需要在数据前面加ref包裹，后面会具体详解
    let up=ref(123)
    return{
      up
    }
  }
}
</script>

使用生命周期必须在vue实例中引用，销毁实例变为onUnmounted，与vue2的destroy作用一致

<script setup>
import {onMounted,onUnmounted} from 'vue'
//所有的生命周期用法均为回调函数
onMounted(()=>{
  console.log('我创建了');
})
// 销毁实例变为onUnmounted，与vue2的destroy作用一致
onUnmounted(()=>{
  console.log('我销毁了');
})
</script>

2. VUE3的数据、方法绑定

2.1使用ref定义数据

ref在vue3中是将数据转换成响应式数据结构的一种，因为vue3中没有了data(){},那么就没办法劫持数据做到响应式数据，那么怎么办呢？在vue3中新出现了ref这个新方法，可以将数据变成响应式数据。

为了区别使用ref和不使用ref的区别，我写了下面两个demo做对比

<template>
  <div>{{num}}</div>
</template>
<script setup>
//不使用ref定义
let num=1
</script>

我们定义了一个不使用ref的数据，可以看出视图也渲染成了我们想要的状态

image.png

但是如果我们加上一个按钮，每次让num+1，又是什么效果呢？

<template>
  <div>
    <div>{{ num }}</div>
    <button @click="addNum">num+1</button>
  </div>
</template>
<script setup>
//不使用ref定义
let num = 1;
let addNum = ()=>{
  num+=1;
  console.log('我执行了，现在的num是'+num);
}
</script>

image.png

可以看出，num确实被修改了，但是为什么视图不更新呢？那是因为数据在{}或者[]中才可以被劫持，现在的num就是一个字符串，字符串修改可不能被objectdefineproperty或者proxy劫持，压根视图就不会被修改，那么如何做让视图变成响应式的呢？就加一个ref就行。

代码修改如下，我们看一下视图以及num变成了什么样子

<template>
  <div>
    <div>{{ num }}</div>
    <button @click="addNum">num+1</button>
  </div>
</template>
<script setup>
import { ref } from "vue";
let num = ref(1);
let addNum = () => {
  //注意，使用ref变成响应式数据的时候，必须通过.value才可以拿到定义的数据
  num.value = num.value + 1;
  console.log("我执行了，现在的num是" + num.value);
  console.log(num);
};
</script>

image.png

可以看到，数据变成响应式的了，同时num变成了对象，这样只要数据改变，数据就会被劫持，视图就会改变，需注意拿取ref的数据必须加上.value

2.2 使用ref拿取DOM元素

在vue2中大家都用ref拿取dom元素对吧，那么现在在vue3中如何拿取dom元素呢？

<template>
  <div>
    <!-- 模板中无需使用.value，会被自动编译转换成真实数据 -->
    <div ref="box">{{ num }}</div>
  </div>
</template>
<script setup>
import { ref,nextTick ,onMounted} from "vue";
let num = ref(1);
// 需要拿取box这个元素，那么只需要定义一个名字为上方ref相同的名字即可
let box =ref();
// 这么拿取的话会是undefined，需要等dom渲染完成后才能拿取到，因为setup时候dom还没渲染
console.log(box.value);//undefined
nextTick(()=>{
  console.log('我是nextTIck执行');
  console.log(box.value);
})
onMounted(()=>{
  console.log('我是mouted执行');
  console.log(box.value);
})
</script>

image.png

2.3 使用reactive定义数据

每次都使用.value是不是有点麻烦，神器来了，reactve可以将整个对象变成响应式数据

<template>
  <div>
    <div ref="box">{{ data.name }}</div>
    <button @click="setName">修改名字</button>
  </div>
</template>
<script setup>
import { reactive } from "vue";
let data = reactive({
  name: "张三",
  age: 13,
  sex: "男"
});
function setName() {
  // 调用时更像vue2，不用.value去调用
  data.name = "李四";
  data.age = 35;
  data.sex = "女";
}
</script>

2.4 方法绑定

template>
  <div>
    <button @click="setFn"></button>
  </div>
</template>
<script setup>
// 以下方法都可以定义函数，按自己开发习惯定义一种即可
let setFn = ()=>{
  console.log("我是匿名函数");
}
function setFn(){
  console.log('我是普通函数');
}
</script>

2.5 computed使用

<template>
  <div class="box">
    <!-- 在上方调用即可，结果为169 -->
    {{add}}
  </div>
</template>
<script setup>
import { computed, ref } from "vue";
let num1 = ref(13);
let num2 = ref(13);
// 设置个变量接收
let add = computed(() => {
  return num1.value * num2.value;
});

2.6 watch使用

2.6.1单属性监听

<template>
  <div class="box">
    <input type="text" v-model="user" />
  </div>
</template>
<script setup>
import { watch, ref } from "vue";
// 用户名
let user = ref();
// watch监听接收两个或者三个匿名函数，第一个是监听的数值，第二个是处理监听函数，第三个是否开启深监听(可选)
watch(
  () => user.value,
  (newVal, oldVal) => {
    console.log("新值:" + newVal + "旧值:" + oldVal);
  },
  // 可选项，是否开启深监听
  {
    deep: true
  }
);
</script>

image.png

2.6.2多属性监听（方法1）

<template>
  <div class="box">
    <input type="text" v-model="user" />
    <input type="password" v-model="password" />
  </div>
</template>
<script setup>
import { watch, ref } from "vue";
// 用户名
let user = ref();
let password = ref();
// 监听user
watch(
  () => user.value,
  newVal => {
    console.log("用户名:" + newVal);
  },
  // 可选项，是否开启深监听
  {
    deep: true
  }
);
// 监听password
watch(
  () => password.value,
  newVal => {
    console.log("密码:" + newVal);
  }
);
</script>

2.6.3多属性监听（方法2）

第二种方法相比第一种方法更直接，同时监听多个值只要其中一个值变化，就会触发方法。

<template>
  <div class="box">
    <input type="text" v-model="user" />
    <input type="password" v-model="password" />
  </div>
</template>
<script setup>
import { watch, ref } from "vue";
// 用户名
let user = ref();
let password = ref();
// 同时监听user和password，只要user或者password其中一个值变化，就会触发下面的方法
watch(()=>[user.value, password.value],([newUser, newPassword],[oldUser, oldPassword])=>{
  console.log('我是新的user值'+newUser);
  console.log('我是旧的的user值'+oldUser);
  console.log('我是新的pass值'+newPassword);
  console.log('我是旧的的pass值'+oldPassword);
})
</script>

image.png

2.7 onMounted使用

import { onMounted } from 'vue';

onMounted(() => {
  tablesDatas();
  getList();
});

2.8 vue2和vue3勾子函数对应转换关系

image.png

3.路由

3.1路由跳转

在vue2中使用this.$router.push进行跳转，在vue3中，setup中没有this，那么怎么处理呢？

<template>
  <div>
    <button @click="jumpNewPage">跳转首页</button>
  </div>
</template>
<script setup>
// 切记是在vue-router中引入useRouter
import {useRouter} from 'vue-router'
  const router = useRouter()
let jumpNewPage = ()=>{
  // 切记不可将router定义在方法中，这样他不是响应式数据，会报错
  // const router = useRouter()
  router.push({path: '/'})
}
</script>

3.2 路由传参

<script setup>
// 记住是在vue-router中引入useRouter
import {useRouter} from 'vue-router'
const router = useRouter()
let jumpNewPage = ()=>{
  // 有两种传参方式，query和params，两者写法不一样，请注意
  // query更像get传参，是显性传参，前面跳转加path路径即可，刷新也还在，
  router.push({path: '/',query: {name:'首页'}})
  // params更像post，是隐性传参过去，跳转需注意，不使用path跳转，而是用路由中跳转组件的name进行跳转，否则拿不到params
  router.push({name: 'Home',params: {name:'首页'}})
}
</script>

3.3路由接参数

元素使用params跳转，使用params接收即可

<script setup>
// 引入useRoute,获取是route
import {useRoute} from 'vue-router'
import {onMounted} from 'vue'
  const route = useRoute()
  onMounted(()=>{
    console.log(route.params);//结果为{name:'首页'}
  })
</script>

元素使用query跳转，使用query接收即可

<script setup>
// 引入useRoute,获取是route
import {useRoute} from 'vue-router'
import {onMounted} from 'vue'
  const route = useRoute()
  onMounted(()=>{
    console.log(route.query);//结果为{name:'首页'}
  })
</script>

4.组件

4.1组件引用

组件在props里直接引入就可在template里直接使用，无需再进行注册。

<template>
  <div class="box">
    <!-- 子组件引用 -->
   <v-child></v-child>
  </div>
</template>
<script setup>
// 引入后无需注册
import vChild from '../components/child.vue'
</script>

4.2 defineProps传参(父传子)

父元素传递给子元素的数据，子元素使用defineProps进行接收

//父元素
<template>
  <div class="box">
    <!-- 子组件引用 -->
   <v-child msg='我给子元素带的一段话'></v-child>
  </div>
</template>

//子元素
<template>
    <div class="child">
        我是子组件
    </div>
</template>
<script setup>
import {defineProps} from 'vue'
// 在接收时候也得注意，vue3 props接收必须规定数据类型，如果父元素数据类型出错，那么会报错
const props = defineProps({msg:String})

//typeScript
interface Props {
    msg:String: string;
}
const props = withDefaults(defineProps<Props>(), { msg:String: '' });

</script>

props设置默认值，可以使用withDefaults

export interface Props {
  msg?: string
  labels?: string[]
}

const props = withDefaults(defineProps<Props>(), {
  msg: 'hello',
  labels: () => ['one', 'two']
})

4.3 defineEmits传值（子传父）

//子组件
<template>
    <div class="child">
        我是子组件
    </div>
</template>
<script setup>
import {defineEmits,onMounted} from 'vue'
const emit = defineEmits(['getChildMsg', 'secChildMsg'])
onMounted(()=>{
    emit('getChildMsg','我是子元素，给父元素传的话')
    emit('secChildMsg','我是子组件，这是传给父组件的第二句话')
})
</script>



//父组件
<template>
  <div class="box">
    <!-- 接收子组件的方法 -->
    <v-child @getChildMsg="getMsg" @secChildMsg="hSecChildMsg"></v-child>
  </div>
</template>
<script setup>

// 引入后无需注册
import vChild from "../components/child.vue";

let getMsg = e => {
  console.log(e); //我是子元素，给父元素传的话
};
const hSecChildMsg = e => {
  console.log(e); // 我是子组件，这是传给父组件的第二句话
};
</script>

4.4defineExpose(父拿子方法)

//子组件
<template>
    <div class="child">
        {{val}}
    </div>
</template>
<script setup>
import {ref,defineExpose} from 'vue'
let val = ref('我是子组件')
let fn = ()=>{
    val.value='我改变了子组件'
}
// 暴露val和fn
defineExpose({
    val,fn
})
</script>



//父组件
<template>
  <div class="box">
    <!-- 接收子组件的方法 -->
    <v-child ref ='child'></v-child>
  </div>
</template>
<script setup>
// 引入后无需注册
import vChild from "../components/child.vue";
import {ref,onMounted} from 'vue';
// 获取child实例
let child = ref()
onMounted(()=>{
  console.log(child.value.val);//直接打印：我是子组件，并不需要加.value
  // 执行子组件的fn函数
  child.value.fn()
})
</script>

5.vuex

在新的vue3中，肯定也猜到了，不是使用this.$store调用的了，是引入调用，下面就是教大家如何在vue3中如何使用vuex

//vuex
import { createStore } from 'vuex'

export default createStore({
  state: {
    num:1
  },
  mutations: {
    /**
     * @description: 修改num成新的num
     * @param {*} state 上方的state对象
     * @param {Number} newNum 新的num数值
     * @return {*} none
     */    
    setNum(state,newNum) {
      state.num = newNum
    }
  },
  actions: {
    // 异步递增num
    addAsync(store){
      setTimeout(()=>{
        console.log(store.state.num+=10);
      },1000)
    }
  },
  modules: {
  }
})

<script setup>
import {useStore} from 'vuex'
import {onMounted} from 'vue'
// vuex实例
const store =new useStore();
onMounted(()=>{
  // 调用state中的title，并且加1
  store.state.num+=1
  store.state.num+=1
  console.log(store.state.num);//3
  // 调用mucation里的setNum方法，第二个参数为setNum方法里的第二个参数
  store.commit('setNum',10);
  console.log(store.state.num);//已经修改成10了
  // 调用action里的addAsync方法
  store.dispatch('addAsync')//输出结果：20
})
</script>

同时也可以使用分发(…mapActions,…mapState等方法)，具体参照Vuex官网

转自：https://blog.csdn.net/qq_30351747/article/details/124105847
https://blog.csdn.net/qq_30351747/article/details/123998301

最后编辑于：2023.06.20 15:55:45

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 212,294评论 6赞 493
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 90,493评论 3赞 385
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 157,790评论 0赞 348
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 56,595评论 1赞 284
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 65,718评论 6赞 386
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 49,906评论 1赞 290
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 39,053评论 3赞 410
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 37,797评论 0赞 268
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 44,250评论 1赞 303
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 36,570评论 2赞 327
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 38,711评论 1赞 341
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 34,388评论 4赞 332
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 40,018评论 3赞 316
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 30,796评论 0赞 21
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 32,023评论 1赞 266
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 46,461评论 2赞 360
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 43,595评论 2赞 350

Vue3 setup语法糖勾子函数使用简易教程