新潮狼网站建设,如何给自己开发的网站加域名,关于数据库的网站开发,重庆微网站开发公司目录
编辑
1. ref 部分
1.1 ref定义基本数据类型
1.2 ref 定义引用数据类型
2. reactive 函数
3. ref 和 reactive 对比
3.1 原理
3.2 区别
3.3 使用原则 在 Vue 3 中 ref 和 reactive 是用于创建响应式数据的两个核心函数。它们都属于 Composition API 的一部分但适用于不同的场景和类型的数据。理解两者之间的区别和适用场景对于高效开发 Vue 应用至关重要。
1. ref 部分
1.1 ref定义基本数据类型
作用定义响应式变量。
语法let xxx ref(初始值)。
返回值一个RefImpl 的实例对象简称 ref 对象ref 的对象的 value属性是响应式的。
注意点如果使用ref定义响应式数据JS中操作数据需要 xxx.value但模板中不需要。
代码如下所示
templatediv classpersonh3我是Person组件/h3h2姓名{{ name }}/h2h2年龄{{ age }}/h2button v-on:clickchangeName修改名字/buttonbutton v-on:clickchangeAge修改年龄/buttonbutton v-on:clickshowTel查看联系方式/button/div
/templatescript setup langts
import { ref, reactive } from vue
let name ref(张三)
let age ref(18)
let tel ref(123456)function changeName() {name.value 李四console.log(name)}function changeAge() {age.value 1;console.log(age)}function showTel() {alert(tel)console.log(tel)}
/scriptstyle.person {background: blue;padding: 20px;}button{margin: 0 5px;}
/style
控制台打印可以看到 ref 定义的响应式数据返回的是一个ref对象。 1.2 ref 定义引用数据类型
其实 ref 接收的数据可以是基本类型、引用类型。
若 ref 接收的是引用类型内部其实也是调用了 reactive 函数。
代码如下
templatediv classpersonh3我是Person组件/h3h2姓名{{ info.name }}/h2h2年龄{{ info.age }}/h2button v-on:clickchangeName修改名字/buttonbutton v-on:clickchangeAge修改年龄/buttonbutton v-on:clickshowTel查看联系方式/button/div
/templatescript setup langtsimport { ref, reactive } from vuelet info ref({name: 张三, age: 18, tel: 12345678901})console.log(info)function changeName() {info.value.name 李四console.log(info.value.name)}function changeAge() {info.value.age 1;console.log(info.value.age)}function showTel() {alert(info.value.tel)console.log(info.value.tel)}
/scriptstyle
.person {background: blue;padding: 20px;
}button {margin: 0 5px;
}
/style 如图所示ref 定义引用数据类型在外层是一个RedImpl 实例对象而在内部是一个被proxy代理的对象。这也印证了“ 若 ref 接收的是引用类型内部其实也是调用了 reactive 函数 ”。 2. reactive 函数
作用定义一个响应式对象基本类型不要用它要用 ref否则报错。
语法let 响应式对象 reactive(源对象)。
返回值一个 Proxy 的实例对象简称响应式对象。
注意点reactive 定义的响应式数据是“深层次”的。
代码如下
templatediv classpersonh3我是Person组件/h3h2姓名{{ info.name }}/h2h2年龄{{ info.age }}/h2button v-on:clickchangeName修改名字/buttonbutton v-on:clickchangeAge修改年龄/buttonbutton v-on:clickshowTel查看联系方式/button/div
/templatescript setup langtsimport { ref, reactive } from vuelet info reactive({name: 张三, age: 18, tel: 12345678901})console.log(info)function changeName() {info.name 李四console.log(info.name)}function changeAge() {info.age 1;console.log(info.age)}function showTel() {alert(info.tel)console.log(info.tel)}
/scriptstyle
.person {background: blue;padding: 20px;
}button {margin: 0 5px;
}
/style
控制台打印 reactive 定义的引用对象info 如图所示 打印的是一个Proxy实例对象。
3. ref 和 reactive 对比
3.1 原理
(1) ref的本质就是实例化了RefImpl类得到了一个对象访问这个对象的value属性时触发track设置这个对象的value属性时触发trigger
(2) reactive响应式的原理是创建了一个被Proxy代理的对象Proxy里面代理了各种操作在读取的时候触发track函数在写入的时候触发trigger函数。
要想更深入了解底层原理可参考下面这篇文章 ↓ ↓ ↓
vue源码简析-vue响应式原理ref和reactive的原理 - 知乎
3.2 区别
1. ref 可以定义基本数据类型、引用数据类型而 reactive 只能定义引用数据类型。
2. ref 创建的变量必须用 .value(可以使用volar插件自动添加value)reactive不需要。
3. 定义引用类型时reactive 重新再分配一个对象会失去响应式可以使用 Object.assign整体替换。而 ref 重新分配对象时不会失去响应式。
3.3 使用原则
(1). 若需要一个基本类型的响应式数据必须使用 ref。
(2). 若需要一个响应式对象层级不深ref、reactive都可以。
(3). 若需要一个响应式对象且层级较深推荐使用 reactive。
