成都科技网站建设咨询,郑州网站推建设,网站被恶意攻击,石家庄网站设计公司排名Vue3.0组合式API系列文章#xff1a; 《Vue3.0组合式API#xff1a;setup()函数》 《Vue3.0组合式API#xff1a;使用reactive()、ref()创建响应式代理对象》 《Vue3.0组合式API#xff1a;computed计算属性、watch监听器、watchEffect高级监听器》 《Vue3.0组合式API… Vue3.0组合式API系列文章 《Vue3.0组合式APIsetup()函数》 《Vue3.0组合式API使用reactive()、ref()创建响应式代理对象》 《Vue3.0组合式APIcomputed计算属性、watch监听器、watchEffect高级监听器》 《Vue3.0组合式API使用defineProps()实现父组件向子组件传递数据》 《Vue3.0组合式API使用defineEmits()实现子组件向父组件传递数据》 《Vue3.0组合式API生命周期钩子函数》 《Vue3.0组合式API依赖注入provide和inject实现跨层组件的通信》 《Vue3.0组合式API使用ref获取DOM元素》 1、reactive() 方法
reactive() 方法用于将定义的 JavaScript 对象转换为响应式对象。
使用方法
script setup
//第一步导入函数
import { reactive } from vue;//第二步创建响应式对象
const data reactive(对象类型的数据);
/script
【实例】使用 reactive() 方法创建一个响应式对象并实现修改响应式对象的值。
templatefieldsetlegend组件/legendp用户名称{{ userInfo.userName }}/pp用户年龄{{ userInfo.age }}/pp博客信息{{ userInfo.blogName }}/pp博客地址{{ userInfo.blogUrl }}/pbutton clickupdateAge修改年龄/button/fieldset
/templatescript setup
//第一步导入函数
import { reactive } from vue;//第二步创建响应式对象参数为对象
const userInfo reactive({userName: pan_junbiao的博客,age: 0,blogName: 您好欢迎访问 pan_junbiao的博客,blogUrl: https://blog.csdn.net/pan_junbiao
});//修改年龄方法
function updateAge() {userInfo.age 36;
}/script
执行结果 2、ref() 方法
reactive() 方法可以为一个 JavaScript 对象创建响应式代理如果需要对象某个基本数据类型如数字、字符串的数据创建响应式代理对象可以通过 ref() 方法实现。该方法接收一个原始值作为参数也支持对象类型返回一个响应式的对象该对象只有一个 value 属性值指向内部值。
使用方法
script setup
//第一步导入函数
import { ref } from vue;//第二步创建响应式对象
const data ref(基本数据类型 或 对象类型);
/scripttemplate!-- 第三步使用响应式对象 --p{{ data }}/p
/template
【实例】使用 ref() 方法创建一个响应式对象并实现一个计数器功能。
templatefieldsetlegend组件/legend!-- 第三步使用响应式对象 --p计数结果{{ count }}/pbutton clickcounter计数器/button/fieldset
/templatescript setup
//第一步导入函数
import { ref } from vue;//第二步创建响应式对象
const count ref(0);// 增加计数的方法
function counter() {//注意使用响应式对象的.value属性获取内部值count.value;
}
/script 执行结果 说明 如果将 ref() 方法创建的响应式代理对象作为属性返回那么在模板中访问时不需要添加 .value 属性。 3、reactive 与 ref 的区别
reactive() 方法与 ref() 方法都可以用于创建响应式代理对象。但它们之间存在着以下几点区别
reactive() 方法的参数必须是对象类型。ref() 方法参数可以是基本数据类型也可以是对象类型。ref() 方法创建的响应式对象必须通过 .value 属性访问。ref() 方法的内部实现依赖于 reactive() 方法。
在实际的项目开发中推荐使用 ref() 方法因为更加灵活。
