VUE3 学习笔记(14):VUE3 组合式API与传统选项式API用法

VUE3相较VUE2的亮点很多,作为后端开发置于前端最大的感受就是组合式API(之前采用的是选项式API);它使得整体更简洁易用,但值得提醒的是官方并未强制要求二选一,尽管如此在同一个项目中还是不要出现两种写法。

选项式API

优点

优点:

.VUE2 写法;学习成本低

.选项式类似树结构,阅读方便

.能基本满足后端开发的常见需求

示例

<template>
  <div class="about">
    <p>{{ msg }}</p>
    <br>
    <p>{{ getMsg }}</p>
    <br>
    <p>{{ user.name }}</p>
    <button @click="setMsg()">配置信息</button>
  </div>
</template>
<script>
export default {
  name: 'About',
  data() {
    return {
      msg: '选项式API',
      isDelete: false,
      user: {
        name: '张三',
        age: 18
      }
    }
  },
  methods: {
    setMsg() {
      this.msg = '配置新信息'
    }
  },
  computed: {
    getMsg() {
      return this.isDelete  ? 'false' : 'true'
    }
  }
}
</script>

组合式API

优点

.基于TS速度更快

.生命周期可以重复使用

.父传子可以直接调用(Provide传 Inject接)

.无须再到对应的事件里写事件,直接写就能直接调用

示例

<template>
  <div>
    <p>获取示例</p>
    <br>
    <p>{{msg}}</p>
    <br>
    <p>{{user.name}}</p>
    <li v-for="item in userList">{{item.name}}</li>
    <br>
    <button @click="setUserName">设置UserName</button>

    <HelloWorld msg="传过来消息了" />
    <p>{{deleteMsg}}</p>

    <br>

  </div>
</template>

<script setup>
//直接引用 ref 相当于单个变量的引用
//reactive 相当于对象引用
//ref 与 reactive 相当于 选项式API中的 data
import {ref,reactive} from "vue";
//引用vue的挂载事件 否则无法定义组件事件
import {onMounted} from "vue";
//父传子使用
import {provide} from "vue";
//启用计算属性
import {computed} from "vue";
import HelloWorld from "@/components/HelloWorld.vue";
  const msg = ref('组合式API')
  const isDelete = ref(false)
  const user = reactive({
    name: '张三',
    age: 18
  })
  const userList = ref([
    {
      name: '张三',
      age: 18
    },
    {
      name: '李四',
      age: 19
    }
  ])
  onMounted(() => {
    console.log('组件挂载')
  })
  //定义组件事件
  function setUserName() {
    user.name = '最新设置UserName'
    msg.value = '最新设置msg'
  }
  //传值
  provide('sendMsg','测试一下传值')
  //计算属性
  const deleteMsg = computed(() => {
    return isDelete.value ? 'false' : 'true'
  })

</script>

子组件

<template>
  <div class="greetings">
    <h1 class="green">{{ msg }}</h1>
    <br>
    <h1 class="green">{{ newMsg }}</h1>
    <br>
    <h1 class="green">{{ getMsg }}</h1>
  </div>
</template>

<script>
// 使用inject进行接收
import {ref,inject} from "vue";

export default {
  props: {
    msg: {
      type: String,
      default: 'Hello World'
    }
  },
  setup(props,ctx) {
    //获取props数据
    const newMsg = ref(props.msg+'666')
    //可以获取上下文对象
    console.log(ctx)
    const getMsg= inject('sendMsg')
    return {
      newMsg,getMsg
    }
  }
}
</script>

效果

  • 14
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值