首页 > 其他分享 >vue3 变量改变触发界面显示改变

vue3 变量改变触发界面显示改变

时间:2022-12-29 16:00:52浏览次数:35  
标签:触发 reactive 对象 数据类型 改变 vue3 界面显示 ref

我们需要使用到  ref  和  reactive  来触发界面绑定变量的更新。

reactive 的参数对象一般是对象或者数组,能够将复杂数据类型变为响应式数据;它的响应式是深层次的,底层本质是将传入的数据转换为 Proxy 对象。

 

ref 的参数一般为基本数据类型,也可以是对象类型;如果参数是对象类型,其底层 会自动转化为   reactive ;可以通过 .value  访问 ref 中的数据。

 

同样,如果想更新数组值,也可以使用 ref

 

标签:触发,reactive,对象,数据类型,改变,vue3,界面显示,ref
From: https://www.cnblogs.com/guofan/p/17012798.html

相关文章

  • vue3.0的生命周期
    1.vue3的生命周期与vue2的不同点:  2.vue3的生命周期与vue2对应的点:2.1beforeCreate和create相当于setup,因为不能写入setup生命周期内2.2使用vue3的组合式AP......
  • vue3+vite build打包报错:Some chunks are larger than 500 KiB after minification. C
    看官方的解决方案:1、在rollup配置文件中添加output.manualChunks,将模块拆分成多个chunk,减小每个chunk的大小;2、build.chunkSizeWarningLimit,提高报错的阈值;3、使用动......
  • Vue3 学习笔记
    有Vue2的基础,笔记只记载之前不熟悉的知识一、Vue基本知识1.Vue3基本指令1.1v-prev-pre用于跳过元素和它的子元素的编译过程,显示原始的Mustache标签:跳过不需要......
  • vue3封装axios并使用拦截器处理错误
    utils/http.jsimportaxiosfrom"axios";consthttp=axios.create({withCredentials:false,timeout:30000,baseURL:"http://127.0.0.1:8000",header......
  • Vue3 富文本编辑器
    官网https://www.wangeditor.com/v5/for-frame.html#%E4%BD%BF%E7%94%A8-1 安装:npminstall@wangeditor/editor--savenpminstall@wangeditor/editor-for-vue@n......
  • vue3使用sweetalert2替代默认的alert/confirm框
    安装#运行时依赖package.json的dependenciesnpminstallsweetalert2--save#开发时依赖package.json的devDependenciesnpminstallsweetalert2--save-dev ......
  • vue3使用bootstrap的简单加载遮罩层
    之前有使用过bootstrap做过一个简单的加载遮罩层,现把它加入到vue中。加载遮罩层一般来讲整个app共用一个就可以,因此放到App.vue中,为不影响其它的业务逻辑,放到</template>......
  • vue3使用vue-router构建SPA
    使用自动化构建工具vite搭建新项目#某个目录下执行npmcreatevite@latest 按照提示初始化项目,并按照提示:cdvite-projectnpminstallnpmrundev生成目录结构......
  • numpy中查看数组的形状和改变数组的维度
    1.查看数组的形状2.改变数组的维度......
  • Vue3源码阅读梳理
    简单代码例子const{createApp,defineComponent,computed,watch,ref,reactive,effect}=Vueconstapp=createApp({components:[],template:`<div......