Vue3.2——setup语法糖

Vue3.0中使用setup暴露变量必须return出来，template中才可以使用。在Vue3.2中，只需要在script标签上加上setup属性，就不需要return了。所以这个语法糖让我一个菜鸡都感觉到真的是特别爽。

因为之前已经对相关api做过解释与理解，所以这里只记录一下在Vue3.2中setup的写法。

写数据（data）

ref：声明响应式数据，用于声明基本数据类型

<script setup>
import {ref} from 'vue'
  
const name = ref('zeyi')
//修改
name.value = 'yuezeyi'
  
</script>

reactive：声明响应式数据，用于声明引用数据类型

toRefs：解构

<script setup>
const state = reactive({
    name:'zeyi',
    sex:'男'
})
//修改
state.name = 'yuezeyi'

//使用toRefs解构
const {name,sex} = toRefs(state)
//此时在template中可以直接使用{{name}}、{{sex}}
</script>

写方法（method）

可以直接在 setup里面定义一个常量为一个函数，即为 method

<template>
  // 调用方法
  <button @click='changeName'>按钮</button>  
</template>

<script setup>
  import { reactive } from 'vue'

  const state = reactive({  
      name: 'zeyi'
  })  
  // 声明method方法
  const changeName = () => {  
      state.name = 'yuezeyi'
  }  
</script>

计算属性（computed）

官话： computed是vue的计算属性，是根据依赖关系进行缓存的计算，只有在它的相关依赖发生改变时才会进行更新。后续拉一篇详解计算属性的。

<script setup>
  import { computed, ref } from 'vue'

  const count = ref(1)

  // 通过computed获得doubleCount
  const changeCount = computed(() => {
    return count.value * 2
  })
  // 获取
  console.log(changeCount.value)//2
</script>

监听（watch）

先定义一个值，并给一个改变这个数据的方法

<template>
    <button type="button" @click="changeName">改变name</button>
</template>

<script setup>
import { ref, reactive, computed, watch } from 'vue';
const state = reactive({
  name: 'zeyi',
});
const changeName = () => {
  state.name = 'yuezeyi';
};  
</script>

然后去监听改变数据前后的变化：

watch(
  () => state.name,
  (newVal, oldVal) => {
    console.log(state.name);
    console.log(`监听前：${oldVal}`);//zeyi
    console.log(`监听后：${newVal}`);//yuezeyi
  },
  {
    immediate: true, //立即执行
    deep: true, //深度监听
  }
);

父传子（props）

子组件

<template>
  <span>{{props.msg}}</span>
  // 这里也可省略【props.】
  <span>{{msg}}</span>
</template>
<script setup>
//省略const props = 也可以
const props = defineProps({
  msg: {
    type: String,
    default: '',
  },
});
</script>

父组件

直接引入子组件，会自动注册

<template>
  <HelloWorld msg="Vite + Vue" />//直接传入值
</template>

<script setup>
  // 引入子组件
import HelloWorld from './components/HelloWorld.vue';
</script>

子传父（emit）

子组件

<template>
    <span>{{ name }}</span>
    <button type="button" @click="changeName">改变name</button>
</template>
<script setup>
//props
defineProps({
  name: {
    type: String,
    default: '',
  },
});
//声明事件
const emit = defineEmits(['updateName']);
const changeName = () => {
  //执行
  emit('updateName', 'Yuezeyi');
};
</script>

父组件

<template>
    <HelloWorld :name="state.name" @updateName="updateName" />
</template>

<script setup>
  // 引入子组件
import HelloWorld from './components/HelloWorld.vue';
import { reactive } from 'vue';

const state = reactive({
  name: 'zeyi',
});
//接收子组触发的方法
const updateName = (name) => {
  state.name = name;
};
</script>

双向绑定（v-model）

注意：v-model是 v-model:model:modelValue的简写，所以默认给 v-model绑定的值就是 modelValue的值。

子组件

<template>
  <div>
    <span>我叫{{ modelValue }}，今年{{ age }}岁</span>
  </div>
  <button @click="changeInfo">点击换人</button>
</template>

<script setup>
defineProps({
  modelValue: String,//默认值
  age: Number,
});
const emit = defineEmits(['updateName', 'update:modelValue ', 'update:age']);
    //方法-触发父组件更新
const changeInfo = () => {
  emit('update:modelValue', 'Yuezeyi');
  emit('update:age', 30);
};
</script>

父组件

<template>
  <HelloWorld v-model="state.name" v-model:age="state.age" />
</template>
<script setup>
import HelloWorld from './components/HelloWorld.vue';
import { reactive } from 'vue';

const state = reactive({
  name: 'zeyi',
  age: 20,
});
</script>

先记录这些，后面用着用着可能就熟练了，当然现在还是推荐使用标准写法，毕竟VS Code可以直接生成语法糖写法。

转载/参考：稀土掘金

掘金的文章写的真的特别特别好，我都不想自己写笔记了，直接去掘金查就行了。