首页 > 其他分享 >高级vue 组合api setup toRefs 用法

高级vue 组合api setup toRefs 用法

时间:2022-10-05 17:48:19浏览次数:59  
标签:vue setup toRefs api mes data

<script> import {ref,reactive,toRefs} from 'vue' export default{     setup(){       let data=reactive({         mes:0,         userObj:{           userName:'www.96net.com.cn'         },       });       const add=()=>{         data.mes++;         console.log(data.mes)       }       return {         ...toRefs(data),         add,       }     } } </script>
<template>   <div id="as">     {{userObj.userName}}   </div>   <button @click="add">+</button> </template>
<style scoped>
</style>

标签:vue,setup,toRefs,api,mes,data
From: https://www.cnblogs.com/96net/p/16755974.html

相关文章

  • 高级vue 组合api setup reactive用法
    <script>import{reactive}from'vue'exportdefault{  setup(){   letdata=reactive({    mes:0   });   constadd=()=>{ ......
  • Vue2 下 Echarts的使用
    Vue2下Echarts的使用1、安装组件npminstallechartsvue-echarts--save2、使用2.1、配置为全局组件方式全局配置为公有组件//main.jsimport"echarts"import......
  • vue3组合式API
     选项API生命周期选项和组合式API之间的映射beforeCreate ->use setup()created ->use setup()beforeMount -> onBeforeMountmounted -> onMo......
  • Vue学习(二)
    vue检测数据的原理数组的常用方法:push,pop,shift,unshift,splice,sort,reverse.原理就是setter,vue生成每个属性的setter,递归生成所有的getter,setter.vue.set()的......
  • vue3 ref()和reactive()的
    vue3中对响应式数据的声明官方给出了ref()和reactive()这两种方式,今天我们来聊聊两种定义定义数据方式有什么不同如上代码,我们使用变量声明的方式,ref的方式,reactive......
  • Vue3.x 组合式api的生命周期钩子
    Vue3组合式api的生命周期beforeCreatecreated,setup语法糖模式(组合式api)是没有这两个生命周期的,用setup去代替onBeforeMount获取不到DOM,onMounted可以获取DOMon......
  • vue无法加载文件C:\Users\Administrator\AppData\Roaming\npm\vue.ps1因为在此
    vue:无法加载文件C:\Users\Administrator\AppData\Roaming\npm\vue.ps1,因为在此系统上禁止运行脚本……………………   解决方法:1、管理员身份运行PowerShell(命......
  • 如何在Vue里打开CAD,DWG文件”
    Node环境安装 这里以一个Vue3工程为例子,首先安装Node​​下载|Node.js​​请根据电脑操作系统安装对应的安装包步骤1:双击下载后的安装包,如下所示:步骤2:点击上图的......
  • vue nextTick的用法
    一、什么是vue.nextTick()定义:在下次DOM更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,获取更新后的DOM。所以就衍生出了这个获取更新后的DOM......
  • 说说你对Vue的keep-alive的理解
    什么是keep-alive在平常开发中,有部分组件没有必要多次初始化,这时,我们需要将组件进行持久化,使组件的状态维持不变,在下一次展示时,也不会进行重新初始化组件。也就是说,keep......